Otwieranie czatu własnym linkiem lub przyciskiem

Twoi odwiedzający nie muszą otwierać czatu dymkiem w rogu ekranu. Może to zrobić także link lub przycisk na Twojej stronie – na przykład „Pomoc i wsparcie” w panelu bocznym albo „Pytanie o plan” na stronie z cennikiem. Okno czatu otwiera się wtedy tuż obok tego elementu.

Nie potrzebujesz do tego dodatkowego kodu – wystarczy zwykły fragment osadzenia opisany w Osadzenie widgetu. Gotowy przykład do skopiowania znajdziesz też w koncie: Projekt → Osadzenie → Otwieranie czatu własnym linkiem.

Najprostszy przypadek

Link prowadzący do #rc-open:

<a href="#rc-open">Pomoc i wsparcie</a>

Albo przycisk z atrybutem data-rc-open:

<button type="button" data-rc-open>Otwórz czat</button>

data-rc-open działa na każdym elemencie, nie tylko na przyciskach. Zamiast #rc-open widget rozpoznaje też cel #reactive-chat.

Kliknięcie nie przepada, nawet jeśli widget nie zdążył się jeszcze w pełni załadować – okno otworzy się, gdy tylko będzie gotowe.

Gdzie pojawia się okno

• Po prawej stronie elementu, jeśli jest tam dość miejsca, a jeśli nie – po lewej. Górna krawędź okna wyrównuje się z elementem.
• Zawsze w całości na ekranie: okno mieści się w widocznym obszarze i podąża za elementem, gdy strona się przewija albo zmienia się rozmiar okna przeglądarki.
• Na wąskich ekranach (poniżej 480 pikseli szerokości, czyli na większości smartfonów) czat otwiera się jak zwykle na całym ekranie – obok elementu nie byłoby miejsca.
• Jako panel boczny: jeśli w sekcji Wygląd okno czatu jest ustawione jako panel boczny na całą wysokość, otwiera się właśnie tam, a nie obok elementu.
• Gdy czat jest już otwarty, okno przesuwa się do linku, który kliknięto jako ostatni.
• Po zamknięciu czatu (także klawiszem Escape) fokus klawiatury wraca na link lub przycisk, którym go otwarto.

Jeśli okno ma się otworzyć w zwykłym miejscu w rogu, użyj data-rc-open="corner". Tak samo działa data-rc-anchor="none":

<button type="button" data-rc-open="corner">Otwórz czat</button>

Gotowy tekst w polu wiadomości

Dzięki data-rc-message po otwarciu czatu w polu wiadomości jest już wpisane zdanie. Nie zostaje ono wysłane – odwiedzający może je uzupełnić, zmienić albo usunąć i sam decyduje o wysłaniu.

<button type="button" data-rc-open data-rc-message="Mam pytanie dotyczące mojego planu">
  Pytanie o plan
</button>

Przejmowanych jest maksymalnie 200 znaków. Czat przełącza się przy tym na zakładkę z rozmową.

Wybór zakładki

Jeśli Twój czat ma kilka zakładek, data-rc-tab określa, która z nich będzie widoczna po otwarciu:

• msg – rozmowa,
• home – strona startowa,
• help – artykuły pomocy.

<a href="#rc-open" data-rc-tab="help">Przeglądaj artykuły pomocy</a>

Jeśli w Twoim czacie nie ma podanej zakładki (np. help bez żadnych artykułów pomocy), czat po prostu otworzy się jak zwykle.

Otwieranie z własnego JavaScriptu

Te same możliwości są dostępne jako wywołanie. anchor to element, obok którego ma się pojawić okno; message i tab są opcjonalne:

document.querySelector('#moj-przycisk').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'Mam pytanie dotyczące mojego planu',
    tab: 'msg'
  });
});

Bez anchor okno otwiera się w zwykłym miejscu. ReactiveChat('open') bez opcji działa tak jak dotychczas. Jeśli sam element ma atrybut data-rc-message lub data-rc-tab, obowiązuje on także przy wywołaniu; to, co podasz wprost w wywołaniu, ma pierwszeństwo.

Jeśli Twój kod może się wykonać, zanim załaduje się fragment osadzenia, wstaw przed nim tę linijkę. Wywołania zostaną wtedy zapamiętane i wykonane, gdy tylko widget będzie gotowy:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Całkiem bez dymka czatu

Jeśli czat ma być dostępny wyłącznie przez Twoje własne linki – na przykład „Pomoc i wsparcie” w panelu bocznym – możesz to ustawić na dwa sposoby.

W koncie: w sekcji Projekt → Wygląd → Marka wybierz w polu Wyświetlanie opcję Tylko przez własne linki (bez ikony czatu) i zapisz. Ustawienie działa bez żadnych zmian na Twojej stronie. Mimo to skopiuj potem ponownie fragment osadzenia w sekcji Projekt → Instalacja: nowy fragment nie zawiera już koloru marki, więc ikona czatu nie mignie podczas ładowania strony. Dopóki widżet nie pobierze Twojego ustawienia z serwera – na przykład bez połączenia albo przy pierwszej wizycie, zanim odwiedzający zgodzi się na cookies – ikona dla bezpieczeństwa jednak się pojawi, żeby czat pozostał dostępny.

We fragmencie osadzenia: jeśli ikona nie może pojawić się nigdy, ukryj dymek czatu atrybutem data-rc-hide-launcher="true" we fragmencie osadzenia. Ten atrybut działa zawsze, niezależnie od ustawienia w koncie:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

Zadbaj wtedy o to, by na każdej stronie, na której odwiedzający mają mieć dostęp do czatu, był co najmniej jeden taki link.

Gdy coś nie działa

• Po kliknięciu przeglądarka tylko dopisuje #rc-open do adresu: na tej stronie widget nie jest osadzony albo się nie załadował (np. bez zgody odwiedzającego). Sprawdź, czy jest na niej fragment osadzenia.
• Okno otwiera się w rogu zamiast obok linku: czy element ma data-rc-open="corner" albo data-rc-anchor="none"? Czy okno przeglądarki jest węższe niż 480 pikseli? Czy okno czatu jest ustawione jako panel boczny?
• Tekst nie pojawia się w polu wiadomości: atrybut nazywa się data-rc-message i musi znajdować się na samym klikanym elemencie.

Pozostałe ustawienia fragmentu osadzenia opisuje Osadzenie widgetu. Jak pokazać w czacie kartę z własną ofertą, wyjaśnia Karta promocyjna w czacie.

Więcej w dokumentacji

Szczegółowo: Tag script – dokumentacja oraz API JavaScript. Wszystkie rozdziały znajdziesz w dokumentacji.