Widget auf der Website, Link zum Agenten und App auf dem Smartphone
Erfahren Sie, wie Sie den Agenten mit einer Zeile Code auf Ihrer Website einbinden, wie der Kurzlink für soziale Medien und Messenger funktioniert und wie Kunden Ihren Agenten als App auf ihr Smartphone installieren.
Der Agent hat zwei Gesichter. Auf der Website ist er ein Fenster in der Ecke, das sich per Button öffnet. In sozialen Netzwerken und Messengern ist er eine Seite über einen Kurzlink, die wie ein kleiner Shop funktioniert und sich als App auf dem Telefon installieren lässt. Katalog, Konditionen, Dialoge und Anfragen sind dabei übergreifend: Der Agent ist derselbe.
Alles, was im Folgenden beschrieben wird, finden Sie im Bereich „Widget und Link“.
Link zum Agenten#
Eine kurze Adresse wie comag.vibevox.pro/c/your-shop. Diese platzieren Sie in der Profilbeschreibung von Instagram, TikTok oder Telegram, senden sie über WhatsApp oder fügen sie der Beschreibung unter einem YouTube-Video hinzu.
Beim Senden an einen Messenger entfaltet sich der Link zu einer Karte: Titelbild, Shop-Name und Beschreibung. Alle drei Felder sind anpassbar:
- Vorschau-Titel — standardmäßig der Shop-Name.
- Vorschau-Beschreibung — ein kurzer Satz darüber, was man fragen kann.
- Titelbild — wird automatisch aus Ihrer Akzentfarbe, Ihrem Logo und Produktfotos erstellt. Sie können ein eigenes Bild hochladen, Größe 1200 mal 630 Pixel.
Am einfachsten prüfen Sie das Aussehen der Vorschau, indem Sie den Link an sich selbst in Telegram senden.
Code für die Website#
Eine einzelne Zeile, die vor dem schließenden </body>-Tag auf allen Seiten eingefügt wird. Sie kopieren diese per Button im Dashboard.
Wo genau Sie den Code auf gängigen Plattformen einfügen:
| Plattform | Wo einfügen |
|---|---|
| Tilda | „Website-Einstellungen“ → „Mehr“ → „HTML-Code für Body“ |
| Shopify | „Theme“ → „Code bearbeiten“ → theme.liquid, vor </body> |
| WordPress | „Design“ → „Theme-Editor“ → footer.php, oder ein Code-Einfüge-Plugin |
| Wix | „Einstellungen“ → „Benutzerdefinierter Code“ → zu Body end hinzufügen |
| Eigene Website | Direkt in die Vorlage vor </body> |
Nach dem Einfügen erscheint ein Button in der unteren rechten Ecke. Die Position lässt sich in den Einstellungen auf links ändern, Farbe und Theme ebenfalls.
Das Widget lädt asynchron und verlangsamt die Seite nicht. Wenn Sie eine strenge CSP konfiguriert haben, erlauben Sie die Domain comag.vibevox.pro in script-src und connect-src.
Design#
Einstellungen, die der Käufer sieht:
- Shop-Name und Assistentenname. Letzterer ist die Signatur des Gesprächspartners im Chat-Header.
- Begrüßung. Der erste Satz. Eine gute Begrüßung verspricht Nutzen, anstatt nur zu grüßen.
- Hinweise zu Beginn des Dialogs. Bis zu vier Buttons mit Fragen. Leer gelassen – werden sie automatisch aus dem Katalog generiert.
- Kommunikationston. Aus der Liste oder eigene Wahl: „warm und prägnant“, „expertenhaft, Sie-Form“.
- Akzentfarbe. Eine Farbe bestimmt den Button, Links und die Hervorhebung von Karten.
- Logo. Es wird auch zum App-Icon auf dem Telefon.
- Mikrofon-Button. Spracherkennung im Browser. Wenn der Browser dies nicht unterstützt, nimmt der Käufer eine Sprachnachricht auf, die dann von Gemini transkribiert wird.
Rechts sehen Sie eine Live-Vorschau: Sie ändert sich, während Sie tippen. Der Button „Speichern“ übernimmt die Änderungen auf die Website.
Helles und dunkles Theme#
Der Chat hat zwei Designs, die in einem einzigen Einstellungsfeld umgeschaltet werden – „Theme“.
| Wert | Was der Käufer sieht |
|---|---|
| Wie beim Besucher | Das Theme passt sich den Einstellungen des Telefons oder Computers an: nachts dunkel, tagsüber hell |
| Hell | Immer ein helles Fenster, unabhängig vom Gerät |
| Dunkel | Immer ein dunkles Fenster |
Standardmäßig ist „Wie beim Besucher“ eingestellt, und in den meisten Fällen ist dies die richtige Wahl: Eine Person mit einem dunklen Theme auf dem Telefon wird keinen weißen Blitz ins Gesicht bekommen, und wer an ein helles gewöhnt ist, sieht das vertraute Fenster.
Ein festes Theme ist erforderlich, wenn die Website selbst in einem bestimmten Stil gestaltet ist. Eine dunkle Landingpage mit einem hellen Chat in der Ecke wirkt wie ein Fremdkörper, und umgekehrt. In diesem Fall stellen Sie dasselbe Theme wie auf der Website ein, und das Widget fügt sich nahtlos ins Design ein.
Die Akzentfarbe funktioniert über beiden Themes: Buttons, Links und die Hervorhebung von Karten übernehmen Ihre Unternehmensfarbe, während Hintergrund und Text sich mit dem Theme ändern. Am einfachsten prüfen Sie beide Varianten in der Vorschau rechts – sie wird sofort neu gezeichnet, während Sie den Wert umschalten.
Produktkarten führen zu Ihrer Website#
Der Agent antwortet nicht mit reinem Text, sondern mit Karten: Foto, Name, Preis, Button. Hinter dem Button steht immer eine Adresse – die Produktseite auf Ihrer Website oder der ursprüngliche Social-Media-Beitrag, falls die Karte von dort stammt.
Innerhalb des Widgets auf der Website erfolgt der Übergang im selben Fenster, um keine Tabs zu vervielfachen. Auf der Agentenseite über den Link öffnet sich die Karte in einem neuen Tab, damit der Dialog nicht verloren geht.
Für Shops auf Shopify und WooCommerce gibt es ein nettes Detail: Der Button öffnet nicht nur das Produkt, sondern legt es über den Standardmechanismus der Plattform direkt in den Warenkorb des Shops. Details finden Sie in den Artikeln über Shopify und WordPress.
Und noch etwas: Das Widget liest die Produktkennzeichnung auf der Seite, auf der es geöffnet ist, und übermittelt sie dem Agenten. Daher wird die Frage „Gibt es das auch in Blau?“ auf einer Produktkarte im Kontext verstanden, ohne dass eine weitere Spezifikation nötig ist.
App auf dem Telefon des Käufers#
Die Agentenseite lässt sich als App installieren. Der Käufer öffnet den Link vom Telefon, sieht das Angebot, die App zum Startbildschirm hinzuzufügen, und erhält ein Icon mit Ihrem Logo.
- Name unter dem Icon — ein Wort bis zu 12 Zeichen. Leer gelassen – wir nehmen das erste Wort des Shop-Namens.
- Icon — das hochgeladene Logo. Wenn kein Logo vorhanden ist, wird das Commerce Agents Logo verwendet.
- Auf dem iPhone erfolgt die Installation über „Teilen“ → „Zum Home-Bildschirm“, dies ist eine Einschränkung von Safari, und der Agent weist selbst auf die Schritte hin.
Nach der Installation können Sie dem Käufer Push-Benachrichtigungen aus dem Bereich „Dialoge“ senden. Die Berechtigung dafür erteilt er selbst, indem er auf die Glocke im Chat-Header klickt.
Anhänge vom Käufer#
Im Chat gibt es eine Büroklammer: Fotos, Videos oder Audio bis zu 20 Megabyte. Wenn der Browser keine Spracherkennung unterstützt, nimmt das Halten des Mikrofons eine Sprachnachricht auf.
Gemini analysiert die Datei: was gezeigt wird, welcher Text auf dem Bild ist, was gesprochen wurde. Der Agent antwortet basierend auf dieser Analyse, und Sie sehen im Dialog sowohl die Datei selbst als auch eine kurze Beschreibung. Das ist hilfreich in Nischen, wo es einfacher ist zu zeigen als zu beschreiben: Ersatzteile, Reparaturen, Auswahl nach Foto.
Kauf-Pixel für Websites mit Warenkorb#
Wenn die Zahlung auf Ihrer Website und nicht im Chat erfolgt, fügen Sie auf der Seite „Vielen Dank für Ihre Bestellung“ einen kurzen Code-Schnipsel aus dem Dashboard ein, indem Sie die Bestellnummer und den Betrag anpassen. Der Kauf wird dem Dialog zugeordnet, und in den Statistiken wird ersichtlich, welche Konversationen zu einem Verkauf führen.
Prüfung#
Drei Minuten, die Sie nach der Einrichtung investieren sollten:
- Öffnen Sie die Website im Inkognito-Modus und klicken Sie auf die Widget-Schaltfläche. Stellen Sie eine Frage zum Produkt.
- Öffnen Sie den Link zum Agenten auf dem Telefon. Prüfen Sie, ob die Installation angeboten wird.
- Senden Sie den Link an sich selbst in einem Messenger und sehen Sie sich die Vorschau an.
- Schauen Sie in die „Dialoge“: Dort sollten beide Unterhaltungen erscheinen.
Häufig gestellte Fragen#
Widget auf der Website und Link – sind das verschiedene Agenten?#
Es ist derselbe. Katalog, Konditionen, Dialoge und Anfragen sind gemeinsam. Nur die Aufmachung unterscheidet sich: Auf der Website erscheint das Fenster in der Ecke, über den Link eine Vollbildseite, die sich auf dem Telefon installieren lässt.
Lässt sich die Linkadresse ändern?#
Die Adresse wird beim Erstellen des Schaufensters aus dem Namen des Shops generiert. Falls Sie eine andere wünschen, schreiben Sie uns in Telegram – wir ändern sie manuell, um bereits verteilte Links nicht zu beschädigen.
Verlangsamt das Widget die Website?#
Nein. Das Skript ist leicht und wird asynchron geladen, nach dem Hauptinhalt der Seite. Das Chatfenster selbst lädt erst, wenn der Kunde auf die Schaltfläche klickt.
Was sieht der Kunde, wenn der Agent ausgeschaltet ist?#
Nichts: Die Schaltfläche erscheint nicht, und die Seite über den Link zeigt an, dass der Agent nicht verfügbar ist. Der Schalter befindet sich im Bereich „Widget und Link“.
Wie entfernt man die Aufschrift „Betrieben von Commerce Agents“?#
Vorerst gar nicht: Die Signatur bleibt auf allen Tarifen. Sie ist anklickbar und führt auf unsere Website – das ist Teil des Preises, wodurch der Service 29 € kostet statt einer deutlich höheren Summe.