Eingebetteter Chat

Zeigen Sie das Chat-Widget inline auf Ihrer Seite an, anstatt als schwebende Blase

Alle Tarife

Übersicht

Standardmäßig erscheint das Asyntai-Chat-Widget als schwebende Blase in der Ecke Ihrer Website. Mit dem eingebetteten Chat können Sie den Chat auch direkt auf Ihrer Seite anzeigen — zum Beispiel in einem "Chatten Sie mit uns"-Bereich auf Ihrer Startseite.

Die schwebende Blase funktioniert weiterhin neben dem eingebetteten Chat. Besucher, die nicht zum eingebetteten Bereich scrollen, können weiterhin die Blase nutzen. Beide teilen dasselbe Gespräch.

So funktioniert es

Ein Script-Tag hinzufügen Platzieren Sie es dort, wo der Chat in Ihrem HTML erscheinen soll

Chat wird inline gerendert Das Widget erscheint an dieser Position, immer sichtbar, gleiche Größe wie der reguläre Chat

Blase bleibt aktiv Die schwebende Blase bleibt in der Ecke für Besucher, die den eingebetteten Chat nicht sehen

Geteiltes Gespräch Nachrichten werden in Echtzeit zwischen dem eingebetteten Chat und dem schwebenden Widget synchronisiert

Einrichtung

Fügen Sie diese einzelne HTML-Zeile dort ein, wo der Chat auf Ihrer Seite erscheinen soll:

<script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Ersetzen Sie YOUR_WIDGET_ID durch Ihre Widget-ID. Sie finden Ihren Einbettungscode mit Ihrer vorausgefüllten ID auf der Einrichtungsseite für eingebetteten Chat.

Hinweis: Das Haupt-Script chat-widget.js muss ebenfalls auf der Seite sein. Wenn Sie das Asyntai-Widget bereits auf Ihrer Website installiert haben, ist dies bereits erledigt.

Beispiel

So könnten Sie es auf einer Startseite verwenden:

<section style="max-width: 500px; margin: 0 auto;">
    <h2>Chat with us</h2>
    <p>Ask us anything — our AI assistant is here to help.</p>

    <!-- The chat will appear right here -->
    <script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</section>

Details

Größenanpassung

Der eingebettete Chat wird in derselben Größe wie das schwebende Widget gerendert: 400px breit und 650px hoch auf dem Desktop, volle Breite und 550px hoch auf Mobilgeräten. Sie können die Positionierung durch Styling des übergeordneten Containers steuern.

Verhalten der schwebenden Blase

Wenn der eingebettete Chat auf dem Bildschirm sichtbar ist und ein Besucher auf die schwebende Blase klickt, scrollt es zum eingebetteten Chat. Wenn der eingebettete Chat nicht sichtbar ist, öffnet die Blase das reguläre schwebende Chat-Overlay.

Nachrichtensynchronisierung

Sowohl der eingebettete als auch der schwebende Chat teilen dasselbe Gespräch. Nachrichten, die von einem der beiden gesendet werden, erscheinen in beiden. Dieselbe Sitzung, derselbe KI-Kontext und derselbe Chatverlauf werden verwendet.

Mehrere Seiten

Sie können den eingebetteten Chat auf einigen Seiten und das reguläre schwebende Widget auf anderen verwenden. Fügen Sie einfach das Einbettungs-Script auf den Seiten ein, auf denen Sie den Inline-Chat möchten. Das Gespräch wird wie gewohnt zwischen den Seiten übertragen.

Live-Vorschau

Hier ist ein Live-eingebetteter Chat, damit Sie sehen können, wie er aussieht:

Voraussetzungen

Das Haupt-Asyntai-Chat-Widget (chat-widget.js) muss auf der Seite installiert sein

Funktioniert mit allen Tarifen — kein Upgrade erforderlich

Kompatibel mit allen Browsern, die Shadow DOM unterstützen (alle modernen Browser)

Tipp: Testen Sie den eingebetteten Chat, indem Sie ihn zuerst auf einer Staging-Seite platzieren. Stellen Sie sicher, dass er in Ihrem Seitenlayout korrekt aussieht, bevor Sie ihn in die Produktion überführen.

Dokumentation