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. 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ę Więcej narzędzi. 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. W kroku pierwszym ustawiamy język, w jakim nasza wtyczka będzie pracować.

6. Krok drugi to dodanie naszej domeny.

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

8. 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:

9. Przejdź do sekcji Dostosuj wtyczkę Wtyczka czatu gdzie można ustawić 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 wylączyć czat dla osób niezalogowanych do Facebooka bądź Messengera.

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

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

Czy ten artykuł był pomocny?