FlowHunt JS API: Zaawansowana personalizacja chatbota

Flowhunt oferuje bogaty zestaw funkcji pozwalających na głęboką personalizację zachowania chatbota i jego płynną integrację z Twoją stroną lub aplikacją. Na tej stronie dowiesz się, jak wdrożyć zaawansowane dostosowania – zmienne przepływu, parametry URL, wywołania zwrotne oparte na zdarzeniach oraz własną logikę aktywacji czatu.

Zmienne przepływu: Personalizuj doświadczenie czatu

Zmienne przepływu umożliwiają przekazanie dynamicznych danych do chatbota, dzięki czemu rozmowy stają się naprawdę spersonalizowane. W tych zmiennych możesz przechowywać dowolne informacje: dane użytkownika, dane sesji lub jakiekolwiek istotne informacje.

Jak używać flowVariable

flowVariable to część konfiguracji FHChatbot.initChatbot(). Jest to obiekt, w którym każda para klucz-wartość definiuje zmienną i jej wartość. Przykład – przekazywanie adresu IP użytkownika i jego identyfikatora:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "flowVariable": {
        "ip": /* Kod do pobrania adresu IP */ ,
        "userId":  /* Kod do pobrania identyfikatora użytkownika */
      }
    });
  }
);
</script>

Ważne uwagi:

• Zamień /* Kod do pobrania adresu IP */ i /* Kod do pobrania identyfikatora użytkownika */ na własną logikę pobierania tych wartości z Twojego systemu. Często wiąże się to z dostępem do zmiennych po stronie serwera, local storage lub innymi metodami uwierzytelniania.
• Po przekazaniu, te zmienne są dostępne w logice Twojego chatbota, co umożliwia dynamiczne odpowiedzi i spersonalizowane ścieżki.
• Logika chatbota może odczytywać i wykorzystywać te zmienne do personalizacji rozmów oraz nadawania im kontekstu.

urlSuffix: Śledzenie i analiza interakcji z chatbotem

Parametr urlSuffix pozwala dodać ciąg zapytania na końcu każdego adresu URL wywoływanego przez chatbota. Jest to nieocenione przy śledzeniu źródła i skuteczności interakcji z chatbotem za pomocą narzędzi analitycznych, takich jak Google Analytics.

Jak używać urlSuffix

Po prostu ustaw właściwość urlSuffix na wybrany ciąg zapytania, np.:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=twoje-źródło"
    });
  }
);
</script>

W tym przykładzie ?utm_source=twoje-źródło zostanie dołączone do wszystkich URL inicjowanych przez chatbota, co pozwoli śledzić ruch z chatbota w Twojej platformie analitycznej.

Korzyści

• Śledzenie konwersji: Monitoruj, które interakcje z chatbotem prowadzą do największej liczby konwersji na stronie.
• Analiza zachowań użytkowników: Dowiedz się, jak użytkownicy poruszają się po stronie po rozmowie z chatbotem.
• Atrybucja kampanii: Mierz skuteczność kampanii, które zachęcają do korzystania z chatbota.

Obsługa zdarzeń: Reaguj na działania chatbota

Flowhunt umożliwia ustawienie obsługi zdarzeń, które wywołują własne funkcje w odpowiedzi na określone zdarzenia w chatbotcie. Dzięki temu masz pełną kontrolę nad doświadczeniem użytkownika. Główne obsługiwane zdarzenia to:

• onSessionCreated: Wywoływane, gdy uruchamiana jest nowa sesja chatbota (ponowne uruchomienie także się liczy!).
• onWindowOpened: Wywoływane, gdy okno chatbota zostanie otwarte.
• onWindowClosed: Wywoływane, gdy okno chatbota zostanie zamknięte.
• onError: Wywoływane w przypadku błędu w chatbocie.
• onMessageReceived: Wywoływane, gdy bot wysyła wiadomość oraz gdy użytkownik wysyła wiadomość.
• onMessageSent: Wywoływane, gdy użytkownik wysyła wiadomość.

Jak używać obsługi zdarzeń

Możesz ustawić obsługę zdarzeń, korzystając ze zmiennej fhChatbot zwracanej przez FHChatbot.initChatbot i dodawać listenery, np. fhChatbot.onSessionCreated(). Oto przykład:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// reagowanie na gotowość chatbota na stronie
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatbot jest gotowy, przycisk czatu powinien być teraz widoczny i gotowy do kliknięcia.");
});

(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg"
    }); 
    
    fhChatbot.onSessionCreated(function () {
      // Własna logika po utworzeniu sesji, np. wywołanie API lub zapis danych
      console.log("sesja rozpoczęta");
    });
    
    fhChatbot.onWindowOpened(function () {
      // własna logika po otwarciu okna, np. wyświetlenie treści nad czatem
      console.log("okno otwarte");
    });
    
    fhChatbot.onWindowClosed(function () {
      // własna logika po zamknięciu okna, np. wyświetlenie treści nad czatem
      console.log("okno zamknięte");
    });
    
    fhChatbot.onError(function (e) {
      // własna logika po wystąpieniu błędu, np. śledzenie błędów
      console.log(e.metadata);
      console.log("błąd okna");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // własna logika po odpowiedzi bota
      console.log("chatbot odpowiedział");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // własna logika po wysłaniu wiadomości przez użytkownika
      console.log("użytkownik wysłał wiadomość");
    });
  }
);
</script>

Każda funkcja obsługująca zdarzenie może wykonywać własną logikę, dzięki czemu chatbot dynamicznie reaguje na zachowania użytkownika.

Przykłady zastosowania:

• Analityka i raportowanie: Śledź rozpoczęcia sesji i korzystanie z chatbota, wykorzystując zdarzenia jak onSessionStart, aby wysyłać cenne metryki.
• Dynamiczne aktualizacje UI: Modyfikuj stronę na podstawie zdarzeń chatbota (np. wyświetlaj inną wiadomość, gdy czat jest aktywny).
• Obsługa błędów: Wychwytuj i reaguj na błędy chatbota, poprawiając doświadczenie użytkownika.
• Własne ścieżki użytkownika: Wdrażaj niestandardową logikę w zależności od interakcji użytkownika z czatem.

Własna aktywacja czatu: Otwieraj i zamykaj po swojemu

Ustawiając showChatButton: false, możesz ukryć domyślny przycisk czatu. Następnie możesz programowo otwierać lub zamykać okno chatbota zgodnie z własną logiką. Daje to pełną kontrolę nad interfejsem użytkownika.

Jak używać własnej aktywacji

1. Wyłącz domyślny przycisk: Dodaj w opcjach FHChatbot.initChatbot(): showChatButton: false.
2. Steruj programowo: Użyj metod fhChatbot.openChat() i fhChatbot.closeChat(), by kontrolować widoczność na podstawie własnych zdarzeń.

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg",
      "showChatButton": false
    }); 
    
    // Przykład: jeśli użytkownik kliknie w niestandardowy przycisk
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Przykład: jeśli użytkownik zamknie czat przez własny przycisk zamykania
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

W tym przykładzie dodaliśmy nasłuchiwacze do własnych przycisków, aby otwierać lub zamykać czat.

Korzyści:

• Własny design: Połącz chatbota z wyglądem strony, korzystając z własnego przycisku lub innych wyzwalaczy do uruchomienia czatu.
• Kontrola ścieżki użytkownika: Uruchamiaj chatbota w określonych momentach ścieżki użytkownika, oferując kontekstowe wsparcie.
• Strategiczne rozmieszczenie: Używaj animacji lub innych wizualnych wskazówek, aby przyciągnąć uwagę użytkownika do chatbota we właściwym momencie.

Dzięki wykorzystaniu zmiennych przepływu, sufiksów URL, obsługi zdarzeń i własnej aktywacji czatu, możesz tworzyć wysoce spersonalizowane i angażujące doświadczenia z chatbotem Flowhunt. Te zaawansowane opcje pozwalają dopasować chatbota idealnie do potrzeb Twojego biznesu oraz oczekiwań użytkowników.