Widget Insluiten

Voeg uw AI-chatbot binnen enkele seconden aan elke website toe met onze eenvoudige embed-code.

Snel aan de slag

Voeg deze code toe vóór de afsluitende </body>-tag:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Dat is alles! Uw chatbot staat nu live op uw website.

Uw Chatbot-ID vinden

1. Ga naar de instellingen van uw chatbot
2. Navigeer naar het Embed-tabblad
3. Kopieer de embed-code (bevat uw ID)

Het widget aanpassen

Het uiterlijk en gedrag van het widget worden geconfigureerd in uw dashboard — niet in de embed-code. Ga naar Dashboard → Chatbots → [uw chatbot] → Widget om aan te passen:

• Positie — rechtsonder, linksonder of inline
• Kleuren — primaire, achtergrond- en tekstkleuren, plus border-radius
• Grootte — widgetbreedte en -hoogte

Om de chat automatisch te openen na een configureerbare vertraging, schakelt u Auto-Open in het Behavior-tabblad van dezelfde instellingenpagina in.

Wijzigingen worden automatisch op uw website toegepast — u hoeft de embed-code niet bij te werken. Zie de Widget Customization gids voor alle beschikbare opties.

De widgettaal wordt automatisch gedetecteerd op basis van de browserinstellingen van elke bezoeker, op basis van de talen die u inschakelt in het Languages-tabblad van uw chatbot.

FAQ-widget

Toon veelgestelde vragen als een accordion op elke pagina:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

De FAQ-widget toont gepubliceerde veelgestelde vragen van uw chatbot. Kleuren en styling (primaire, achtergrond- en tekstkleuren, border-radius) worden geconfigureerd in Dashboard → FAQs → Settings.

Opties voor de FAQ-widget

Voorbeeld Category Filter

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Mobiele optimalisatie

Het chatwidget is volledig geoptimaliseerd voor mobiele apparaten:

• Volledige breedte lay-out op kleine schermen
• Slide-up animatie bij openen
• iOS-toetsenbordafhandeling (widget past zich aan het schermtoetsenbord aan)
• Safe-area-ondersteuning voor iPhone-notch en home-indicator
• Grotere touch-targets voor betere bruikbaarheid
• Invoertekstgrootte voorkomt iOS auto-zoom

Platform-specifieke gidsen

WordPress

Aanbevolen: Gebruik de officiële ChatReact WordPress Plugin voor de eenvoudigste integratie met Gutenberg-blokken, Elementor-widgets en shortcodes.

Alternatief: Handmatig insluiten via een "Header/Footer Scripts"-plugin:

1. Installeer een "Header/Footer Scripts"-plugin
2. Voeg de embed-code toe aan de footer-sectie
3. Opslaan en publiceren

Shopify

Aanbevolen: ChatReact Shopify App

Installeer de ChatReact-app vanuit de Shopify App Store voor de eenvoudigste integratie:

1. Installeer de ChatReact-app in uw Shopify-beheer
2. Voer uw Chatbot ID in in de app-instellingen
3. Het chatwidget verschijnt automatisch in uw storefront
4. Beheer widgettoewijzingen per pagina, of schakel het overal in

De app ondersteunt ook Form- en FAQ-widgets als App Blocks in de Theme Editor.

Alternatief: Handmatig insluiten

1. Ga naar Online Store → Themes → Edit Code
2. Open theme.liquid
3. Voeg code toe vóór </body>
4. Opslaan

Webflow

1. Ga naar Project Settings → Custom Code
2. Voeg toe aan Footer Code
3. Publiceer site

Next.js / React

Gebruik de Script-component:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Voeg toe aan uw hoofd App.vue of layout:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

Interageer programmatisch met het widget:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Testen

Voorbeeldweergave

Voordat u live insluit:

1. Gebruik de Preview-functie in uw dashboard
2. Test verschillende scenario's
3. Controleer of antwoorden accuraat zijn

Problemen oplossen

Widget verschijnt niet

1. Controleer de browserconsole op fouten
2. Verifieer of de chatbot-ID correct is
3. Zorg dat de chatbot actief is (niet uitgeschakeld)
4. Controleer of adblockers het widget blokkeren
5. Controleer uw plangebruik — het widget pauzeert wanneer uw maandelijkse limiet van het plan is bereikt

Caching- & optimalisatie-plugins

Sommige caching- of script-optimalisatie-plugins herschrijven script-URL's, waardoor het widget mogelijk niet laadt. Als dat gebeurt, voeg dan een expliciete API-URL toe aan de script-tag:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-api-url="https://www.chatreact.ai"
  async
></script>

Hetzelfde attribuut werkt ook voor de FAQ- en form-widget-scripts.

Stylingconflicten

Als de CSS van uw site conflicteert:

• Het widget scope't zijn stijlen naar zijn eigen container en gebruikt regels met hoge prioriteit om conflicten te weerstaan
• Controleer z-index-waarden van elementen die het widget overlappen
• Vermijd brede !important-regels in uw site-CSS die generieke elementen targeten

Prestatie

Het widget is ontworpen voor minimale impact:

• Laadt asynchroon — blokkeert nooit uw paginarendering
• Lichtgewicht: ongeveer 30 KB gecomprimeerde overdracht

Volgende stappen

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — embed standalone forms with the form widget