Czat z gośćmi, na Twojej własnej stronie.

1. 1

   Utwórz widżet

   Otwórz aplikację Widżet czatu AI w Prohost i ustaw nazwę, powitanie oraz styl przycisku, które zobaczą odwiedzający.

2. 2

   Skopiuj fragment kodu

   W sekcji Dodaj do innej strony skopiuj fragment. Zawiera już identyfikator widżetu, klucz osadzania i ustawienia przycisku.

3. 3

   Wklej go przed zamykającym tagiem body

   Wstaw go do stopki całej strony lub pola na własny kod i opublikuj. Przycisk pojawi się w rogu przy następnym załadowaniu strony.

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  data-position="bottom-right"
  data-launcher-color="#4F46E5"
  data-launcher-icon="chat"
  data-sound="on"
  async></script>

Zastąp WIDGET_ID i WIDGET_API_KEY wartościami z ustawień widżetu — albo po prostu skopiuj gotowy fragment z aplikacji, która wypełni je za Ciebie. Klucz osadzania jest publiczny i ograniczony do tego jednego widżetu: nie daje dostępu do Twojego konta. Prohost ukrywa klucz po pierwszym wyświetleniu, więc jeśli potrzebujesz nowego fragmentu do skopiowania, użyj opcji Odnów klucz.

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  async></script>

Działa z większością kreatorów stron — Webflow, WordPress, Squarespace i Wix mają miejsce na własny kod w stopce strony.

data-hide-mobile działa samą obecnością: dowolna wartość, także pusty ciąg, włącza go. Każdy inny atrybut jest dopasowywany po wartości — w szczególności data-sound reaguje tylko na dokładną wartość on pisaną małymi literami.

• Odwiedzający musi najpierw wejść w interakcję ze stroną

  Przeglądarki blokują dźwięk, dopóki ktoś nie kliknie, nie dotknie lub nie zacznie pisać. Otwarcie przycisku się liczy, podobnie jak pisanie w panelu — więc odwiedzający, który wysłał wiadomość wywołującą odpowiedź, ją usłyszy. Jeśli przeglądarka i tak zablokuje odtwarzanie, nic się nie psuje: główny sygnał to plakietka nieprzeczytanych na przycisku, a dźwięk to dodatek.

• Nigdy nie gra, gdy czytają

  Brak sygnału, gdy panel jest otwarty, a karta na pierwszym planie — odpowiedź jest już na ekranie. Gra, gdy panel jest zamknięty albo karta w tle. Plakietka nieprzeczytanych działa według nieco węższej zasady: pojawia się tylko wtedy, gdy panel jest zamknięty.

• Seria odpowiedzi to jeden sygnał

  Kilka wiadomości przychodzących razem daje jeden sygnał, nie jeden na wiadomość.

function wireUpWebchat() {
  window.ProhostWebchat.on('webchat_host_message', (event) => {
    console.log(event.type);
  });

  document.querySelector('#my-chat-button')?.addEventListener('click', () => {
    window.ProhostWebchat.open();
    // window.ProhostWebchat.close() collapses it again.
  });
}

if (window.ProhostWebchat) {
  wireUpWebchat();
} else {
  // src*= rather than src$= — the tag may carry a cache-busting query string.
  document
    .querySelector('script[src*="/webchat.js"]')
    ?.addEventListener('load', wireUpWebchat);
}

• webchat_session_startedRozmowa już istnieje — odwiedzający wysłał pierwszą wiadomość. Ładunek zawiera conversationId.
• webchat_message_sentOdwiedzający wysłał wiadomość.
• webchat_host_messageNadeszła odpowiedź od Twojego zespołu lub Twojej AI. To ona steruje plakietką nieprzeczytanych i, gdy włączony, sygnałem dźwiękowym.

Przydatne razem z data-hide-mobile: ukryj domyślny przycisk na telefonach i otwieraj panel własnym przyciskiem. Zdarzenia są przekazywane tylko wtedy, gdy pochodzą z osadzenia Prohost, nigdy z innego źródła.