Czy Twoja witryna wykorzystuje pliki Cookies? Jeśli tak – masz obowiązek poinformować o tym użytkowników swojej strony internetowej. Za pomocą prostego narzędzia, które chcę Ci dzisiaj pokazać jesteś w stanie dodać do strony powiadomienie Cookies w formie prostego i eleganckiego okienka pop-up. Zaczynamy!
Cookie Popup – instalacja.
Nasze powiadomienie do prawidłowego działania wykorzystuje jedynie 2 pliki. Wystarczy pobrać je na swój komputer oraz przerzucić je do katalogu swojej strony internetowej. Następnie w sekcji <head> witryny wklejamy linki odwołujące do skryptu JS oraz stylu CSS, który będzie obsługiwał wygląd naszego okienka. Robimy to za pomocą linijki:
<!-- CookiePopup-->
<link rel="stylesheet" type="text/css" href="zakoduje-cookies/cookiepopup.css" async />
<script src="zakoduje-cookies/cookiepopup.js" async></script>
<!---->
Zauważ, że użyłem asynchronicznego pobierania skryptów – pozwala to na dalsze analizowanie strony w trakcie ładowania pliku JS/CSS. W takim wypadku mamy gwarancję uruchomienia skryptu tuż po zakończeniu jego pobierania, a przy okazji nie spowalniamy naszej witryny.
Uwaga! Jeśli umieściłeś skrypty w innym katalogu (np katalogu „js” swojej witryny – pamiętaj o odpowiedniej ścieżce w linku!).
Podobnie pamiętaj – jeśli korzystasz z WordPress, umieść pliki w odpowiednim katalogu swojego motywu i użyj funkcji PHP:
<?php echo get_stylesheet_directory_uri();?>
Powiadomienie Cookies – edycja komunikatów wyświetlanych w oknie.
Jeśli chcesz zmienić treść komunikatów wyświetlanych w oknie powiadomienia – wystarczy, że otworzysz plik cookiepopup.js i zmienisz treść zmiennych widocznych poniżej. Każda z nich jest opisana, więc na pewno się nie zgubisz.
// --- Config --- //
var cookiePopupTitle = "Cookies."; // Tytuł
okna
var cookiePopupDesc = "Korzystając z tej strony wyrażasz zgodnę na korzystanie z Cookies."; // Treść komunikatu
var cookiePopupLink = '<a href="polityka-prywatnosci.html" target="_blank">Ok?</a>'; // Link do polityki prywatności
var cookiePopupButton = "Ok!"; // Tekst przycisku
// --- --- //
Edycja CSS.
Wszelkich zmian wyglądu Twojego popupa dokonasz w pliku cookiepopup.css. Możesz zmienić kolor tła, przycisku, tekstu, wstawić własny font, lub rozmiar okna powiadomienia.
Popupa możesz pobrać poniżej. Have fun 🙂
Dodaj komentarz