Widget Embedding

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

Quick Start

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)

Of vind de ID in de URL van uw dashboard: /dashboard/company/chatbots/[CHATBOT_ID]

Widgetopties

Pas de widget aan met data-attributen:

Basisopties

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

Kleuroverschrijvingen

Overschrijf dashboardinstellingen met inlinekleuren:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ Widget

Toon FAQs 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"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

De FAQ-widget toont gepubliceerde FAQ's van uw chatbot.

FAQ Widget Opties

Categoriefilter Voorbeeld

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

Mobieleoptimalisatie

De chatwidget is volledig geoptimaliseerd voor mobiele apparaten:

• Volledige breedte-indeling 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 aanraakdoelen voor betere bruikbaarheid
• Invoerlettergrootte voorkomt iOS auto-zoom

Platformspecifieke gidsen

WordPress

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

Alternatief: Handmatig inbedden 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-admin
2. Voer uw chatbot-ID in de app-instellingen in
3. De chatwidget verschijnt automatisch in uw winkel
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 inbedden

1. Ga naar Online Store → Themes → Edit Code
2. Open theme.liquid
3. Voeg de 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 dit 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

Interacteer met de widget programmatisch:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Testen

Voorbeeldmodus

Voordat u het live embedt:

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

Lokale ontwikkeling

Voor lokaal testen, gebruik localhost-URL's:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Problemen oplossen

Widget verschijnt niet

1. Controleer de browserconsole op fouten
2. Controleer of de chatbot-ID correct is
3. Zorg dat de chatbot actief is (niet uitgeschakeld)
4. Controleer of adblockers storen

Stijlconflicten

Als de CSS van uw site conflicteert:

• Widget maakt gebruik van shadow DOM voor isolatie
• Controleer z-index waarden
• Zorg dat er geen !important overrides zijn

Prestaties

De widget is ontworpen voor minimale impact:

• Lazy loaded
• < 50KB totale grootte
• Non-blocking
• Cached aggressively

Volgende stappen

• WordPress Plugin →
• Shopify Integratie →
• FAQ Beheer →