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 🙂

Jeśli ten wpis Ci się spodobał – zapisz się na newsletter, aby nie przegapić kolejnych wpisów dotyczących blogowania w WordPressie. Powiadomienie Cookies do wykorzystania na stronie zostanie do Ciebie automatycznie wysłane 🙂

Zapisz mnie!