Widget
AI Integratie Prompt
Gebruik onderstaande prompt om een AI-assistent (zoals ChatGPT, Claude, of Cursor) de Denkchat widget voor je te laten integreren op je website.
De prompt
Kopieer deze prompt en pas je AGENT_ID aan:
Integreer de Denkchat chatwidget op mijn website. Hier zijn de stappen:
1. Voeg dit script toe vlak voor de </body> tag:
<script
src="https://denkchat.nl/widget.js"
data-agent-id="JOUW_AGENT_ID"
></script>
2. Optionele configuratie via data-attributen:
- data-position="bottom-right" (of "bottom-left")
- data-theme="light" (of "dark")
- data-welcome-message="Hoi! Hoe kan ik je helpen?"
3. Optionele JavaScript API (beschikbaar na laden):
- DenkChat.open() — Chat openen
- DenkChat.close() — Chat sluiten
- DenkChat.toggle() — Chat togglen
- DenkChat.identify({ name: '...', email: '...' }) — Gebruiker identificeren
Zorg dat het script asynchroon laadt en de pagina-performance niet beïnvloedt.Platform-specifieke prompts
WordPress
Voeg de Denkchat chatwidget toe aan mijn WordPress site.
Maak een child theme of gebruik de functions.php om dit script toe te voegen
aan de footer van elke pagina:
<script src="https://denkchat.nl/widget.js" data-agent-id="JOUW_AGENT_ID"></script>
Gebruik wp_enqueue_script of wp_footer hook. Zorg dat het script alleen op de
front-end laadt (niet in wp-admin).Shopify
Voeg de Denkchat chatwidget toe aan mijn Shopify webshop.
Bewerk het theme.liquid bestand en voeg dit script toe vlak voor </body>:
<script src="https://denkchat.nl/widget.js" data-agent-id="JOUW_AGENT_ID"></script>
Zorg dat het op alle pagina's laadt inclusief de checkout (indien mogelijk).Next.js / React
Voeg de Denkchat chatwidget toe aan mijn Next.js applicatie.
Gebruik next/script met strategy="lazyOnload" in de root layout:
import Script from 'next/script';
<Script
src="https://denkchat.nl/widget.js"
data-agent-id="JOUW_AGENT_ID"
strategy="lazyOnload"
/>
Plaats het in app/layout.tsx zodat het op alle pagina's beschikbaar is.Statische HTML
Voeg de Denkchat chatwidget toe aan mijn statische HTML website.
Voeg dit toe aan elke pagina, vlak voor </body>:
<script defer src="https://denkchat.nl/widget.js" data-agent-id="JOUW_AGENT_ID"></script>
Als je een template of include systeem gebruikt, voeg het toe aan je
footer template zodat het automatisch op elke pagina verschijnt.Tips
- Agent ID vinden: Ga naar je Dashboard → klik op je agent → kopieer het ID uit de URL
- Testen: Na integratie, open je website en controleer of de chatbubble rechtsonder verschijnt
- Troubleshooting: Open de browser console (F12) en zoek naar errors als de widget niet verschijnt