JS API-integrasjon

Komplett referanse for FlowHunt JS API v2-integrasjonen. Bygg inn chatboten, abonner på alle 11 hendelser, bruk flow-variabler, utløs Chat Hook-triggeren midt i samtalen med sendHook(), spor interaksjoner med URL-parametere og styr chatvinduet programmatisk.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API gir deg full kontroll over hvordan chatboten din integreres med nettstedet ditt. Ved hjelp av v2-integrasjonskoden kan du bygge inn chatboten, abonnere på livssyklus- og interaksjonshendelser, sende dynamiske data via flow-variabler, utløse Chat Hook-triggeren midt i samtalen med sendHook(), spore interaksjoner med URL-parametere og programmatisk styre chatvinduet.

Denne guiden dekker alle aspekter av JS API med kodeeksempler du kan kopiere og tilpasse til prosjektet ditt.

Integrasjonskode (v2)

Kopier og lim inn snippet-en nedenfor i HTML-en din like før den avsluttende </body>-taggen. Erstatt YOUR_CHATBOT_ID og YOUR_WORKSPACE_ID med verdiene fra chatbot-innstillingene dine i FlowHunt.

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function () {
    window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
      // The chatbot is ready — use chatbotManager here
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Chatbot-ID-en i det globale variabelnavnet (window.FHChatbot_YOUR_CHATBOT_ID) bruker underscores i stedet for bindestreker.

Overstyre Konfigurasjon med setConfig()

Før du kaller init(), kan du overstyre standardinnstillingene for chatboten ved hjelp av setConfig():

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function () {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
      headerTitle: 'Support Assistant',
      maxWindowWidth: '700px',
      showChatButton: false,
      flowVariables: {
        userId: '12345',
        plan: 'enterprise',
      },
      urlSuffix: '?utm_source=chatbot',
    });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
      // Chatbot initialised with custom config
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Tilgjengelige Konfigurasjonsalternativer

AlternativTypeBeskrivelse
headerTitlestringTilpasset overskriftstekst
maxWindowWidthstringMaksimal bredde på chatvinduet (f.eks. "700px")
maxWindowHeightstringMaksimal høyde på chatvinduet
inputPlaceholderstringPlassholdertekst for meldingsinntastingsfeltet
showChatButtonbooleanVis eller skjul den flytende standard chatknappen
openChatPanelbooleanÅpne chatpanelet automatisk ved sideinnlasting
flowVariablesobjectNøkkel-verdi-par med tilpassede data som sendes til flowen. Verdier kan være enhver JSON-serialiserbar type (string, number, boolean, object, array).
urlSuffixstringSpørringsstreng som legges til alle chatbot-genererte URL-er
cookieConsentbooleanAktiver sesjonspersistens via informasjonskapsler
embeddedstringAngi for å aktivere innebygd modus (ingen lukkeknapp)
themestringTemamodus

Flow-variabler: Send Dynamiske Data

flowVariables slås sammen med hver økt chatboten oppretter. De brukes typisk som statisk kontekst (kjent ved sideinnlasting): brukerens ID, abonnement, gjeldende språk osv.

window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
  flowVariables: {
    userId: getCurrentUserId(),
    userEmail: getCurrentUserEmail(),
    currentPage: window.location.pathname,
    plan: 'enterprise',
  },
});

Hvis brukeren navigerer etter at chatten er åpnet, blir verdier sendt her foreldede. For å oppdatere dem midt i samtalen, kall chatbotManager.sendHook() med options.flowVariables — se Vert → flow-kommunikasjon midt i samtalen nedenfor.

URL Suffix: Spor Chatbot-interaksjoner

Parameteren urlSuffix legger til en spørringsstreng til hver URL generert av chatboten. Dette er nyttig for å spore chatbot-avledet trafikk i analyseverktøy:

window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
  urlSuffix: '?utm_source=chatbot&utm_medium=widget',
});

Bruksscenarier:

  • Spor konverteringer fra chatbot-interaksjoner i Google Analytics.
  • Analyser brukeratferd etter interaksjon med chatboten.
  • Tilskriv kampanjer som driver chatbot-engasjement.
Logo

Klar til å vokse bedriften din?

Start din gratis prøveperiode i dag og se resultater i løpet av få dager.

Be om demo Logg inn

Vert → flow-kommunikasjon midt i samtalen

Lagt til i april 2026 som en del av FlowHunt Chat Hook-funksjonen.

I single-page-applikasjoner forblir chatvinduet vanligvis åpent mens brukeren navigerer mellom skjermbilder. Når chatten er i gang, blir flowVariables sendt via setConfig() foreldede, og det finnes ingen måte å varsle flowen om noe som har skjedd på vertssiden. En enkelt manager-metode — sendHook(name, payload, options?) — dekker både “utløs en trigger” og “bare oppdater kontekst”-bruksscenarier:

  • Send et name og (valgfritt) en payload for å utløse flowens Chat Hook-trigger. Flow-forfatteren legger inn én Chat Hook-node på lerretet og forgrener på {ChatHook.hook_name} for å avgjøre hva som skal skje.
  • Send options.flowVariables for å slå sammen øktvariabler samtidig — verdiene lagres før triggeren utløses og forblir tilgjengelige for resten av økten.
  • Hvis flowen ikke har en Chat Hook-trigger, er kallet en stille 200 no-op: options.flowVariables slås likevel sammen, men ingen trigger kjøres og ingen kreditter belastes. Dette betyr at vertssider kan kalle sendHook() optimistisk uten å vite om flow-forfatteren har koblet inn en trigger ennå.

sendHook() er en trygg no-op før økten finnes (bufres internt og tømmes når økten er opprettet) og kaster aldri unntak til vertssiden — nettverksfeil logges kun via console.warn.

Inputgrenser

Server- og klientsidegrenser som gjelder for sendHook(). Brudd på dem er ikke en krasj — backend-en returnerer HTTP 422 og manageren logger via console.warn uten å kaste unntak.

BegrensningGrenseHvor håndhevetVed brudd
Lengde på sendHook name1–256 tegnBackend (Pydantic)HTTP 422, trigger utløses ikke
Antall nøkler i options.flowVariables≤ 64Backend (Pydantic)HTTP 422, ingenting lagres
Lengde på hver nøkkel i options.flowVariables≤ 128 tegnBackend (Pydantic)HTTP 422, ingenting lagres
Pre-økt-kall bufret av manageren50Widget (i nettleseren)Eldste kall i køen droppes og en console.warn logges

Grensen for pre-økt-bufferen har kun betydning på sider der øktoppretting feiler permanent (f.eks. en vedvarende nettverksfeil). Under normale forhold tømmes køen så snart onFHChatbotSessionCreated utløses.

1. Legge til en Chat Hook-trigger (på flow-forfatterens side)

  1. Åpne flowen som er knyttet til chatboten din i FlowHunt-editoren.
  2. Dra en Chat Hook-triggernode inn på lerretet. Editoren håndhever én trigger per flow — flere er ikke tillatt.
  3. (Valgfritt) Slå på Validate Payload Schema og definer et JSON Schema som innkommende payload må samsvare med. Validering kjører inne i steget — et avvik vises som en flow-feilhendelse (endepunktet returnerer fortsatt 200; feilen er synlig via onFHError).
  4. Koble triggerens utganger (hook_name, payload, flow_variables) til hvilke som helst nedstrøms steg du vil skal utløses (Generator, Chat Output, Tool Calls, betingede grener på hook_name osv.).
  5. Publiser flowen.

2. Forgrene på ulike hook-navn inne i flowen

name som vertssiden sender til sendHook() er en etikett som flowen din kan forgrene på, ikke en rutingnøkkel — backend-en samsvarer ikke navn med noder. I stedet utløses flowens enkelte Chat Hook-trigger og eksponerer navnet som {ChatHook.hook_name}, som du refererer til i flow-logikken din for å avgjøre hva som skal skje.

Eksempel på systemprompt:

If {ChatHook.hook_name} is "screen_changed", briefly summarise the page at
{ChatHook.payload.url}. If it is "user_action", acknowledge the action and
update memory. Otherwise, continue the conversation normally.

For mer kompleks ruting kan du koble til et betinget steg på {ChatHook.hook_name} og forgrene til flere nedstrøms-stier.

3. chatbotManager.sendHook(name, payload, options?)

chatbotManager.sendHook(
  name: string,
  payload?: Record<string, unknown>,
  options?: { flowVariables?: Record<string, unknown> }
): Promise<void>;

Argumenter

ArgumentTypePåkrevdBeskrivelse
namestringjaEtikett som videresendes til flowen som {ChatHook.hook_name}. Triggeren utløses uavhengig av verdien; flow-logikken din forgrener på den.
payloadobjectneiJSON-payload som overleveres til triggeren som {ChatHook.payload}. Valideres mot nodens schema hvis aktivert. Standard {}.
options.flowVariablesobjectneiØktvariabler som skal slås sammen før triggeren utløses. Tilgjengelig for nedstrøms steg og fremtidige brukermeldinger.

Atferd

  • Det er trygt å kalle metoden før onFHChatbotSessionCreated; kallet bufres og tømmes når økten finnes. Bufferen har en grense — se Inputgrenser ovenfor.
  • Hvis flowen ikke har en Chat Hook-trigger, er forespørselen en stille 200 no-op — slik at vertssider kan kalle sendHook() optimistisk før flow-forfatteren har koblet inn en trigger. options.flowVariables lagres likevel selv i det tilfellet, så det samme kallet fungerer som en kontekst-bare-oppdatering.
  • Hvis Chat Hook-triggeren har schemavalidering aktivert og payloaden ikke består valideringen, kjører valideringen inne i steget — endepunktet returnerer 200, men flowen sender ut en steg-feilhendelse (observerbar via onFHError).
  • name og options.flowVariables har grenser — se Inputgrenser ovenfor. Brudd returnerer HTTP 422 og ingenting lagres.
  • Vellykkede kall sender ut en onFHChatbotFlowVariablesUpdate-hendelse hvis options.flowVariables ble oppgitt (se Hendelsesreferanse).
  • Kaster aldri. Nettverksfeil og ikke-2xx-svar logges via console.warn.

Eksempel — proaktivt forslag ved SPA-navigasjon

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  window.addEventListener('hashchange', function () {
    chatbotManager.sendHook('screen_changed', {
      url: window.location.href,
      screen_name: getScreenName(),
    }, {
      flowVariables: { current_page_url: window.location.href },
    });
  });
});

Eksempel — kontekst-bare-oppdatering (ingen Chat Hook koblet)

Hvis flowen ikke har en Chat Hook-trigger, er kallet en stille 200 — så det samme API-et kan holde flow_variables synkronisert uten å utløse noe:

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  window.addEventListener('hashchange', function () {
    chatbotManager.sendHook('navigate', {}, {
      flowVariables: {
        current_page_url: window.location.href,
        screen_name: getScreenName(),
      },
    });
  });
});

4. Hvordan flow-forfatteren bruker disse verdiene

  • {ChatHook.hook_name} og {ChatHook.payload.foo} — verdier sendt via sendHook('x', { foo: 1 }) eksponeres på utførelsesstien til Chat Hook-triggeren. Kun tilgjengelig på stien som ble startet av hook-utløsningen.
  • {flow_variables.foo} — verdier sendt via options.flowVariables slås sammen i øktens variabelpose før triggeren utløses. Hver utførelsessti (inkludert vanlige Chat Input–utløste brukermeldinger) kan lese dem.

Hvis du vil at den neste brukermeldingen skal se en ny verdi, legg den i options.flowVariables — payload alene påvirker bare utførelseskjøringen som ble startet av den hooken.

Hendelsesreferanse

FlowHunt JS API sender ut 11 tilpassede hendelser på window-objektet. Alle hendelser bruker CustomEvent API med bubbles: true og composed: true.

onFHChatbotReady

Utløses når chatbot-widgeten er fullt gjengitt og klar til bruk.

  • Hendelsesdata: ingen.
  • Når: etter at widget-DOM-en er montert og chatknappen er synlig.

onFHChatbotSessionCreated

Utløses når en ny chatøkt opprettes på serveren.

  • Hendelsesdata: event.detail.sessionId — ID-en til den nyopprettede økten.
  • Når: etter et vellykket API-kall for øktoppretting.

onFHChatbotWindowOpened

Utløses når brukeren åpner chatvinduet. Utløses ikke i innebygd modus.

onFHChatbotWindowClosed

Utløses når brukeren lukker chatvinduet. Utløses ikke i innebygd modus.

onFHMessageSent

Utløses når brukeren sender en melding.

event.detail.metadata = {
  content: 'Hello, I need help with...',
  createdAt: '2026-02-19T10:30:00.000Z',
};

onFHMessageReceived

Utløses når chatboten mottar og viser et svar.

event.detail.metadata = {
  flow_id: 'abc123',
  message_id: 'msg_456',
  message: 'Sure, I can help you with that!',
  sender: {
    sender_name: 'Support Agent',
    sender_avatar: 'https://example.com/avatar.png',
  },
};

sender er valgfritt og kun til stede når en menneskelig agent er involvert.

onFHFormDataSent

Utløses når brukeren sender inn skjemadata via chatboten.

event.detail.metadata = {
  objectData: { name: 'John', email: 'john@example.com' },
  createdAt: '2026-02-19T10:31:00.000Z',
};

onFHFeedback

Utløses når en bruker gir tommel opp / tommel ned tilbakemelding på en chatbot-melding.

event.detail.metadata = {
  message_id: 'msg_456',
  content: 'Optional feedback text',
  feedback: 'P', // 'P' = positive, 'N' = negative
};

onFHToolCall

Utløses når et verktøy eller en handling utføres under flow-behandling. Utløses kun i flowAssistant- og flowAssistantV3-moduser.

event.detail.metadata = {
  metadata: {
    flow_id: 'abc123',
    message_id: 'msg_789',
    message: 'Calling search API...',
  },
  createdAt: '2026-02-19T10:32:00.000Z',
};

onFHError

Utløses når det oppstår en feil under chatbot-drift.

event.detail.metadata = {
  metadata: {
    flow_id: 'abc123',
    message_id: 'msg_err',
    message: 'Flow execution failed',
  },
  createdAt: '2026-02-19T10:33:00.000Z',
};

onFHChatbotFlowVariablesUpdate

Lagt til i april 2026.

Utløses etter et vellykket chatbotManager.sendHook(...)-kall som inneholdt options.flowVariables. Utløses ikke for sendHook()-kall som utelater flowVariables.

event.detail = {
  variables: {
    current_page_url: 'https://example.com/products',
    screen_name: 'products',
  },
};

Bruk den til å observere sammenslåtte variabler (f.eks. for å synkronisere din egen tilstand på vertssiden, for feilsøking, eller for å re-rendre et UI-element som er avhengig av samme data).

Abonnere på Hendelser

Det finnes to måter å abonnere på chatbot-hendelser.

Metode 1: Window Event Listeners

Bruk window.addEventListener hvor som helst på siden din. Dette fungerer selv før chatboten er lastet:

<script>
document.addEventListener('DOMContentLoaded', function () {
  window.addEventListener('onFHChatbotReady', function () {
    console.log('Chatbot is ready');
  });

  window.addEventListener('onFHChatbotSessionCreated', function (event) {
    console.log('Session created:', event.detail.sessionId);
  });

  window.addEventListener('onFHChatbotWindowOpened', function () {
    console.log('Chat window opened');
  });

  window.addEventListener('onFHChatbotWindowClosed', function () {
    console.log('Chat window closed');
  });

  window.addEventListener('onFHMessageSent', function (event) {
    console.log('User sent:', event.detail.metadata.content);
  });

  window.addEventListener('onFHMessageReceived', function (event) {
    console.log('Bot replied:', event.detail.metadata.message);
  });

  window.addEventListener('onFHFormDataSent', function (event) {
    console.log('Form submitted:', event.detail.metadata.objectData);
  });

  window.addEventListener('onFHFeedback', function (event) {
    var fb = event.detail.metadata;
    console.log('Feedback on message', fb.message_id, ':', fb.feedback);
  });

  window.addEventListener('onFHToolCall', function (event) {
    console.log('Tool called:', event.detail.metadata);
  });

  window.addEventListener('onFHError', function (event) {
    console.error('Chatbot error:', event.detail.metadata);
  });

  window.addEventListener('onFHChatbotFlowVariablesUpdate', function (event) {
    console.log('Variables merged:', event.detail.variables);
  });
});
</script>

For å fjerne en lytter, hold på handler-referansen:

var handleMessage = function (event) {
  console.log(event.detail.metadata);
};
window.addEventListener('onFHMessageReceived', handleMessage);
// Later …
window.removeEventListener('onFHMessageReceived', handleMessage);

Metode 2: Manager Callback-metoder

Inne i init()-callbacken bruker du chatbot managerens innebygde metoder:

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  chatbotManager.onSessionCreated(function () {
    console.log('Session created');
  });

  chatbotManager.onWindowOpened(function () {
    console.log('Window opened');
  });

  chatbotManager.onWindowClosed(function () {
    console.log('Window closed');
  });

  chatbotManager.onMessageSent(function (event) {
    console.log('User sent:', event.metadata);
  });

  chatbotManager.onMessageReceived(function (event) {
    console.log('Bot replied:', event.metadata);
  });

  chatbotManager.onFormDataSent(function (event) {
    console.log('Form data:', event.metadata);
  });

  chatbotManager.onFeedback(function (event) {
    console.log('Feedback:', event.metadata);
  });

  chatbotManager.onToolCall(function (event) {
    console.log('Tool call:', event.metadata);
  });

  chatbotManager.onError(function (event) {
    console.error('Error:', event.metadata);
  });
});

Referanse for Manager-metoder

MetodeParametereBeskrivelse
onSessionCreated(fn)fn: () => voidLytt etter øktoppretting
onWindowOpened(fn)fn: () => voidLytt etter åpning av vinduet
onWindowClosed(fn)fn: () => voidLytt etter lukking av vinduet
onMessageSent(fn)fn: (event) => voidLytt etter brukermeldinger
onMessageReceived(fn)fn: (event) => voidLytt etter bot-svar
onFormDataSent(fn)fn: (event) => voidLytt etter skjemainnsendinger
onFeedback(fn)fn: (event) => voidLytt etter brukertilbakemeldinger
onToolCall(fn)fn: (event) => voidLytt etter verktøyutførelser
onError(fn)fn: (event) => voidLytt etter feil
openChat()—Åpner chatpanelet
closeChat()—Lukker chatpanelet
sendHook(name, payload?, options?) (ny)name: string, payload?: object, options?: { flowVariables?: object }Utløs Chat Hook-triggeren i den kjørende flowen (eller slå sammen options.flowVariables stille hvis ingen trigger er koblet til)

Tilpasset Chat-aktivering: Skjul Knappen og Åpne ved Klikk

For å ha full kontroll over når chatboten vises, skjul den flytende standardknappen og åpne chatten programmatisk — for eksempel fra din egen tilpassede knapp.

<button id="my-chat-button">Chat with us</button>

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function () {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({ showChatButton: false });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
      document.getElementById('my-chat-button')
        .addEventListener('click', function () {
          chatbotManager.openChat();
        });
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Vis en Tilpasset Knapp Kun Når Chatboten er Klar

Du kan kombinere skjult aktivering med event listeners for å skape avanserte interaksjoner:

<button id="open-chat" style="display:none;">Need help?</button>

<script>
  window.addEventListener('onFHChatbotReady', function () {
    document.getElementById('open-chat').style.display = 'block';
  });
</script>

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function () {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({ showChatButton: false });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
      document.getElementById('open-chat')
        .addEventListener('click', function () {
          chatbotManager.openChat();
        });
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Komplett Integrasjonseksempel

Et fullt fungerende eksempel som demonstrerer konfigurasjonsoverstyrelser, hendelsessporing, tilpasset chat-aktivering og den nye sendHook()-metoden sammen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlowHunt Chatbot Integration</title>
  </head>
  <body>
    <h1>My Website</h1>
    <button id="open-chat-btn">Talk to our AI assistant</button>
    <button id="close-chat-btn">Close chat</button>

    <!-- Subscribe to events before the chatbot loads -->
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        window.addEventListener('onFHChatbotReady', function () {
          console.log('Chatbot widget is ready');
        });

        window.addEventListener('onFHChatbotSessionCreated', function (event) {
          console.log('New chat session started:', event.detail.sessionId);
        });

        window.addEventListener('onFHMessageSent', function (event) {
          console.log('User message:', event.detail.metadata.content);
        });

        window.addEventListener('onFHMessageReceived', function (event) {
          console.log('Bot response:', event.detail.metadata.message);
        });

        window.addEventListener('onFHChatbotFlowVariablesUpdate', function (event) {
          console.log('Context updated:', event.detail.variables);
        });

        window.addEventListener('onFHError', function (event) {
          console.error('Chatbot error:', event.detail.metadata);
        });
      });
    </script>

    <!-- FlowHunt integration -->
    <script id="fh-chatbot-script-YOUR_CHATBOT_ID">
      var currentScript = document.currentScript
        || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

      var script = document.createElement('script');
      script.async = true;
      script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
        + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

      script.onload = function () {
        window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
          showChatButton: false,
          headerTitle: 'AI Assistant',
          maxWindowWidth: '600px',
          flowVariables: {
            source: 'website',
            current_page_url: window.location.href,
          },
          urlSuffix: '?utm_source=chatbot',
        });

        window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
          // Open / close from custom buttons
          document.getElementById('open-chat-btn')
            .addEventListener('click', function () {
              chatbotManager.openChat();
            });
          document.getElementById('close-chat-btn')
            .addEventListener('click', function () {
              chatbotManager.closeChat();
            });

          // Keep the flow's context in sync with SPA navigation and
          // optionally fire the Chat Hook trigger (if the flow has one wired).
          // If the flow has no Chat Hook, the call is a silent 200 — the
          // flow_variables still get merged, so the same line covers both
          // "notify the flow" and "just update context".
          window.addEventListener('hashchange', function () {
            chatbotManager.sendHook('screen_changed', {
              url: window.location.href,
            }, {
              flowVariables: { current_page_url: window.location.href },
            });
          });
        });
      };

      if (currentScript && currentScript.parentNode) {
        currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
      } else {
        document.head.appendChild(script);
      }
    </script>
  </body>
</html>

Vanlige spørsmål

Lær mer

Tawk
Tawk

Tawk

Integrer FlowHunt AI-chatbots med Tawk.to for intelligent menneskelig overføring. La AI håndtere rutineforespørsler og overføre brukere sømløst til live-agenter...

4 min lesing
AI Tawk +4