Chat-Widget auf anderen Plattformen einbinden
Wo das intoCHAT-Script bei Wix, Webflow, Squarespace, Framer, Bubble, Joomla, Drupal, Ghost, Magento, VTEX und mehr hingehört, mit Ratgebern zu jeder Plattform.
intoCHAT funktioniert auf jeder Plattform, auf der du ein Script in deine Seiten einfügen kannst. Die Regel ist überall gleich: Füge das Script-Tag aus dem Tab Share in ein Feld ein, das Code am Ende des Body ausgibt, und zwar auf allen Seiten.
Die Grundregel
- Such nach einem Feld wie Footer-Code, Body-Ende oder ähnlich. Ein Feld für Header oder Head funktioniert auch, weil das Widget wartet, bis die Seite geladen ist. Empfohlen ist aber das Ende des Body.
- Wende den Code auf alle Seiten an.
- Veröffentliche die Website. Die meisten Baukästen fügen eigenen Code nur auf der Live-Website ein, nicht in der Vorschau des Editors.
- Verändert die Plattform deine Script-Tags und entfernt dabei das Attribut
data-chatbot-id, nutze den Google Tag Manager.
Das Snippet und sein einziges Attribut erklärt Per Script-Tag einbinden.
Baukästen und CMS
| Plattform | Wohin der Code gehört | Ratgeber |
|---|---|---|
| Wix | Einstellungen → Benutzerdefinierter Code, alle Seiten, Position Body – Ende | Wix |
| Webflow | Site settings → Custom code → Footer code, danach veröffentlichen | Webflow |
| Squarespace | Benutzerdefinierter Code → Code einfügen → Fußzeile | Squarespace |
| Framer | Project Settings → Custom Code → Add Script, Ende des Body, Ausführung Once | Framer |
| Bubble | Settings → SEO / metatags → Body-Feld | Bubble |
| Joomla | Ein Custom-Modul an einer Position, die auf jeder Seite erscheint, angelegt mit einem Editor, der Scripts behält | Joomla |
| Drupal | Eine Library in deinem Theme, die das Script im Footer lädt | Drupal |
| Ghost | Settings → Advanced → Code injection → Site footer | Ghost |
| WordPress | Das offizielle Plugin | WordPress-Doku |
Onlineshops
| Plattform | Wohin der Code gehört | Ratgeber |
|---|---|---|
| Shopify | theme.liquid, direkt über </body> | Shopify-Doku |
| WooCommerce | Das offizielle WordPress-Plugin | WooCommerce |
| Magento | Content → Design → Configuration → Footer → Miscellaneous HTML | Magento |
| VTEX | Ein benutzerdefiniertes HTML-Tag im Google Tag Manager oder dein Storefront-Code | VTEX |
Bei all diesen Shops kann Connect your website im Tab Actions dem Agenten zusätzlich eine Live-Produktsuche über die öffentlichen Daten deines Shops geben. Siehe Shop verbinden.
Frameworks
| Plattform | Wohin der Code gehört | Ratgeber |
|---|---|---|
| Next.js | next/script im Root-Layout | Next.js |
| React | index.html oder eine Komponente mit useEffect | React |
Beides behandelt Next.js und React.
Google Tag Manager
Der Google Tag Manager entfernt Data-Attribute wie data-chatbot-id aus Script-Tags in benutzerdefinierten HTML-Tags. Das normale Snippet lädt dann, ohne zu wissen, welchen Agenten es zeigen soll. Nutze stattdessen dieses Snippet in einem benutzerdefinierten HTML-Tag, mit deiner Agenten-ID, und löse es mit einem Trigger vom Typ DOM ist bereit aus:
<script>
(function () {
if (document.getElementById('intochat-embed')) return;
var s = document.createElement('script');
s.id = 'intochat-embed';
s.src = 'https://www.intochat.ai/api/embed.js';
s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
document.body.appendChild(s);
})();
</script>
Die Prüfung am Anfang verhindert, dass das Script erneut geladen wird, wenn das Tag auf derselben Seite zweimal auslöst. Alle Schritte stehen im Google-Tag-Manager-Ratgeber.
Deine Plattform fehlt
- Kannst du HTML oder ein Script am Ende des Body einfügen, funktioniert das Script-Tag.
- Erlaubt sie Code nur im Head, füge das Script-Tag dort ein. Es funktioniert auch im Head.
- Erlaubt sie gar keinen eigenen Code, verlinke von einem Button oder Menüpunkt auf die Chat-Seite deines Agenten.