Obsługa wtyczki Czatu Facebooka w szablonach

W niniejszym artykule dowiesz się w jaki sposób Twój szablon może obsługiwać wtyczkę Czatu Facebooka.

Na początku omówiona zostanie ogólna instrukcja ustawienia wtyczki oraz opisane zostaną ustawienia w konfiguracji Facebooka, na które warto zwrócić uwagę. W dalszych punktach zostaną omówione wymagane zmiany w kodzie poszczególnych szablonów.

Instrukcja ogólna

1. W przeglądarce internetowej otwieramy stronę https://business.facebook.com. Logujemy się swoimi danymi.

2. Wybieramy opcję Skrzynka odbiorcza. Z menu po prawej stronie  wybieramy opcję Ustawienia.

3. Z listy po lewej wybieramy opcję Wtyczka czatu. Po załadowaniu się ustawień, znajduje się opcja Skonfiguruj wtyczkę czatu Klikamy przycisk Skonfiguruj.

4. Pokaże się małe okienko do konfiguracji.

5. Na początku mamy do wyboru metodę konfiguracji. Wybieramy opcję Standardowa.

6. W kroku pierwszym ustawiamy język, w jakim nasza wtyczka będzie pracować.

7. Krok drugi to dodanie naszej domeny. Zwróć uwagę na to, czy podana przez Ciebie domena posiada protokół http czy https. Podany w niniejszej konfiguracji musi się zgadzać z faktycznymi ustawieniami.

Jeśli korzystasz z szablonu Topaz, One Page Shop lub Szafir, możesz pominąć kroki 8 oraz 9. W wygenerowanym przez Meta kodzie do wklejenia, znajdź tylko page_id i znajdujący się tam numer (identyfikator) skopiuj – będzie potrzebny w ustawieniach szablonu.

8. (Dla szablonu Bursztyn, Opal, Agat) Krok trzeci to kod potrzebny do dodania wtyczki do szablonu. Należy go skopiować przy użyciu przycisku Skopiuj kod.

9. (Dla szablonu Bursztyn, Opal, Agat) Wklej skopiowany przed chwilą kod w odpowiednie miejsce w Twoim szablonie. Instrukcja gdzie należy wkleić ten kod, znajduje się poniżej, dla każdego ze standardowych szablonów z osobna.

Opcjonalnie:

10. Przejdź do sekcji Dostosuj wtyczkę Wtyczka czatu gdzie można ustawić m.in. wyrównanie wtyczki do lewej lub prawej strony, jej motyw kolorystyczny a także odległość od dołu strony dla komputerów i urządzeń mobilnych.
W tej sekcji możesz także dodatkowo ustawić automatyczne rozwijanie okna czatu oraz włączyć lub wyłączyć czat dla osób niezalogowanych do Facebooka bądź Messengera.

11. Przejdź do sekcji Rozpocznij konwersację gdzie można ustawić wiadomość powitalną a także włączyć/wyłączyć funkcję najczęściej zadawanych pytań. Pytania wraz z odpowiedziami na nie konfigurujemy w tej sekcji dowolnie.

Zwróć uwagę na te ustawienia:

Po procesie konfiguracji mogą wystąpić pewne problemy lub błędy. Część z nich może być spowodowana nieprawidłowymi ustawieniami Twojej strony na Facebooku. Na głównej stronie na rozwijanym menu po lewej stronie kliknij Wszystkie narzędzia, potem Ustawienia strony a następnie wybierz sekcję Ogólne. Ustawienia, które mogą powodować problemy to m.in. Widoczność strony, gdy mamy ustawioną opcję „Cofnięto publikację strony”. Kolejnymi ustawieniami do sprawdzenia są Ograniczenia dotyczące kraju oraz Ograniczenia wiekowe. Ewentualne narzucenie ograniczeń może powodować błędy wyświetlane w konsoli w narzędziach developerskich, gdy otworzysz swój sklep.

Sprawdź też sekcję Wszystkie narzędzia -> Ustawienia strony -> Zaawansowane ustawienia wiadomości, a tam ustawienie Domeny dodane do białej listy. Upewnij się, że Twój sklep znajduje się na tej liście.

Z perspektywy Klienta, w przypadku ewentualnych błędów związanych z wyświetlaniem lub działaniem wtyczki, pomocne może okazać się wyczyszczenie pamięci podręcznej (cache).

Obsługa w szablonie Topaz, One Page Shop i Szafir

1. W przygotowanym przez Meta kodzie do wklejenia, odszukaj page_id i skopiuj podany tam numer (identyfikator).

2. Skopiowany identyfikator wklej w Panelu Administracyjnym Comarch e-Sklep, przechodząc do zakładki: Topaz/One Page Shop: Wygląd Sklepu/ Ustawienia/ Dodatkowe/ Wyświetlaj Facebook czat, Szafir: Wygląd sklepu/ Ustawienia/ Ogólne/ Wyświetlaj Facebook czat i zaznaczając parametr na Tak:

Obsługa w szablonie Bursztyn

W szablonie Bursztyn, skopiowany kod należy wkleić do pliku _layout.html znajdującego się w głównym katalogu z Twoim szablonem. Kod wklejamy pod koniec tego pliku. Poniżej niego mają zostać tylko linijki zawierające zamknięcie tagu html oraz zamknięcie tagu body.

Istnieje możliwość zmiany położenia wtyczki. Przy pomocy konfiguratora wtyczki czatu możemy ustalić, czy ma być ona wyrównana do lewej czy do prawej strony, zmienić motyw kolorystyczny dopasowując go do wyglądu sklepu, a także ustalić w jakiej odległości od dołu ekranu ma pojawiać się wtyczka (dla wyrównania do prawej, sugerowana odległość na komputery w szablonie Bursztyn to 120px). Można także własnoręcznie edytować style naszej wtyczki. W plikach .scss wystarczy dodać odpowiednio klasę .fb_customer_chat_bounce_in_v2 – okno czatu oraz .fb_customer_chat_icon – ikona wtyczki a następnie przy użyciu gulp’a przekonwertować pliki .scss na .css. Zmiany możemy dokonać na końcu pliku main.scss.

Obsługa w szablonie Opal

W szablonie Opal, skopiowany kod należy wkleić do pliku _layout.html znajdującego się w głównym katalogu z Twoim szablonem. Kod wklejamy pod koniec tego pliku. Poniżej niego mają zostać tylko linijki zawierające zamknięcie tagu html oraz zamknięcie tagu body.

Istnieje możliwość zmiany położenia wtyczki. Przy pomocy konfiguratora wtyczki czatu możemy ustalić, czy ma być ona wyrównana do lewej czy do prawej strony, zmienić motyw kolorystyczny dopasowując go do wyglądu sklepu, a także ustalić w jakiej odległości od dołu ekranu ma pojawiać się wtyczka (dla wyrównania do prawej, sugerowana odległość na komputery w szablonie Opal to 110px). Można także własnoręcznie edytować style naszej wtyczki. W plikach .scss wystarczy dodać odpowiednio klasę .fb_customer_chat_bounce_in_v2 – okno czatu oraz .fb_customer_chat_icon – ikona wtyczki a następnie przy użyciu gulp’a przekonwertować pliki .scss na .css. Zmiany możemy dokonać na końcu pliku main.scss.

Obsługa w szablonie Agat

W szablonie Agat, skopiowany kod należy wkleić do pliku _layout.html znajdującego się w głównym katalogu z Twoim szablonem. Kod wklejamy pod koniec tego pliku. Poniżej niego mają zostać tylko linijki zawierające zamknięcie tagu html oraz zamknięcie tagu body.

Istnieje możliwość zmiany położenia wtyczki. Przy pomocy konfiguratora wtyczki czatu możemy ustalić, czy ma być ona wyrównana do lewej czy do prawej strony, zmienić motyw kolorystyczny dopasowując go do wyglądu sklepu, a także ustalić w jakiej odległości od dołu ekranu ma pojawiać się wtyczka (dla wyrównania do prawej, sugerowana odległość na komputery w szablonie Agat to 120px). Można także własnoręcznie edytować style naszej wtyczki. W plikach .scss wystarczy dodać odpowiednio klasę .fb_customer_chat_bounce_in_v2 – okno czatu oraz .fb_customer_chat_icon – ikona wtyczki a następnie przy użyciu gulp’a przekonwertować pliki .scss na .css. Zmiany możemy dokonać na końcu pliku main.scss.

Przykładowy kod do modyfikacji wyglądu wtyczki – wersja na komputery

Poniżej znajduje się przykładowy kod służący modyfikacji położenia i wysokości zarówno okna czatu, jak i ikonki czatu.

Zakładamy, że w ustawieniach wtyczki opisanych wcześniej, mamy wyrównanie do prawej i 120px odległości od dołu w wersji na komputery.
Kod w wersji .scss (Po jego wklejeniu do odpowiedniego pliku w danym szablonie, należy przekonwertować pliki .scss na pliki .css i dokonać ich minifikacji. Jak tego dokonać dowiesz się z tego artykułu.