Darstellungsarten und eigene Auslöser

Für: Entwickler und Produktverantwortliche·Voraussetzung: Ein Widget; die Rolle Admin in StrikeUp, um seine Darstellung zu ändern·Screenshots zeigen Beispieldaten

Ein Chat, der über einer Kassenseite schwebt, stört; ein Chat hinter einer Schaltfläche in der Ecke wird auf einem vollen Dashboard nie gefunden. Die Darstellungsart des Widgets legt fest, wie der Assistent auf Ihren Seiten sitzt, Ihre eigenen Schaltflächen können ihn mit einer vorbereiteten Frage öffnen, und URL-Regeln halten ihn auf den Pfaden, auf denen er hilft.

Was es bewirkt

Produkte unterscheiden sich darin, wo Hilfe hingehört. Eine Marketing-Website möchte eine kleine Startschaltfläche in der Ecke; ein Analysewerkzeug möchte den Assistenten offen neben den Daten; eine Hilfeseite möchte den Chat in ihrem Layout; und viele Produkte haben bereits eine eigene „KI fragen“-Schaltfläche im eigenen Design, die den Assistenten öffnen soll.

Das Widget bietet sieben Darstellungsarten. Fünf davon wählen Sie unter Konfigurieren › User Interface, und jede kann Ihr Code für eine Seite festlegen. Damit:

• Erscheint das Widget in der Form, die zu Ihrem Produkt passt: als Popup, Seitenleiste, immer offenes Panel, zentriertes Modal, Bereich hinter Ihrer eigenen Schaltfläche oder Abschnitt Ihrer Seite. Darstellungsarten verstehen.
• Öffnen und schließen Ihre eigenen Schaltflächen den Assistenten, wahlweise mit einer vorbereiteten Nachricht, die angezeigt oder sofort gesendet wird. Das Widget aus Ihrer eigenen Schaltfläche öffnen.
• Erscheint das Widget nur auf den Pfaden, die Sie wählen, und wird neu geprüft, während sich Besucher durch eine Single-Page-App bewegen. URL-Regeln, wo das Widget erscheint.

Alles hier wird am Widget gespeichert. Sie können es jederzeit unter Konfigurieren › User Interface prüfen, und das Feld Test-URL dort liefert für einen Pfad dasselbe Ergebnis wie das Widget auf Ihrer Website.

Bevor Sie beginnen

Voraussetzung	Details
Ein Widget	Angelegt unter Konfigurieren › Embed mit mindestens einem Toolkit
Das Widget ist in Ihr Produkt eingebaut	Skript und Init-Aufruf aus Das Widget in Ihr Produkt einbauen
Rolle	Die Rolle Admin, um die Darstellung eines Widgets zu ändern; alle anderen angemeldeten Personen in Ihrem Workspace können sie ansehen
Tarif oder Kosten	Keine. Darstellungsarten, Auslöser und URL-Regeln haben keine Tarifgrenze und keine Kosten

Gut zu wissen

Um die Darstellungsart zu wechseln, müssen Sie Ihren Code nicht ändern: Das Widget liest seine Einstellungen bei jedem Seitenaufruf. Ihr Code ändert sich nur für die Arten Inline und Modal und für eigene Auslöser-Schaltflächen.

Darstellungsarten verstehen

Die Darstellungsart legt drei Dinge fest: was Besucher sehen, bevor sich der Chat öffnet, wo er sich öffnet und ob sie ihn schließen können.

Darstellungsart	Gewählt wo	Bevor er sich öffnet	Wo sich der Chat öffnet	Besucher schließen ihn mit
Popup (Standard)	User Interface	Eine runde Startschaltfläche mit Sprechblase, unten rechts	Ein Fenster in dieser Ecke, standardmäßig 400 × 600 Pixel	Kein Schließen-Element: Das Fenster verdeckt die Startschaltfläche
Seitenleiste	User Interface	Ein Reiter mit Pfeil am rechten Rand, auf halber Höhe	Ein Bereich in voller Höhe rechts, höchstens 500 Pixel und 85 % des Fensters breit	Demselben Reiter, jetzt am Rand des Bereichs
Panel	User Interface	Nichts: Es ist immer offen	Ein Bereich in voller Höhe rechts, der Ihre Seite zur Seite schiebt; Besucher ziehen seinen Rand, um die Breite zu ändern	Gar nicht
Eigener Auslöser — Seitenleiste	User Interface	Nichts: Ihre eigene Schaltfläche öffnet ihn	Ein Bereich in voller Höhe rechts, in Seitenleistenbreite	Einem Einklapp-Reiter am Rand des Bereichs oder Ihrem Code
Eigener Auslöser — Panel	User Interface	Nichts: Ihre eigene Schaltfläche öffnet ihn	Wie die Seitenleiste mit eigenem Auslöser, dazu ein Ziehgriff; die Breite wird gemerkt	Einem Einklapp-Reiter am Rand des Bereichs oder Ihrem Code
Modal	Nur im Code: displayType: "modal"	Eine runde Startschaltfläche unten rechts	Ein zentriertes Fenster über einer abgedunkelten Seite	Einem Klick auf den abgedunkelten Hintergrund
Inline	Nur im Code: displayType: "inline" mit container	Nichts: Es füllt Ihr Element	In Ihrem Element, im normalen Seitenfluss	Gar nicht

Wie StrikeUp entscheidet

• Ihr Code gewinnt gegen die gespeicherte Einstellung. Ein displayType im Aufruf von initStrikeUpChatWidget überschreibt die gespeicherte Darstellungsart des Widgets für jeden Wert, nur auf dieser Seite.
• Popup und Modal laden den Chat beim ersten Klick. Alle anderen Arten laden den Chat-Frame zusammen mit Ihrer Seite und sind daher sofort bereit, wenn sie sich öffnen. Übergibt Ihre Seite ein Anmelde-Ticket, laden auch Popup und Modal sofort, damit das Ticket vor seinem Ablauf eingelöst wird.
• URL-Regeln kommen zuerst. Bei jedem Seitenaufruf und bei jeder Pfadänderung prüft das Widget seine URL-Regeln, bevor es etwas zeichnet. Auf einem ausgeblendeten Pfad wird gar nichts gezeichnet.
• Ein Widget pro Seite. Eine Seite trägt ein Widget; ein zweiter Aufruf von initStrikeUpChatWidget mit einer anderen Person ersetzt das erste.

Was nicht angezeigt wird

• Pfade, die die URL-Regeln des Widgets ausschließen, und jeder Pfad außerhalb der Einschlussregeln, sobald es Einschlussregeln gibt.
• Ein Inline-Widget, dessen container beim Aufruf kein Element trifft. Die Konsole warnt, und nichts wird gezeichnet.
• Jedes Widget, dessen Anwendungs-Token falsch ist oder dessen Einstellungen nicht geladen werden können. Nichts wird gezeichnet, und die Konsole bleibt still.

In vier Schritten einrichten

1. Die Darstellungseinstellungen des Widgets öffnen. Gehen Sie zu Konfigurieren › User Interface und wählen Sie oben die Karte des Widgets.

2. Die Darstellungsart wählen. Wählen Sie im englisch beschrifteten Abschnitt Data display eine der fünf Darstellungsarten. Für Seitenleiste und die Arten mit eigenem Auslöser wählen Sie außerdem Display behaviour: Overlay oder Push. Legen Sie die Breite und beim Popup die Höhe fest.

   

   Wählen Sie den Anzeigetyp unter User Interface; bei Seitenleisten legt Display behaviour fest, ob der Bereich Ihre Seite überdeckt oder verschiebt.

   Was dieser Screenshot zeigt

   Ansicht

   User Interface (/admin/configure/user-interface?widgetId=…)

   Hervorgehoben

   radio “Seitenleiste”, data-display-section-left, selected (not saved yet). sets the widget to a sidebar opened from a tab on the right edge

   Außerdem sichtbar

   Display type options Popup, Sidebar, Panel, Custom Trigger — Sidebar, Custom Trigger — Panel; Display behaviour Overlay (selected) and Push; Width 400px, Button color, Button background

   Zweck

   where the display type is chosen

3. Das Widget auf die richtigen Pfade begrenzen (optional). Fügen Sie unter URL-Sichtbarkeitsregeln Ein- oder Ausschlussmuster hinzu und prüfen Sie einige Pfade in Test-URL. Wählen Sie dann unten auf der Seite Save User Interface Settings. Besucher sehen die Änderung beim nächsten Seitenaufruf.

4. Ihre eigene Auslöser-Schaltfläche hinzufügen (nur Arten mit eigenem Auslöser). Öffnen Sie Konfigurieren › Embed, kopieren Sie ein Snippet aus Custom Trigger Button Snippets und fügen Sie es dort ein, wo Ihre Schaltfläche hingehört.

Empfohlene Einführung

Beginnen Sie mit dem Popup auf wenigen Pfaden über eine Einschlussregel, etwa /billing und /billing/*. Sobald der Assistent dort gut antwortet, erweitern Sie die Einschlussregeln oder wechseln zu einer Bereichsart. Eigene Auslöser-Schaltflächen fügen Sie zuletzt hinzu, wenn Sie wissen, welche Fragen Besucher auf welcher Seite stellen.

Jede Einstellung erklärt

Die Darstellungseinstellungen liegen unter Konfigurieren › User Interface, die Auslöser-Snippets unter Konfigurieren › Embed, und zwei Optionen gibt es nur in Ihrem Code.

Darstellungsart, wie das Widget erscheint

Wo

Konfigurieren › User Interface, die Karte des Widgets, dann die Auswahl der Darstellungsart in Data display. Gespeichert mit Save User Interface Settings.

Was

Eine von Popup (Standard), Seitenleiste, Panel, Eigener Auslöser — Seitenleiste oder Eigener Auslöser — Panel. Das Verhalten jeder Art steht in der Tabelle unter Darstellungsarten verstehen. Modal und Inline werden hier nicht angeboten; Sie setzen sie mit displayType in Ihrem Code.

Warum

Wo Hilfe hingehört, hängt von der Seite ab. Eine Startschaltfläche bleibt aus dem Weg; ein Bereich hält den Assistenten neben der Arbeit; Ihre eigene Schaltfläche passt zu Ihrem Design.

Display behaviour, Seite überdecken oder verschieben

Wo

Data display unter Konfigurieren › User Interface, nur sichtbar für Seitenleiste und die beiden Arten mit eigenem Auslöser. Gespeichert mit Save User Interface Settings.

Was

Overlay, der Standard, schiebt den Bereich über Ihre Seite. Push fügt rechts am <body> Ihrer Seite ein Padding in Breite des Bereichs hinzu, sodass Ihr Inhalt nach links rückt und sichtbar bleibt. Das Panel verschiebt immer.

Warum

Push hält Tabellen und Formulare lesbar, während der Assistent sie erklärt. Overlay passt zu Seiten, deren Layout bricht, wenn es schmaler wird.

Breite und Höhe, die Größe des Chats

Wo

Data display unter Konfigurieren › User Interface, die Felder Width und Höhe. Gespeichert mit Save User Interface Settings.

Was

Die Breite ist standardmäßig 400 Pixel. Das Popup nutzt Breite und Höhe, begrenzt auf die Fenstergröße minus 40 Pixel in der Breite und 100 Pixel in der Höhe, damit es auf kleine Bildschirme passt. Die Seitenleiste nutzt die Breite, aber nie mehr als 500 Pixel oder 85 % des Fensters. Das Modal nutzt in jeder Richtung höchstens 90 % des Fensters. Beim Panel und beim Panel mit eigenem Auslöser ist die Breite nur die Anfangsbreite: Besucher ziehen den Rand zwischen 240 und 900 Pixeln (nie mehr als 85 % des Fensters), und das Widget merkt sich ihre Breite für dieses Widget in ihrem Browser. Die Art Inline ignoriert beides: Sie füllt Ihr Element.

Warum

Ein breiter Bereich zeigt Tabellen und Diagramme ohne Scrollen; ein schmaler lässt Platz für Ihre Seite. Die Obergrenzen halten den Chat auf Telefonen nutzbar.

URL-Regeln, wo das Widget erscheint

Wo

Konfigurieren › User Interface, Abschnitt URL-Sichtbarkeitsregeln: Einschlussmuster (Nur anzeigen auf) und Ausschlussmuster (Verstecken auf), jeweils mit Muster hinzufügen, und das Feld Test-URL. Gespeichert mit Save User Interface Settings.

Was

Ohne Muster erscheint das Widget auf jeder Seite. Gibt es Einschlussmuster, erscheint es nur auf Pfaden, die eines davon treffen; danach blendet jedes passende Ausschlussmuster es aus, ein Ausschlussmuster gewinnt also immer. Ein Muster muss mit / oder * beginnen und darf keine Leerzeichen enthalten. Das Widget vergleicht nur den Pfad der Seite, nie Domain, Query-String oder den Teil nach #, und ignoriert Groß- und Kleinschreibung sowie ein führendes oder abschließendes /. Ein Muster muss den ganzen Pfad treffen. Jedes * trifft genau ein Pfadsegment, und es gibt keinen anderen Platzhalter: ** ist kein Platzhalter und trifft nie einen echten Pfad. In einer Single-Page-App werden die Regeln bei jedem Routenwechsel innerhalb einer halben Sekunde neu geprüft.

Muster	Pfad	Sichtbar?	Warum
/products/*	/products/123	Ja	* trifft das eine Segment 123
/products/*	/products	Nein	* braucht ein Segment; ergänzen Sie /products als eigenes Muster
/products/*	/products/123/edit	Nein	* trifft ein Segment, nicht zwei
/dashboard	/dashboard/settings	Nein	Der ganze Pfad muss passen
/dashboard	/Dashboard/	Ja	Groß- und Kleinschreibung und das abschließende / zählen nicht
*/login	/eu/login	Ja	Ein Segment vor /login
*/login	/eu/de/login	Nein	Zwei Segmente vor /login
/docs/**	/docs/setup	Nein	** ist kein Platzhalter
/billing	/billing?tab=invoices	Ja	Der Query-String gehört nicht zum Pfad

URL-Regeln legen fest, auf welchen Pfaden das Widget erscheint; ein Ausschlussmuster gewinnt immer, Test-URL zeigt das Ergebnis.

Was dieser Screenshot zeigt

Ansicht

User Interface (/admin/configure/user-interface?widgetId=…)

Hervorgehoben

status “Widget wird VERSTECKT sein”, url-visibility-test-box, shown for /billing/checkout. none (verdict of the test)

Außerdem sichtbar

Include patterns /billing, /billing/*, /invoices/*; Exclude pattern /billing/checkout; Test URL /billing/checkout

Zweck

limiting the widget to certain pages

Empfohlen	Vermeiden
Für jede Tiefe ein Muster anlegen: /help und /help/*	Erwarten, dass /help/* auch /help oder /help/a/b trifft
Sensible Abläufe ausdrücklich ausschließen, etwa /checkout und /checkout/*	** für „alles darunter“ verwenden
Echte Pfade Ihrer App in Test-URL testen	Einen Reiter über den Query-String ansteuern, etwa ?tab=billing

Warum

Ein Assistent auf einem Zahlungsschritt kann ablenken oder verwirren; einer auf einer Einstellungsseite ist dort, wo Menschen hängen bleiben. URL-Regeln platzieren ihn, ohne dass Sie Ihren Code ändern.

Die Musterhilfe auf dem Bildschirm verspricht mehr, als der Abgleich tut

Die Hinweise neben den Musterfeldern nennen ** und Muster wie */login für „jede URL, die auf /login endet“. Das Widget trifft genau ein Segment pro * und behandelt ** wörtlich. Prüfen Sie jedes Muster in Test-URL, das dieselben Regeln wie das Widget verwendet.

Custom Trigger Button Snippets, fertige Schaltflächen

Wo

Konfigurieren › Embed, der englisch überschriebene Teil Custom Trigger Button Snippets unter dem Einbettungscode. Er erscheint nur, wenn das Widget Eigener Auslöser — Seitenleiste oder Eigener Auslöser — Panel verwendet. Jedes Snippet hat eine Schaltfläche Copy; hier wird nichts am Widget gespeichert.

Was

Vier Snippets: das Widget öffnen; es mit einer Nachricht öffnen, wobei das Textfeld mit „What would you like to know about this page?“ vorbelegt ist und der Schalter Automatisch senden autoSend: true ergänzt; es mit einer Nachricht und verstecktem Kontext zum Öffnen öffnen; und Prüfen, ob das Widget geöffnet ist, ein Umschalter auf Basis von isOpen().

<button onclick="window.StrikeUpChat?.open()">Open AI Assistant</button>
<button onclick="window.StrikeUpChat?.open({ message: 'What would you like to know about this page?', autoSend: true })">Ask AI</button>

Warum

Die Snippets liefern funktionierenden Code für jede Art von Schaltfläche; Sie passen nur Gestaltung und Text an.

Embed erzeugt die Auslöser-Schaltflächen für Sie; Automatisch senden macht die Nachricht zur ersten Frage des Besuchers.

Was dieser Screenshot zeigt

Ansicht

Embed (/admin/configure/embed?widgetId=…)

Hervorgehoben

switch “Automatisch senden”, custom-trigger-snippets, off. adds autoSend: true to the open({ message }) snippet (not saved)

Außerdem sichtbar

Open widget snippet with Copy; Placeholder message field What would you like to know about this page?; Snippet with open({ message: … }); Start of the developer-message (openContext) snippet

Zweck

copying your own trigger buttons

displayType und container, Optionen nur im Code

Wo

In Ihrem Aufruf von initStrikeUpChatWidget. Die Inline-Variante erzeugt Konfigurieren › Embed, wenn Sie In einen Container einbetten einschalten.

Was

displayType nimmt "popup", "modal", "sidebar", "panel", "custom-trigger", "custom-trigger-panel" oder "inline" an und überschreibt auf dieser Seite die gespeicherte Darstellungsart. container (ein CSS-Selektor oder ein Element) ist für "inline" Pflicht; das Element braucht eine feste Höhe. portalDisplayType: "inline" öffnet das Kundenportal im selben Container statt in einem großen Fenster.

window.initStrikeUpChatWidget({ applicationToken: "<your widget's application token>", userId: "cus_48210", displayType: "modal" });

Warum

Ein Widget kann mehrere Seiten bedienen, die verschiedene Formen brauchen: ein Popup in der ganzen App, Inline auf der Hilfeseite, ein Modal auf einer Seite ohne Platz für einen Bereich.

Wie die Einstellungen zusammenwirken

Darstellungsart	Display behaviour	URL-Regeln treffen den Pfad	Ergebnis
Popup	nicht angezeigt	ja	Startschaltfläche unten rechts; das Fenster öffnet sich über der Seite
Seitenleiste	Overlay	ja	Reiter am rechten Rand; der Bereich überdeckt die rechte Seite
Seitenleiste	Push	ja	Reiter am rechten Rand; die Seite rückt nach links, solange der Bereich offen ist
Panel	verschiebt immer	ja	Immer offener Bereich; die Seite ist ständig schmaler
Eigener Auslöser, beide Arten	Overlay oder Push	ja	Keine Startschaltfläche; Ihre Schaltfläche öffnet den Bereich
Beliebig	beliebig	nein	Nichts wird gezeichnet; isOpen() liefert false
Inline (Code)	ignoriert	ja	Der Chat füllt Ihr Element

Welche Art soll ich wählen?

Wählen Sie das Popup für Hilfe, die überall verfügbar ist, Seitenleiste oder Panel, wenn Besucher neben Ihren Daten mit dem Assistenten arbeiten, einen eigenen Auslöser, wenn Ihr Design bereits eine „KI fragen“-Schaltfläche hat, und Inline für eine eigene Hilfe- oder Supportseite.

Darstellungsarten auf Ihrer Seite

Was Besucher sehen	Darstellungsart	Bedeutung
Eine runde blaue Startschaltfläche unten rechts	Popup oder Modal	Ein Klick öffnet den Chat
Ein Reiter mit Pfeil am rechten Rand	Seitenleiste	Ein Klick schiebt den Bereich herein oder hinaus
Ein Bereich rechts, der sich nie schließt	Panel	Immer offen; sein linker Rand ändert die Breite
Kein Widget, bis Ihre Schaltfläche benutzt wird	Eigener Auslöser	Ihre Seite öffnet den Bereich
Ein Chat im Layout der Seite	Inline	Teil Ihrer Seite

Popup

Die Startschaltfläche sitzt 1rem von der unteren rechten Fensterecke entfernt. Sie hat keine Textbeschriftung. Ein Klick blendet sie aus und öffnet das Fenster in derselben Ecke, mit abgerundeten Ecken und Schatten. Das Fenster verdeckt die Startschaltfläche und hat kein eigenes Schließen-Element; der Chat bleibt offen, bis die Person die Seite verlässt oder neu lädt.

Warum: Das Popup braucht fast keinen Platz, bis jemand Hilfe sucht.

Popup öffnet ein Chatfenster über die Startschaltfläche in der Ecke; das passt für Hilfe auf jeder Seite.

Was dieser Screenshot zeigt

Ansicht

(host page (https://app.example.com/))

Hervorgehoben

iframe “”, bottom-right, open. the chat window; it covers the launcher while open

Außerdem sichtbar

Popup window 400 px wide in the bottom-right corner; Welcome text, four shortcut cards, message box

Zweck

what the popup display type looks like

Seitenleiste

Der Reiter wartet auf halber Höhe am rechten Rand. Ein Klick schiebt einen Bereich in voller Höhe herein; der Reiter wandert an den linken Rand des Bereichs und schließt ihn wieder. Der Chat behält sein Gespräch, während der Bereich geschlossen ist.

Warum: Ein Bereich in voller Höhe zeigt lange Antworten und Tabellen ohne Scrollen und verschwindet wieder aus dem Weg.

Die Seitenleiste öffnet einen Bereich in voller Höhe über einen Reiter am rechten Rand; derselbe Reiter schließt sie.

Was dieser Screenshot zeigt

Ansicht

(host page (https://app.example.com/))

Hervorgehoben

button “”, right-edge-middle, sidebar open, chevron points right. closes the sidebar

Außerdem sichtbar

Full-height pane on the right, overlaying the page; Welcome text, shortcut cards, message box

Zweck

what the sidebar display type looks like

Panel

Das Panel ist ab dem Laden der Seite offen und schiebt Ihren Inhalt zur Seite. Der Streifen an seinem linken Rand ist ein Ziehgriff; die Breite, die eine Person wählt, bleibt für dieses Widget in ihrem Browser erhalten. Es lässt sich nicht schließen, und StrikeUpChat.close() wirkt nicht darauf.

Warum: für Werkzeuge, in denen Menschen ständig mit dem Assistenten arbeiten, etwa Analysen oder Admin-Konsolen.

Das Panel ist immer neben Ihrem Inhalt geöffnet und schiebt die Seite zur Seite; Besucher ziehen am Rand, um die Breite zu ändern.

Was dieser Screenshot zeigt

Ansicht

(host page (https://app.example.com/))

Hervorgehoben

separator “”, panel-left-edge, panel open (always). drag to resize; the width is remembered in that browser

Außerdem sichtbar

Host content narrowed to make room; Full-height pane on the right with welcome text, cards and message box; No launcher

Zweck

what the panel display type looks like

Modal

Das Modal öffnet sich wie das Popup aus einer Startschaltfläche, aber in der Bildschirmmitte über einem dunklen Hintergrund. Ein Klick auf den Hintergrund schließt es. Sie wählen es nur im Code, mit displayType: "modal".

Warum: Es lenkt die Aufmerksamkeit auf den Chat, auf Seiten ohne Platz für einen Bereich.

Modal zentriert den Chat über einer abgedunkelten Seite; Sie wählen es nur im Code, mit displayType "modal".

Was dieser Screenshot zeigt

Ansicht

(host page (https://app.example.com/))

Hervorgehoben

iframe “”, centre, open (modal display type). the chat window; the backdrop around it closes it

Außerdem sichtbar

Centred chat window with welcome text, cards and message box; Dimmed backdrop over the host page

Zweck

what the modal display type looks like

Inline

Das Inline-Widget füllt das Element, das Sie als container übergeben, im normalen Seitenfluss, ohne Startschaltfläche und ohne Schatten. Es ist immer offen. Der Chat blendet seine Fenster-Steuerelemente aus; das Zahnrad für das Kundenportal erscheint nur, wenn Sie zusätzlich portalDisplayType: "inline" übergeben.

Warum: Eine Hilfe- oder Supportseite kann den Assistenten zu ihrem Hauptinhalt machen.

Inline setzt den Chat in ein Element Ihrer Seite; das Element braucht eine Höhe.

Was dieser Screenshot zeigt

Ansicht

(host page (https://app.example.com/))

Hervorgehoben

region “”, main-content, widget mounted, 560 px high. none (the host's container)

Außerdem sichtbar

Widget inside a page section, no launcher; Title bar, message box and shortcut cards

Zweck

what the inline display type looks like

Eigener Auslöser

Mit einer Art mit eigenem Auslöser ist das Widget geladen, aber verborgen: Auf der Seite gibt es keine Startschaltfläche. Ihre eigene Schaltfläche öffnet den Bereich. Ein Einklapp-Reiter gleitet mit dem Bereich herein und schließt ihn wieder.

Warum: Der Assistent öffnet sich aus Bedienelementen, die bereits zu Ihrem Design gehören, genau dort, wo die Frage entsteht.

Bei Eigener Auslöser zeigt das Widget keine Startschaltfläche; Ihre eigene Schaltfläche öffnet es mit StrikeUpChat.open().

Was dieser Screenshot zeigt

Ansicht

(host page (https://app.example.com/))

Hervorgehoben

button “”, host-header-right, enabled. calls window.StrikeUpChat.open({ message })

Außerdem sichtbar

No StrikeUp launcher; Host page with its own Ask the assistant button in the header

Zweck

the entry point of a custom trigger

Das Widget aus Ihrer eigenen Schaltfläche öffnen

Wo

Der Code Ihrer Seite, über window.StrikeUpChat. Fertige Snippets stehen unter Konfigurieren › Embed in Custom Trigger Button Snippets.

Was

StrikeUpChat.open() öffnet den Bereich, StrikeUpChat.close() klappt ihn ein. Verwenden Sie beide mit den zwei Arten mit eigenem Auslöser: Sie sind für diese Bereiche gebaut, und bei Popup, Modal und Seitenleiste tun sie entweder nichts oder lassen die Startschaltfläche verborgen. open() tut nichts, bis das Widget bereit ist; schalten Sie Ihre Schaltfläche daher in StrikeUpChat.onReady frei. isOpen() sagt Ihnen, ob der Bereich offen ist; es gibt kein Ereignis, wenn die Person ihn mit dem Einklapp-Reiter schließt. Lesen Sie den Wert also, wenn Ihre Schaltfläche benutzt wird, oder fragen Sie ihn alle 200 Millisekunden ab.

open() akzeptiert drei Optionen:

Aufruf	Ergebnis
open({ message })	Die Nachricht erscheint als Eröffnungszeile des Assistenten auf dem Willkommensbildschirm. Nichts wird gesendet; die Person tippt ihre eigene Antwort
open({ message, autoSend: true })	Ein neues Gespräch beginnt, und die Nachricht wird als erste eigene Frage der Person gesendet. Es wartet, bis die Person angemeldet ist und Toolkits autorisiert hat. autoSend akzeptiert true, 1, "1" und "true"; jeder andere Wert gilt als falsch
autoSend ohne message	Es passiert nichts weiter
open({ message, openContext })	Versteckter Kontext nur für die erste Antwort des Assistenten; siehe Nutzer identifizieren und Kontext übergeben

window.StrikeUpChat.onReady(function (type) {
  if (type === null) return;                 // Token falsch oder API nicht erreichbar
  askButton.disabled = false;
});
askButton.onclick = function () {
  window.StrikeUpChat.isOpen() ? window.StrikeUpChat.close() : window.StrikeUpChat.open();
};

Warum

Eine Frage, die am richtigen Ort gestellt wird, braucht kein Tippen: „Diese Rechnung erklären“ auf einer Rechnungsseite, „Warum ist das fehlgeschlagen?“ neben einem Fehler.

Drei Einsatzbeispiele:

• Eine Schaltfläche „Dieses Diagramm erklären“ → open({ message: "Erkläre das Umsatzdiagramm der letzten 12 Wochen", autoSend: true }).
• Ein Hilfesymbol in einem Formular → open({ message: "Welcher Umsatzsteuersatz gilt für diesen Kunden?" }), damit die Person eigene Details ergänzt.
• Eine Schaltfläche „Assistent fragen“ in der Kopfzeile → der Umschalter aus dem Beispiel oben.

open({ message }) zeigt Ihren Text als Eröffnung des Assistenten; mit autoSend wird er als Frage des Nutzers gesendet.

Was dieser Screenshot zeigt

Ansicht

(host page (https://app.example.com/))

Hervorgehoben

text “”, pane-conversation-top, placeholder bubble shown, not sent. none; the visitor types their reply

Außerdem sichtbar

Pane on the right with the title Demo Ltd Support chat; Placeholder message from open({ message }); Collapse tab on the pane's left edge

Zweck

the result of a custom trigger with a prepared message

Eine automatisch gesendete Frage beginnt einen neuen Chat

autoSend: true beginnt immer ein neues Gespräch, und die Frage geht ohne den Seitenkontext, den Sie mit StrikeUpChat.context.set() bereitgestellt haben. Rufen Sie context.set() nach dem Öffnen erneut auf, wenn die Folgefragen ihn brauchen.

Was Sie wissen sollten

Thema	Fakt
Position der Startschaltfläche	In der unteren rechten Ecke, 1rem von der Ecke
Symbol der Startschaltfläche	Eine Sprechblase. Die Admin-App hat keine Einstellung, um es zu ändern, und die Startschaltfläche hat keine Textbeschriftung
Laden	Popup und Modal laden den Chat beim ersten Klick (oder sofort mit einem Anmelde-Ticket); alle anderen Arten laden ihn mit der Seite
Gemerkte Breite	Nur Panel und Panel mit eigenem Auslöser, je Widget, im Browser jeder Person; bei jedem Öffnen auf 85 % des Fensters begrenzt
Schließen behält den Chat	Das Schließen einer Seitenleiste oder eines Bereichs mit eigenem Auslöser blendet ihn nur aus; das Gespräch ist beim erneuten Öffnen noch da
Durch URL-Regeln ausgeblendet	Seitenleiste, Popup und Widgets mit eigenem Auslöser schließen sich und verschwinden; ein Panel wird entfernt und beim Rückkehren auf einen erlaubten Pfad neu geladen, mit frischer Verbindung
Portalfenster	Das Zahnrad öffnet das Kundenportal in einem großen zentrierten Fenster, bis zu 1400 × 900 Pixel, über einer abgedunkelten Seite; Inline-Widgets mit portalDisplayType: "inline" zeigen es im Container
Telefone	Das Popup schrumpft auf den Bildschirm abzüglich Rändern; die Seitenleiste nimmt höchstens 85 % der Breite ein

Häufige Fragen

Allgemein

Welche Darstellungsart soll ich für mein Produkt wählen?

Wählen Sie das Popup für Hilfe, die auf jeder Seite verfügbar sein soll, Seitenleiste oder Panel, wenn Menschen neben Ihren Daten mit dem Assistenten arbeiten, eine Art mit eigenem Auslöser, wenn Ihr Design bereits eine „KI fragen“-Schaltfläche hat, und Inline für eine eigene Hilfeseite. Die ersten fünf stellen Sie unter Konfigurieren › User Interface ein.

Warum kann ich die Darstellungsart Modal in der Admin-App nicht wählen?

Die Darstellungsart Modal wird unter Konfigurieren › User Interface nicht angeboten. Setzen Sie sie im Code Ihrer Seite, indem Sie dem Aufruf von initStrikeUpChatWidget displayType: "modal" hinzufügen; das Widget öffnet sich dann in der Bildschirmmitte über einem abgedunkelten Hintergrund.

Kann ich auf einer Seite meiner App eine andere Darstellungsart verwenden?

Ja. Übergeben Sie displayType im Aufruf von initStrikeUpChatWidget auf dieser Seite, zum Beispiel "inline" auf Ihrer Hilfeseite. Das überschreibt die gespeicherte Darstellungsart des Widgets für jeden Wert, aber nur auf der Seite, auf der Ihr Code ihn übergibt.

Muss ich meinen Code ändern, wenn ich die Darstellungsart wechsle?

Nein, außer Sie wechseln zu Inline, Modal oder einer Art mit eigenem Auslöser. Das Widget liest seine gespeicherten Einstellungen bei jedem Seitenaufruf, daher erreicht eine neue Einstellung für Popup, Seitenleiste oder Panel die Besucher beim nächsten Seitenaufruf ohne neue Auslieferung.

Einrichtung

Wo wähle ich die Darstellungsart?

Öffnen Sie Konfigurieren › User Interface, wählen Sie die Karte des Widgets, wählen Sie die Darstellungsart in Data display und dann unten auf der Seite Save User Interface Settings. Besucher sehen die neue Darstellungsart beim nächsten Laden einer Seite.

Was macht Push im Vergleich zu Overlay?

Push fügt rechts am Body Ihrer Seite ein Padding in Breite des Bereichs hinzu, sodass Ihr Inhalt nach links rückt und sichtbar bleibt, solange der Bereich offen ist. Overlay, der Standard, schiebt den Bereich über Ihren Inhalt. Die Wahl erscheint für die Seitenleiste und die beiden Arten mit eigenem Auslöser; das Panel verschiebt immer.

Wie groß ist das Popup auf einem Telefon?

Das Popup nutzt Breite und Höhe des Widgets, standardmäßig 400 mal 600 Pixel, aber nie mehr als das Fenster minus 40 Pixel in der Breite und 100 Pixel in der Höhe. Auf einem Telefon füllt es daher den größten Teil des Bildschirms und lässt einen Rand frei.

Können Besucher die Breite des Bereichs ändern?

Besucher können den linken Rand des Panels und des Panels mit eigenem Auslöser zwischen 240 und 900 Pixeln ziehen, nie breiter als 85 % des Fensters. Das Widget merkt sich diese Breite für das Widget im Browser der Person. Seitenleiste und Seitenleiste mit eigenem Auslöser haben eine feste Breite.

Eigene Auslöser

Meine open()-Schaltfläche tut nichts. Warum?

StrikeUpChat.open() funktioniert mit den beiden Arten mit eigenem Auslöser und erst, wenn das Widget bereit ist. Prüfen Sie, ob das Widget Eigener Auslöser — Seitenleiste oder Eigener Auslöser — Panel verwendet, und schalten Sie Ihre Schaltfläche in StrikeUpChat.onReady frei. Bei einem noch nie geöffneten Popup oder Modal tut open() nichts.

Kann ich das Widget mit einer bereits gestellten Frage öffnen?

Ja. Rufen Sie StrikeUpChat.open({ message: "Ihre Frage", autoSend: true }) auf. Das Widget beginnt ein neues Gespräch und sendet die Nachricht als erste eigene Frage der Person, sodass der Assistent sofort antwortet. Es wartet, bis die Person angemeldet ist und alle nötigen Toolkits autorisiert hat.

Was passiert bei open({ message }) ohne autoSend?

Die Nachricht erscheint als Eröffnungszeile des Assistenten auf dem Willkommensbildschirm, und nichts wird an den Assistenten gesendet. Die Person liest sie und tippt ihre eigene Antwort. Nutzen Sie das, um eine Richtung vorzuschlagen, etwa „What would you like to know about this page?“.

Setzt eine automatisch gesendete Frage das aktuelle Gespräch fort?

Nein. open({ message, autoSend: true }) beginnt immer ein neues Gespräch. Das vorherige Gespräch bleibt im Verlauf der Person. Seitenkontext, den Sie mit StrikeUpChat.context.set() bereitgestellt haben, hängt nicht an der automatisch gesendeten Frage; stellen Sie ihn danach erneut bereit, wenn spätere Fragen ihn brauchen.

Woher weiß ich, ob der Bereich offen ist?

Rufen Sie StrikeUpChat.isOpen() auf. Es liefert true, solange der Bereich sichtbar ist, und false vor dem Start des Widgets, nach destroy() und auf Pfaden, die URL-Regeln ausblenden. Es gibt kein Ereignis, wenn die Person den Bereich mit dem Einklapp-Reiter schließt; lesen Sie den Wert also bei Benutzung Ihrer Schaltfläche oder fragen Sie ihn alle 200 Millisekunden ab.

Warum ignoriert das Panel close()?

Die Darstellungsart Panel ist bewusst immer offen, daher wirkt StrikeUpChat.close() nicht darauf, und isOpen() bleibt true, solange es auf der Seite ist. Verwenden Sie stattdessen das Panel mit eigenem Auslöser, wenn Sie einen Bereich brauchen, den Ihr Code öffnen und schließen kann.

Gibt es eine Schließen-Schaltfläche im Chat?

Nein. Besucher schließen eine Seitenleiste oder einen Bereich mit eigenem Auslöser mit dem Reiter am Rand, ein Modal über seinen Hintergrund, und Ihr Code kann für Bereiche mit eigenem Auslöser StrikeUpChat.close() aufrufen. Das Popup hat kein Schließen-Element, und Panel und Inline sind immer offen.

URL-Regeln

Wie zeige ich das Widget nur auf meinen Hilfeseiten?

Öffnen Sie Konfigurieren › User Interface, fügen Sie die zwei Einschlussmuster /help und /help/* hinzu und speichern Sie. Jedes * trifft genau ein Pfadsegment; ergänzen Sie daher /help/*/*, wenn Ihre Hilfeseiten zwei Ebenen tief liegen. Prüfen Sie echte Pfade vor dem Speichern im Feld Test-URL.

Wie blende ich das Widget an der Kasse aus?

Fügen Sie unter Konfigurieren › User Interface die Ausschlussmuster /checkout und /checkout/* hinzu und speichern Sie. Ein Ausschlussmuster gewinnt immer gegen Einschlussmuster, daher bleibt das Widget auf diesen Pfaden verborgen, auch wenn eine andere Regel es zeigen würde.

Spielt der Query-String für URL-Regeln eine Rolle?

Nein. Das Widget vergleicht nur den Pfad der Seite, nie die Domain, den Query-String oder den Teil nach #. Eine Regel kann ?tab=billing nicht ansteuern; geben Sie dieser Ansicht einen eigenen Pfad, wenn sich das Widget dort anders verhalten soll.

Meine Regeln greifen nach der Navigation in meiner Single-Page-App nicht. Was prüfe ich?

Das Widget prüft seine URL-Regeln bei Vor- und Zurück-Navigation, bei Seitenänderungen und jede halbe Sekunde neu; ein neuer Pfad greift also innerhalb einer halben Sekunde. Erscheint das Widget trotzdem, prüfen Sie das Muster im Feld Test-URL: Ein * trifft nur ein Segment, und ** trifft nie.

Wo es angezeigt wird

Kann ich das Symbol der Startschaltfläche ändern?

Nicht über die Admin-App. Die Startschaltfläche von Popup und Modal ist eine runde Schaltfläche mit Sprechblasen-Symbol in den Schaltflächenfarben des Widgets, die Sie unter Konfigurieren › User Interface festlegen. Die Startschaltfläche hat keine Textbeschriftung.

Geht beim Schließen des Bereichs das Gespräch verloren?

Nein. Das Schließen einer Seitenleiste oder eines Bereichs mit eigenem Auslöser blendet ihn nur aus; das Gespräch ist beim erneuten Öffnen da. Ein Panel, das URL-Regeln ausblenden, wird entfernt und beim Rückkehren auf einen erlaubten Pfad neu geladen, und der Chat verbindet sich dann neu.

Kann sich das Kundenportal in meinem Inline-Widget öffnen?

Ja. Fügen Sie portalDisplayType: "inline" neben displayType: "inline" und container in den Aufruf von initStrikeUpChatWidget ein. Das Portal ersetzt dann den Chat in Ihrem Container, statt sich in einem großen Fenster über der Seite zu öffnen.

Fehlerbehebung

Symptom	Was Sie prüfen
Meine eigene Schaltfläche tut nichts	Der Reihe nach: Verwendet das Widget eine Art mit eigenem Auslöser? Wird die Schaltfläche erst nach StrikeUpChat.onReady freigeschaltet? Ist window.StrikeUpChat definiert, wurde das Widget-Skript also vor dem Code Ihrer Schaltfläche geladen?
Das Popup lässt sich nicht schließen	Das Popup-Fenster hat kein Schließen-Element und verdeckt die Startschaltfläche. Verwenden Sie die Seitenleiste oder eine Art mit eigenem Auslöser, wenn Besucher den Chat schließen sollen
Das Widget fehlt auf manchen Pfaden	Die URL-Regeln unter Konfigurieren › User Interface: Jedes * trifft genau ein Segment, ** trifft nie, und ein Ausschlussmuster gewinnt. Testen Sie den genauen Pfad in Test-URL
Das Inline-Widget ist leer oder hat keine Höhe	Der Container braucht eine feste Höhe. Prüfen Sie die Konsole auf [StrikeUpChat] displayType "inline" requires a valid container (CSS selector or Element). Widget not mounted.: Der Selektor traf beim Aufruf kein Element
Meine Seite springt seitlich, wenn sich der Bereich öffnet	Display behaviour steht auf Push, oder die Art ist das Panel, das immer verschiebt. Wählen Sie Overlay für Seitenleiste oder Arten mit eigenem Auslöser
Die Panelbreite ist für eine Person falsch	Die Person hat sie gezogen; die Breite bleibt in ihrem Browser für dieses Widget erhalten. Sie kann sie zurückziehen; bei jedem Öffnen ist sie auf 85 % des Fensters begrenzt
Eine automatisch gesendete Frage nutzte den Seitenkontext nicht	Ein Öffnen mit autoSend beginnt einen neuen Chat ohne den bereitgestellten Seitenkontext. Rufen Sie StrikeUpChat.context.set() nach open() erneut auf
isOpen() bleibt true, nachdem die Person das Popup geschlossen hat	close() und isOpen() sind für Bereiche mit eigenem Auslöser gebaut. Verwenden Sie eine Art mit eigenem Auslöser, wenn Ihr Code den Zustand verfolgen muss
Die Art Modal fehlt in der Liste der Darstellungsarten	Sie wird nur im Code mit displayType: "modal" gesetzt
Die Konsole zeigt [Widget] Failed to parse includeUrls	Die gespeicherten Regeln sind ungültig; öffnen Sie URL-Sichtbarkeitsregeln, entfernen Sie die Muster, legen Sie sie neu an und speichern Sie
Eine Änderung schlägt mit Anfrage fehlgeschlagen und “This action requires the Admin role.” fehl	Diese Einstellungen in StrikeUp zu ändern erfordert die Rolle Admin. Bitten Sie eine Person mit der Rolle Admin, die Änderung vorzunehmen oder Ihnen die Rolle unter Einstellungen › Benutzer zu geben.

Immer noch nicht gelöst?

Senden Sie dem Support den Namen des Widgets, den Seitenpfad, die Darstellungsart, die Ihr Code gegebenenfalls übergibt, und alle Konsolenzeilen, die mit [StrikeUpChat] oder [Widget] beginnen. Der Support kann die gespeicherten Darstellungseinstellungen und URL-Regeln des Widgets mit dem vergleichen, was Ihre Seite zeigt.

Verwandte Seiten

• Das Widget in Ihr Produkt einbauen
• Referenz der Widget-JavaScript-API
• Nutzer identifizieren und Kontext übergeben
• User Interface
• Embed