Widget-Kanal — Übersicht

Der Widget-Kanal nimmt Support- und Angebotsanfragen von der Website entgegen. Besucher öffnen einen Chat auf der Seite; die Nachrichten kommen in Quoting24 als Tickets an und die Operatoren antworten aus der gewohnten Oberfläche, mit derselben Logik wie bei den anderen Kanälen.

Die Oberfläche läuft in einem iframe. Die einbindende Website braucht ein Skript und, wenn die Daten schon bekannt sind, einen Aufruf von init(). Angular, ein Supabase-Client oder direkter Zugriff auf die Quoting24-Datenbank sind nicht nötig.

Welche Integration nötig ist

Unternehmen zuordnen und den Verlauf wiederherstellen sind getrennte Vorgänge. external_id, company_name, name, phone und email geben keinen Zugriff auf die Unterhaltungen einer anderen Person. Ein auf der Website bereits angemeldeter Benutzer bleibt ein Widget-Gast, bis die Website einen gültigen Wiederherstellungsnachweis übergibt.

Fall	Was zu implementieren ist	Kontinuität	Abschnitt
Öffentliche Website, unbekannter Besucher	Nur das Skript. Der Besucher füllt das Kontaktformular aus.	Gastsitzung im selben Browser	Widget B2C
Website kennt Profil und Unternehmen schon	Skript und `init()` mit Profil und Unternehmensdaten	Vorausgefüllte Gastsitzung und Unternehmenszuordnung	Widget B2C
Portal mit persönlichem Verlauf über Geräte hinweg	Zusätzlich eine Backend-Integration für `external_user_id` und `restore_id`	Persönlicher Verlauf auf dem freigegebenen Widget-Kanal	Widget B2B
Feldvertrag, CSP, Login/Logout, Provisioning	Entwicklerhandbuch	—	Technische Integration

Zeigt eine schwebende Schaltfläche oder einen in die Seite eingebetteten Chat
Öffnet für einen neuen Besucher das Formular mit den Beschriftungen Telefon und Name. In init() heißen die Felder phone und name; die E-Mail, wenn die Website sie kennt, heißt email
Wenn die Website init() aufruft, nutzt es die schon vorhandenen Daten und kann den Kontakt über external_id (web_code) einem Unternehmen zuordnen. Fehlt das Unternehmen und wird auch company_name gesendet, kann es angelegt werden
Öffnet eine Unterhaltung, die in Quoting24 wie die anderen Kanäle geführt wird
Nimmt Anhänge PDF, DOC/DOCX, JPG/JPEG und PNG an, bis 10 MiB pro Datei und 100 MiB referenzierte Anhänge pro Unterhaltung
Zeigt Begrüßung, Willkommenstext und außerhalb der Zeiten das konfigurierte Banner. Das Verfassen von Nachrichten bleibt verfügbar

Der Loader speichert den Gastnachweis im localStorage der Website, getrennt nach Widget-Schlüssel. Ist der Speicher blockiert, kann die Kontinuität auf die aktuelle Seite beschränkt sein. Die Gastsitzung kann die letzte Unterhaltung nach dem Schließen im selben Browser wieder lesen. Ein anderes Gerät braucht die authentifizierte Wiederherstellung.

Wo man es in Quoting24 konfiguriert

Einstellungen → Kanäle öffnen
Den Kanal Widget auswählen
Die Konfiguration öffnen

Dort stellt man ein:

Logo, Hauptfarbe, Position der Schaltfläche
Begrüßung, Willkommenstext, Text außerhalb der Zeiten
erlaubte Domains
Einbettungscode (vollständige Skript-URL und öffentlicher Widget-Schlüssel)

Die Kanalzeiten bestimmen das Banner außerhalb der Zeiten.

Den Einbettungscode und die erlaubten Domains, einschließlich Test und lokaler Entwicklung, beim Administrator anfordern. URL und Schlüssel derselben Umgebung verwenden. In den Beispielen WIDGET_HOST und WIDGET_SCHLUESSEL durch die erhaltenen Werte ersetzen.

Erlaubte Domains sind Hostnamen, zum Beispiel shop.example.com oder localhost, ohne https://, Port, Pfad oder Präfix *.. example.com erlaubt auch seine Subdomains. Eine leere Liste wendet keine Domainbeschränkung an. Für den lokalen Test die Seite über HTTP ausliefern: als Datei öffnen reicht nicht.

Logo, Farbe, Position und Texte werden in Quoting24 konfiguriert. company_name in init() ist der Firmenname des Kunden, nicht der Widget-Titel. Es gibt keinen öffentlichen Parameter language oder locale: die aktuelle Oberfläche ist Italienisch.

Zwei Arten, es auf der Website zu zeigen

Schwebende Schaltfläche

Das Skript fügt die Schaltfläche ein, nachdem die grafischen Einstellungen geladen sind. Ein Klick öffnet den Chat. Auf dem Mobilgerät kann der schwebende Chat den Viewport ausfüllen.

Siehe Widget B2C.

Eingebetteter Chat

Der Chat füllt einen Seitencontainer mit expliziter Höhe. Es gibt keine schwebende Schaltfläche: Layout und Titel kommen von der Website. In diesem Modus haben open(), close() und toggle() keine Wirkung. Die Website steuert Höhe und Breite des Containers.

Siehe Widget B2C.

Eine Instanz pro Seite: der Loader stellt ein einziges window.Quoting24Widget bereit. Ein zweites Skript erzeugt kein zweites Widget.

Öffentlicher Schlüssel und Geheimnisse

Wert	Wo er liegt	Wozu er dient
Öffentlicher Widget-Schlüssel	Skript-URL	Wählt den Kanal. Er ist öffentlich: kein persönlicher Nachweis und kein Backend-Integrationsgeheimnis
Privates Integrationsgeheimnis	Nur im Backend der Website	Erlaubt das Anlegen und Wiederverwenden von `restore_id`
`restore_id`	Privater Speicher pro Benutzer, im Backend	Nachweis, mit dem der Verlauf dieser Person auf diesem Widget wiederhergestellt wird
Gastnachweis der Sitzung	`localStorage` der Website, vom Loader verwaltet	Gastkontinuität im selben Browser, pro Widget-Schlüssel

Ablauf für den Operator

Der Besucher öffnet den Chat auf der Website und sendet eine Nachricht
In Quoting24 entsteht oder läuft ein Ticket auf dem Widget-Kanal weiter
Hat die Initialisierung eine external_id aufgelöst, ist der Kontakt dem Unternehmen mit diesem web_code zugeordnet. Ein gerade vom Widget angelegtes Unternehmen hat Firmenname und, falls gesendet, E-Mail; ein vorhandenes Unternehmen wird von init() nicht umbenannt
Der Operator bearbeitet die Anfrage und antwortet aus dem Chat
Der Kunde sieht die Antworten im Widget

Widget-Nachrichten lassen sich nur für alle löschen.

Die Daten kommen aus dem Browser und der Besucher kann sie ändern. Die Unternehmenszuordnung beweist keine Identität und öffnet nicht den Verlauf der anderen Kontakte dieses Unternehmens.

Wo anfangen

Erscheinungsbild, Zeiten und Domains unter Einstellungen → Kanäle → Widget konfigurieren
Öffentliche Website oder Portal, das das Profil vorausfüllt: Widget B2C
Verlauf derselben Person in einem anderen Browser: Widget B2B
Felder, Unternehmensanlage, CSP und Checkliste: Technische Integration