6. Touchpoints einbetten

Sobald deine BIQs kuratiert und freigegeben sind, bettest du sie als Touchpoint auf deiner Seite ein. Ein Touchpoint ist die sichtbare Einheit, die deine Besucher bedienen: eine FAQ-Liste, ein Chat-Advisor oder eine Infobox. Klariton ersetzt deinen Shop nicht — der Touchpoint legt sich als beratender Layer über deine bestehende Seite, im Branding deines Shops.

Diese Sektion zeigt, wie du einen Touchpoint auf deiner Seite platzierst, ihn ins eigene Branding bringst und ihn an deine eigene Domain anbindest.

Touchpoint-Typen — was du einbetten kannst

Klariton kennt drei kundenseitige Touchpoint-Typen. Heute self-serve einbettbar ist der FAQ-Typ. Du wählst pro Einbettung genau einen Typ:

FAQ (LIVE) — eine aufklappbare Frage-Antwort-Liste aus deinen freigegebenen BIQs. Ideal für Produktseiten, Hilfe-Bereiche und für die Auffindbarkeit durch KI-Crawler.
Chat-Advisor (BALD) — ein dialogischer Berater, der Besucherfragen aus deinem BIQ-Bestand beantwortet und bei Bedarf auf dein Material zurückfällt. Die Fähigkeit ist gebaut, aber noch nicht als Kunden-Touchpoint live ausgespielt (siehe Sektion 7).
Infobox (BALD) — ein kompakter, kontextbezogener Hinweis-Block. Als Touchpoint-Typ noch nicht vorhanden.

Best Practice: Starte heute mit dem FAQ-Typ — er deckt die wiederkehrenden Fragen crawl-bar ab und ist sowohl für Menschen als auch für KI-Crawler die tragende Säule. Chat-Advisor (für individuelle Fragen) und Infobox (für gezielte Akzente an der Conversion-Stelle) ergänzen das Bild, sobald sie als Touchpoint-Typen live sind (BALD) — plane sie als Ausbaustufe, nicht als heutigen Start.

Schritt für Schritt: Touchpoint per Snippet einbinden

Die Einbettung läuft über ein einziges HTML-Snippet, das du in deine Seite kopierst. Du brauchst keine Build-Pipeline und kein Framework — das Snippet funktioniert in jedem Shop- und CMS-System, das eigenes HTML zulässt.

Touchpoint im Studio anlegen und freigeben. Lege den Touchpoint vom gewünschten Typ an, binde die Personas und die BIQs ein und veröffentliche ihn. Erst veröffentlichte Touchpoints werden ausgeliefert.
Embed-Snippet kopieren. Klariton stellt dir pro Touchpoint ein fertiges <klariton-widget>-Snippet bereit. Es enthält bereits deine Organisations- und Touchpoint-Kennung, du musst nichts von Hand zusammensetzen.
Snippet in die Seite einfügen. Platziere es an der Stelle, an der der Touchpoint erscheinen soll (z.B. unter der Produktbeschreibung), bzw. im Seiten-Template für globale Touchpoints wie einen Chat-Advisor.
Embed-Variante wählen. Lege fest, wie der Touchpoint dargestellt wird (siehe unten).
Veröffentlichen und prüfen. Lade die Seite neu und kontrolliere, dass der Touchpoint im Branding deines Shops erscheint und Antworten liefert.

Das Snippet besteht aus dem <klariton-widget>-Element mit deiner Organisations- und Touchpoint-Kennung plus dem Klariton-Loader-Script. Im Grundsatz sieht es so aus:

<klariton-widget
  tenant-id="dein-org-slug"
  touchpoint-id="dein-touchpoint-slug"
  locale="de-DE">
</klariton-widget>

<script src="https://worker.klariton.com/loader.js" async defer></script>

Den exakten, vorbefüllten Snippet-Code findest du immer im Studio am jeweiligen Touchpoint. Kopiere ihn von dort, statt ihn manuell nachzubauen — so bleiben Kennungen, Auslieferungs-Adresse und Attribut-Form garantiert korrekt.

Shopify-Integration im Detail (Schritt für Schritt)

Am Beispiel Shopify (Online Store 2.0). Das Prinzip gilt für jedes System: Loader einmal global, Element dort, wo der Touchpoint erscheinen soll.

1. Loader einmal global einbinden

Online Store → Themes → ⋯ → Edit code → Layout/theme.liquid. Im <head>, nahe </head>:

<script src="https://worker.klariton.com/loader.js" async defer></script>

Das lädt das Widget-Bundle und registriert das <klariton-widget>-Element. Einmal pro Seite reicht (mehrfach ist unschädlich); async defer blockt dein Theme-Rendering nicht.

2. Element platzieren

Empfohlen (OS 2.0): Storefront → Customize → Seite → Section hinzufügen → Custom Liquid an der gewünschten Position, dann:

<klariton-widget
  tenant-id="dein-org-slug"
  touchpoint-id="dein-touchpoint-slug"
  locale="de-DE">
</klariton-widget>

tenant-id (Pflicht): dein Org-Slug · touchpoint-id (Pflicht): Slug oder ID des Touchpoints · locale (optional, Default de-DE).
Drei Attribute, kein mode — das Element erkennt den Touchpoint-Typ automatisch. Für einen FAQ-Touchpoint rendert es das Q&A-Akkordeon.

⚠️ Anti-Pattern: Niemals den Shopify-Rich-Text-Editor verwenden — er strippt unbekannte Tags wie <klariton-widget> aus dem HTML. Immer Custom-Liquid-Section oder den Source-Editor (< >).

3. Deine Domain freischalten (Pflicht)

Die Domain deines Shops (https://deinshop.de) muss im Studio in der Touchpoint-Whitelist stehen — sonst lehnt Klariton die Auslieferung mit 403 ab. Trag sie vor dem ersten Test ein; Änderungen greifen nach ~60 Sekunden.

4. Prüfen

Seite neu laden → der Touchpoint erscheint im Branding deines Shops. In den DevTools (Network) siehst du Loader + Bundle (Status 200) und den Touchpoint-Abruf (200). Häufige Fälle:

403 → Domain nicht in der Whitelist (im Studio nachpflegen).
404 → touchpoint-id falsch geschrieben oder Touchpoint nicht veröffentlicht.
leer / kein Render → Loader fehlt oder der Rich-Text-Editor hat das Element gestrippt.

Best Practice: Bearbeite nie dein Live-Theme direkt — Theme-Updates überschreiben theme.liquid. Dupliziere das Theme, baue dort ein und veröffentliche dann. Das <klariton-widget> bringt eigene Styles per Shadow-DOM mit (kein Theme-Bleed): style nur den äußeren klariton-widget-Tag (z. B. max-width, margin), nicht die Inhalte.

Embed-Varianten — wie der Touchpoint erscheint

Du bestimmst, wie sich der Touchpoint in deine Seite einfügt:

inline (LIVE) — der Touchpoint wird direkt im Seitenfluss an der Stelle des Snippets gerendert. Geeignet für FAQ-Listen und Infoboxen innerhalb des Inhalts.
floating (LIVE) — ein schwebendes Element (z.B. eine Chat-Schaltfläche unten rechts), das über dem Seiteninhalt liegt. Typisch für den Chat-Advisor.
slide-up (LIVE) — ein Panel, das bei Bedarf vom unteren Rand einfährt. Spart Platz und drängt sich nicht auf.
split (BALD) — eine geteilte Darstellung. Geplant, noch nicht ausgeliefert.

Best Practice: Setze inline für Inhalte, die mitgelesen und von Crawlern indexiert werden sollen (FAQ), und floating oder slide-up für den Chat-Advisor, der jederzeit erreichbar bleiben, aber den Lesefluss nicht stören soll.

White-Label: Touchpoint im eigenen Branding

Klariton liefert jeden Touchpoint im Look deines Shops aus, ohne dass du eine Design-Datei pflegen musst.

Erbt deine Defaults (LIVE) — der Touchpoint übernimmt automatisch die Schriften und Standard-Stilwerte deiner Seite, sodass er sich nahtlos einfügt.
Voll einfärbbar (LIVE) — du hinterlegst deine Markenfarbe und dein Logo, und der Touchpoint nimmt diese Werte an.
„Powered by Klariton”-Badge abschaltbar (LIVE, ab Growth) — standardmäßig trägt der Touchpoint einen dezenten Hinweis auf Klariton. Ab dem Growth-Plan kannst du dieses Badge ausblenden und den Touchpoint vollständig unter deiner eigenen Marke ausspielen.

Das vollständige White-Label-Branding (eigene Farben/Logo-Overrides plus abschaltbares Badge) ist ein Feature ab dem Growth-Plan. In den darunterliegenden Plänen erscheint der Touchpoint im Klariton-Standard-Branding inklusive Badge.

Best Practice: Hinterlege Markenfarbe und Logo einmal sauber, bevor du den ersten Touchpoint live schaltest. So erscheint jeder weitere Touchpoint sofort konsistent, und du musst die Einbettung später nicht nachjustieren.

Eigene Domain anbinden

Standardmäßig wird dein Touchpoint über die Klariton-Infrastruktur ausgeliefert. Wenn du möchtest, kannst du eine eigene Domain anbinden (z.B. advisor.deinemarke.de), sodass die Auslieferung unter deiner Marke läuft.

Custom-Domain-Provisioning (LIVE) — du hinterlegst deine Wunsch-Domain, Klariton richtet das nötige Hosting samt SSL ein und meldet den Status zurück (in Vorbereitung / aktiv / Fehler).
DNS-Verifikation — die Domain wird über einen DNS-Eintrag verifiziert. Der vollständig self-service Onboarding-Flow für die DNS-Verifikation wird derzeit teilweise begleitet eingerichtet; das Provisioning selbst ist live.

Best Practice: Plane für die Domain-Anbindung etwas Vorlauf ein — DNS-Änderungen brauchen, je nach Anbieter, Zeit bis zur Wirksamkeit. Schalte den Touchpoint zuerst über die Standard-Auslieferung live und stelle erst danach auf die eigene Domain um.

API-First: eigenes Frontend gegen Klariton

Wenn du die Darstellung vollständig selbst kontrollieren willst, musst du das mitgelieferte Widget nicht verwenden. Klariton ist API-first: Du kannst dein eigenes Frontend gegen die Klariton-Public-API bauen („bring your own frontend”).

Eigenes Widget gegen die Public-API (LIVE) — du rufst die Touchpoint- und BIQ-Daten über die öffentliche Klariton-API ab und renderst sie in deinem eigenen Code. Damit bestimmst du Layout, Verhalten und Integration komplett selbst.
React-/Next-SDK (BALD) — ein offizielles SDK, das die Anbindung für React- und Next.js-Projekte vereinfacht, ist angekündigt („coming soon”). Bis dahin nutzt du die Public-API direkt.

Best Practice: Starte mit dem <klariton-widget>-Snippet — es deckt die meisten Fälle ohne Eigenentwicklung ab, inklusive White-Label und Embed-Varianten. Greife erst dann zur Public-API, wenn du eine Darstellung brauchst, die das Standard-Widget nicht abbildet. So sparst du dir Pflegeaufwand und profitierst weiter von Updates am Widget.