Dialogflow Messenger – jak zmienić pozycję widgetu?

Dialogflow Messenger - jak zmienić pozycję widgetu

Jakiś czas temu wspominałem, że Google odpaliło beta wersję Dialogflow Messenger, czyli widget czatu zintegrowany z Dialogflow, który można umieścić na stronie. Dzisiaj pokażę Wam, jak zmienić pozycję widgetu – nie jest to takie oczywiste, dlatego poświęciłem na to osobny wpis.

Domyślnie widget czatu wyświetlany jest w prawym dolnym rogu i przysunięty jest do krawędzi ekranu. Wszystko wygląda dobrze dopóki nie ma na stronie elementów, które mogą przysłonić ten widget.

Przykład?

Wyobraźcie sobie stronę, na której, dla widoku mobilnego, wyświetla się zawsze na dole ekranu belka menu o ustalonej wysokości. W takim przypadku widget, który umieścimy na stronie, a który jak wspomniałem przysunięty jest domyślnie do krawędzi, zostanie przykryty przez tą belkę i będzie niewidoczny lub słabo-widoczny dla użytkownika.

Co możemy w takiej sytuacji zrobić?

Niestety w dokumentacji nie znajdziemy nic, co pozwoli nam wprost zmienić pozycję widgetu. Nie ma żadnych zmiennych, które pozwalają przesuwać dymek, ani żadnych ustawień, które to robią. Należy pamiętać, że nie jest to jeszcze wersja produkcyjna widgetu, więc można się takich ustawień spodziewać w przyszłości, ale póki co należy sobie radzić w inny sposób.

Jak?

Możemy zastosować pewne obejście i wykorzystać eventy, które są odpalane w odpowiednich sytuacjach.

Najlepszy wyborem będzie zdarzenie, które odpalane jest wtedy, gdy cały widget zostanie załadowany – to wydaje się najlepszy moment na dyskretną zmianę jego pozycji.

Zdarzenie to znajdziecie TUTAJ.

Gdy znajdziemy się w tym zdarzeniu, wówczas możemy znaleźć nasz element, a stąd już prosta droga do jego ostylowania w dowolny sposób (w naszym przypadku przesunięcia w górę).

window.addEventListener('dfMessengerLoaded', function (event) {
document
 .querySelector('df-messenger')
 .shadowRoot
 .querySelector('.df-messenger-wrapper')
 .setAttribute('style', 'bottom:57px');
});

Dzięki temu prostemu trikowi możecie dowolnie zmieniać widget i dopasowywać go. W podobny sposób możecie np. zmienić tekst, który wyświetla się w belce, gdzie użytkownik wpisuje wiadomości. Na tę chwilę nie ma wsparcia języka polskiego, więc domyślnie widoczny jest placeholder – Ask something, ale nic nie stoi na przeszkodzie, ale sposobem, który dzisiaj pokazałem zmienić łatwo ten tekst podczas ładowania widgeta.

Wiem, że nie jest to najbardziej eleganckie rozwiązanie, ale biorąc pod uwagę, że jest to wersja beta – należy sobie jakoś radzić.