Jak dodać okno Messengera do strony internetowej?

przez Karolina Łodyga w Grudzień 14, 2017

Okno komunikatora na stronie internetowej, to jedno z popularniejszych rozwiązań ostatnich czasów pozwalające na szybką komunikację klienta z przedstawicielem marki.

Rozwiązań tego typu jest sporo – LiveChat, UserEngage, Czater i wiele, wiele innych, ale dziś zajmę się Messengerem – komunikatorem stworzonym przez Facebooka, z którego, w wersji mobilnej, w Polsce korzysta już ponad 11 milionów użytkowników. To więcej niż z mobilnej aplikacji Facebooka (9.2 miliona użytkowników).
Źródło danych: Gemius/PBI za listopad 2017

W jaki sposób zainstalować Messengera na stronie www?

Zacznijmy od tego, że taką integrację przeprowadzać będziemy z kontem firmowym – Fanpagem.

1. Pierwszym krokiem będzie wygenerowanie Facebook App ID dla połączenia Messengera ze stroną internetową. Wykonujemy to pod tym adresem: https://developers.facebook.com/apps
Wybieramy opcję + Add a New App, a następnie musimy podać nazwę naszej aplikacji (np. Messenger) oraz kontaktowy adres email i klikamy Create App ID.

Add a New Facebook App
Create a New App ID
Następnie przechodzimy do sekcji Dashboard – lewe pionowe menu i już znajdujemy informację o naszym App ID.


2. Drugim krokiem będzie odpowiednia modyfikacja skryptu Facebook SDK. W poniższym skrypcie podmieniamy zielone pola, na odpowiednie wartości z App ID, a następnie kod podpinamy do naszej strony www zaraz przed znacznikiem </footer>.

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.11&appId=1813447065619686";
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
</script>


3. Trzecim krokiem jest dodanie, w ustawieniach Fanpage’a, do tak zwanej białej listy (whitelist) adresu strony internetowej, na której będzie działać Messenger.

Facebook > Zarządzanie stronami > Ustawienia > Platforma Messengera > Whitelisted domains

Messenger Whitelist


4. W czwartym kroku dodajemy do strony internetowej skrypt okna Messengera – umieszczamy go tuż przed tagiem </head>.

Element page_id to tak zwany Identyfikator strony, który znajdujemy w informacjach Fanpage’a:

<div class="fb-customerchat"
page_id="188409441181171"
ref="https://premium-consulting.pl/"
minimized="false">
</div>

Elementy zaznaczone na zielono należy zmodyfikować pod własne potrzeby:

  • page_id – identyfikator strony
  • ref – adres strony internetowej, na której instalujemy Messengera
  • minimized – tu mamy możliwość ustawienia wartości true lub false. W przypadku true, okno czatu będzie domyślnie zminimalizowane i wyświetlać będzie się tylko logo Messengera, natomiast w sytuacji konfiguracji z atrybutem false, okno będzie domyślnie otwarte.

Voilà. Messenger zainstalowany. Jeśli jednak napotkasz na trudności podczas instalacji odezwij się do mnie – z chęcią pomogę.

 

Lubisz ten artykuł?
Podziel się ze znajomymi
Polub nasz kanał na Facebooku
aby otrzymywać wpisy bezpośrednio na fejsie.

Karolina Łodyga
Karolina Łodyga

Jest absolwentką Wyższej Szkoły Bankowej kierunku Zarządzania marketingowego. Fascynuje się marketingiem, nowymi mediami oraz gadżetami technologicznym. Obsługa narzędzi marketingowych to dla niej nie tylko czysta przyjemność, ale również główne zadanie w Premium Consulting.

Karolina ŁodygaJak dodać okno Messengera do strony internetowej?

Sprawdź, co możemy dla Ciebie zrobić