Jak dodać messengera na stronie w 4 prostych krokach?

Żyjemy, czytamy i piszemy coraz szybciej – dlatego oczekujemy równie szybkich, wręcz natychmiastowych odpowiedzi na nasze zapytania. Pomyśl – straciłeś szansę na nowego klienta tylko dlatego, że Twoja konkurencja odpowiedziała na jego pytanie szybciej. Przykre, prawda?

Z tego powodu obok rewelacyjnej treści na swojej stronie, musisz udostępnić swoim użytkownikom możliwość kontaktu z Tobą. Obecnie jedną z najpopularniejszych form kontaktu jest okno komunikatora (czatu).

W sieci znajdziesz wiele dostępnych rozwiązań. Najbardziej znane to m.in. UserEngage i LiveChat. Często poza tradycyjnym czatem posiadają dodatkową analitykę, bazę kontaktów, itp. Jeżeli Was to interesuje, możecie przeczytać więcej na ich stronach. Zwykle są to narzędzia dodatkowo płatne.

Dziś pokażę Wam, jak w prosty sposób zainstalować Messengera na stronie www. Messenger to najpopularniejszy komunikator w Polsce, z którego obecnie na swoich smartfonach korzysta ponad 11 milionów użytkowników.

WAŻNE: Aby zainstalować Messenger’a na swojej stronie www, musisz posiadać stronę firmową (FanPage) na Facebooku. To właśnie z tym kontem będą komunikować się użytkownicy. Zakładam, że jeżeli prowadzisz stronę lub bloga to posiadasz również FanPage. Wolę to podkreślić, zanim zaczniemy.

 

KROK 1. Tworzymy Facebook AppID

Na początku musimy stworzyć Facebook AppID dla naszej aplikacji. Żeby to zrobić, wejdź na stronę:

https://developers.facebook.com/apps

Po wejściu na stronę zobaczysz mniej więcej taki widok:

jak zainstalować messengera na stronie www

 

Kliknij w “Add a New App” – pojawi się formularz. Wypełniamy wszystkie pola wyświetlonego formularza. W polu “Display Name” wpisz nazwę dla swojej aplikacji – dobrze, jeżeli wynika z niej, do czego została stworzona. Następnie podaj adres e-mail i kliknij Create App ID.

jak zainstalować messengera na stronie www

 

Po stworzeniu Facebook App ID, z menu po lewej stronie przechodzimy do zakładki “Dashboard”.

jak zainstalować messengera na stronie www

 

Wyświetli nam się okno z podstawowymi informacjami o aplikacji.

jak zainstalować messengera na stronie www

Mamy już AppID. Proste, prawda? A kolejne kroki nie będą wiele trudniejsze.

 

KROK 2. Skrypt Facebook SDK

Żeby aplikacja działała prawidłowo, musisz dodać do kodu źródłowego strony skrypt Facebook SDK, na każdej stronie na której chcesz wyświetlać okno Messengera. Ja dodałem go przed znacznikiem </head> w kodzie źródłowym strony. Dzięki czemu wyświetla się na każdej podstronie.

W celu uzyskania kodu kliknij na lewej kolumnie w zakładkę “Setting”. Wyświetli się widok jak poniżej.

jak zainstalować messengera na stronie www

Następnie kliknij w +Add Platform, i wybierz Website

jak zainstalować messengera na stronie www

 

Twój widok powinien wyglądać jak poniżej. Teraz w polu Site URL wpisz adres swojej strony i kliknij przycisk Quick Start.

jak zainstalować messengera na stronie www

 

Wyświetli się strona ze skryptem Facebook SDK, z wypełnionymi już polami dot. stworzonej przez Ciebie aplikacji.

jak zainstalować messengera na stronie www

To co musisz zrobić teraz, to skopiować skrypt i wkleić go zaraz przed znacznikiem </head>.

 

#PROTIP 🙂

Polecam zmienić w ścieżce
js.src = “https://connect.facebook.net/en_US/sdk.js”, paramert en_US na pl_PL. Dzięki temu tekst w wyświetlanym oknie czatu będzie po polsku. Jeżeli chcecie pozostać przy angielskim – wklejcie bez zmian.

 

KROK 3. Dodanie adresu swojej strony do whitelisty

Żeby komunikator działał na Twojej stronie www, musisz dodać ją do tzw. whitelisty. Wejdź na swój Fanpage (jeżeli korzystasz z Menadżera Firm, musisz zalogować się przez niego), Kliknij w “Ustawienia”, następnie “Platforma Messenger”. Znajdziesz tam pole “Whitelisted Domains”. Wpisz tu adres swojej witryny i kliknij zapisz.

jak zainstalować messengera na stronie www

 

KROK 4. Dodanie kodu źródłowego Messengera

Została nam wisienka na torcie – dodanie kodu Messengera do kodu źródłowego strony. Znajdziesz go na stronie Facebook for Developers.

https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

Jeżeli nie chce Ci się klikać możesz skorzystać z tego:

<div class=”fb-customerchat”
page_id=”<PAGE_ID>
ref=”<OPTIONAL_WEBHOOK_PARAM>
minimized=”<true/false>“>
</div>

Zanim wkleisz go w kod strony, najpierw musisz go zmodyfikować poprzez uzupełnienie wszystkich parametrów

Page ID – jest to identyfikator Twojej strony na Facebooku. Znajdziesz go w sekcji Informacje

jak zainstalować messengera na stronie www

ref – jest to adres strony internetowej, na której instalujemy Messengera (Twoja strona)

minimized – informuje o tym, czy chcemy aby messenger był zminimalizowany, a otwierał się dopiero po kliknięciu (opcja true) lub otwarty od razu po wejściu na witrynę (opcja false).

Gotowy skrypt w moim przypadku wygląda tak:

<div class=”fb-customerchat”
page_id=”1059344354132325
ref=”https://www.wieciecownecie.pl/”
minimized=”true“>
</div>

Tak przygotowany skrypt, umieszczamy kodzie źródłowym strony, tuż przed znacznikiem </head>.

Teraz już wiesz, jak zainstalować Messengera na stronie www

Jeżeli wszystko wykonałeś zgodnie z powyższą instrukcją na Twojej stronie powinieneś mieć już okienko Messengera. Brawo! 🙂 Daj znać czy się udało. Jeżeli będziesz miał jakiekolwiek problemy w trakcie napisz do mnie, a chętnie pomogę. Możesz skorzystać z okienka czatu 🙂

Powodzenia!

 

PS. Dajcie znać, co myślicie o takich wpisach. Przydadzą się? Wrzucać więcej? 🙂

 

Udostępnij