Ga naar inhoud

Widget & Embed Code

Pad: /dashboard/embed · Rechten: Settings module

Widget & Embed Widget & Embed

De widget is de primaire manier waarop gebruikers communiceren met je AI-assistent op je website. Deze pagina legt uit hoe je deze implementeert, wat elk embed-attribuut doet en hoe de widget onder de motorkap werkt.

Je embed-code ophalen

De eenvoudigste manier om je embed-code te verkrijgen:

  1. Ga naar Dashboard → Embed in de zijbalk.
  2. De pagina genereert automatisch het juiste script voor je huidige bot en domein.
  3. Klik op Copy om het volledige embed-fragment te kopiëren.
  4. Plak het in de HTML van je website, vlak voor de </body> tag.

Embed script referentie

<script 
  src="https://user.frenzy.bot/chatbot-widget/v1/js/loader.js"
  data-bot-id="sales-assistant"
  data-bot-name="Sales Assistant"
  data-theme-color="#3b82f6"
  data-backend-url="https://user.frenzy.bot"
  async>
</script>

Attributen

Attribuut Vereist Wat het doet
data-bot-id Ja De unieke slug-ID van je bot.
data-bot-name Nee Het label dat bovenaan het chatvenster wordt getoond.
data-theme-color Nee Primaire widgetkleur (hex-code).
data-backend-url Nee De server-URL. Standaard ingesteld op https://user.frenzy.bot (of je eigen domein).

Hoe vind je jouw bot-ID

  • Open het dashboard en ga naar Embed of Settings.
  • De bot-ID wordt getoond in de embed-code en op de botbeheerpagina.
  • Formaat: kleine letters en cijfers met streepjes (bijv. sales-assistant, support-bot).

Dynamische embed-pagina

De Dashboard → Embed pagina detecteert automatisch je huidige hostnaam en genereert het juiste embed-fragment. Dit is veiliger dan het hardcoden van URL's omdat:

  • Als je later van domein verandert, de gegenereerde embed-code automatisch het nieuwe domein weerspiegelt.
  • Elke bot zijn eigen embed-fragment krijgt met de juiste data-bot-id.
  • Kopiëren met één klik de implementatie snel maakt.

Widget functionaliteiten

De FRENZY.BOT widget is gebouwd voor productiegebruik met deze mogelijkheden:

Functionaliteit Wat het doet
Shadow DOM isolatie Voorkomt dat de CSS van je website het ontwerp van de widget verstoort
Sessiebehoud Chatgeschiedenis blijft bewaard na het vernieuwen van de pagina via localStorage
Lazy loading Voorkomt prestatieproblemen bij lange conversaties
Context window Laatste 6 berichten worden naar de AI gestuurd voor de beste antwoordkwaliteit
Meertalig Ondersteunt meerdere talen met automatische detectie
RTL ondersteuning Volledige right-to-left lay-out voor Hebreeuws en Arabisch
Suggestievragen Vooraf geschreven prompts die onder het welkomstbericht worden getoond
Lead-formulier Contactgegevens vastleggen in de chat met configureerbare velden
Text-to-speech Optionele audio-afspeelmogelijkheid voor AI-antwoorden

De widget testen

Voordat je de widget toevoegt aan je productiesite:

  1. Bevestig dat de server draait.
  2. Open de ingebouwde testpagina: https://user.frenzy.bot/chatbot-widget/test.html
  3. Verstuur een paar testberichten.
  4. Vernieuw de pagina — de chatgeschiedenis moet blijven staan.
  5. Controleer of de bot antwoordt op basis van de inhoud van je kennisbank.

WordPress integratie

Voor WordPress websites zijn er twee opties beschikbaar:

Optie 1: Plak het script

Voeg het embed-script toe aan de footer.php van je thema of gebruik een plugin die aangepaste scripts in de voettekst toestaat.

Optie 2: WordPress plugin

  • Upload de FRENZY.BOT WordPress plugin ZIP en activeer deze.
  • Gebruik de [FRENZY.BOT_whitelabel] shortcode voor een schermvullende embedded supportportaal-pagina.

Veelgemaakte fouten

Probleem Oorzaak Oplossing
Widget verschijnt maar geeft geen antwoord Verkeerde data-bot-id Controleer de bot-ID in Dashboard → Embed
Widget verschijnt niet Server onbereikbaar Controleer of poort 8321 open staat en de server draait
Werkt op localhost, mislukt in productie Ontbrekende data-backend-url Stel deze in op de URL van je productiedomein
CSS-conflicten met je site Shadow DOM niet in gebruik Dit zou niet mogen gebeuren — controleer op geforceerde globale stijlen
Oude widgetversie zichtbaar Browsercache Versie-gebaseerde cache busting regelt dit automatisch

Per-bot embed

In een multi-bot setup heeft elke bot zijn eigen embed-fragment. Het data-bot-id attribuut bepaalt welke bot de conversatie afhandelt. De widget van elke bot gebruikt zijn eigen:

  • System prompt en AI-model
  • Branding, kleuren en avatar
  • Welkomstbericht en suggestievragen
  • Lead-formulier configuratie
  • Taalinstellingen

Wissel van bot in het dashboard om de juiste embed-code voor elke bot te genereren.

FAQ

V: De widget laadt maar geeft geen antwoord.

  • Controleer of data-bot-id correct is.
  • Bevestig dat OpenRouter is verbonden (LLM indicator moet groen zijn).
  • Controleer of de kennisbank inhoud bevat.

V: Widget werkt op localhost maar niet in productie.

  • Bevestig dat poort 8321 open staat op je server.
  • Stel data-backend-url in op je productiedomein (met https://).
  • Bij gebruik van een aangepast domein, controleer of SSL correct is geconfigureerd.

V: Kan ik de widget op meerdere domeinen gebruiken?

  • Ja. De widget werkt op elk domein zolang data-backend-url naar jouw server verwijst. Gebruik de dynamische embed-pagina of een aangepast domein voor consistentie.

V: Hoe update ik de widget na wijzigingen?

  • Widget-updates worden automatisch toegepast via versie-gebaseerde cache busting. Wanneer de server wordt bijgewerkt, wordt de widgetversie verhoogd en halen browsers de nieuwe versie op.