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.

Uwaga

Instrukcja dotyczy dodania wtyczki dla standardowych szablonów Comarch od wersji 2021.2.

Instrukcja ogólna

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

2. Kursorem wysuwamy menu opcji z lewej strony ekranu, wybieramy opcję Wszystkie narzędzia. Z dodatkowego wysuniętego menu wybieramy opcję Ustawienia strony.

3. Z listy po lewej wybieramy opcję Wiadomości. Po załadowaniu się ustawień, zjeżdżamy na dół strony, gdzie znajduje się opcja Dodaj Messengera do swojej witryny. Klikamy przycisk Rozpocznij.

4. Na nowo wyświetlonej stronie pojawia się opcja Skonfiguruj Wtyczka czatu. Klikamy na niebieski przycisk Skonfiguruj. 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.

8. Krok trzeci to kod potrzebny do dodania wtyczki do szablonu. Należy go skopiować przy użyciu przycisku Skopiuj kod.

9. 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

W szablonie Topaz, skopiowany kod należy wkleić do pliku base_layout.html znajdującego się w głównym katalogu z Twoim szablonem. Aby tam dotrzeć należy wejść w Ustawienia, następnie klikając w ikonę z trzema pionowymi kropkami, znajdującą się w prawym górnym rogu wybieramy Edytuj ustawienia zaawansowane, później ponownie klikamy w tę samą ikonę, lecz tym razem z opcją Edytuj HTML. Gdy już będziemy w miejscu, gdzie znajduje się plik base_layout.html skopiowany wcześniej kod wklejamy pod koniec tego pliku. Poniżej niego mają zostać tylko linijki zawierające zamknięcie tagu html, zamknięcie tagu body oraz zamknięcie( {% endif -%} ) jednego warunku. Powyżej wklejonego kodu powinno być zamknięcie ( {% endif -%} ) warunku {% if config.External.SalesManago -%}.

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 Topaz to 120px). Można także własnoręcznie edytować style naszej wtyczki. W plikach .css wystarczy dodać odpowiednio klasę .fb_customer_chat_bounce_in_v2 – okno czatu oraz .fb_customer_chat_icon – ikona wtyczki. Zmian należy dokonać w pliku layout0.css

Obsługa w szablonie Szafir

W szablonie Szafir , 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 Szafir 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.
Plik .scss, który należy zmodyfikować nazywa się desktop1.scss.

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.

Powyższy kod jest przykładowym kodem .scss dla standardowych szablonów poza Topazem. Ponieważ w szablonie Topaz mamy od razu zminifikowane pliki .css, poniższy kod wklejamy do jednego z plików .css zawierających layout w nazwie.

Wskazówka

Przedstawiony kod jest tylko przykładem, jak możemy edytować wygląd naszej wtyczki. Należy pamiętać także o utworzeniu styli dla wersji mobilnej przy użyciu @media.

Wskazówka

W przykładzie została użyta instrukcja !important Jest to o tyle istotne, że bez jej użycia możemy nie nadpisać domyślnego wyglądu wtyczki przygotowanego przez Facebooka.