So erstellen und verwenden Sie Zendesk Messaging Webview-Vorlagen

Zendesk Messaging Webview-Vorlagen ermöglichen es Ihnen, externe Websites direkt in Ihre Chat-Widget-Konversationen einzubetten. Anstatt Kunden wegzuschicken, um Formulare auszufüllen oder Produktseiten zu durchsuchen, können Sie sie im Konversationsfluss halten. Diese Anleitung führt Sie durch alles, was Sie wissen müssen: Was Webviews sind, wann Sie sie verwenden sollten und wie Sie sie genau einrichten.

Was sind Zendesk Messaging Webview-Vorlagen?

Eine Webview-Vorlage ist eine von drei strukturierten Nachrichtentypen, die in Zendesk AI Agents - Advanced verfügbar sind. Während Formulare Kundeninformationen sammeln und benutzerdefinierte JSON-Vorlagen Karussells oder schnelle Antworten anzeigen, dienen Webviews einem anderen Zweck. Sie ermöglichen es Ihnen, Kunden eine externe Website zu präsentieren, ohne dass diese die Konversation verlassen müssen.

Hier ist, wie sich Webviews von anderen strukturierten Nachrichten unterscheiden:

• Formulare sind integrierte Datensammler für einfache Informationen wie E-Mail-Adressen, Namen oder Dropdown-Auswahlen
• Benutzerdefinierte JSON-Vorlagen erstellen interaktive Elemente wie Produktkarussells, Schnellantwort-Buttons oder NPS-Umfragen
• Webviews zeigen externe Websites innerhalb des Web Widgets an, perfekt für komplexe Interaktionen, die über die nativen Funktionen von Zendesk hinausgehen

Webviews funktionieren, indem sie eine externe URL in einem Iframe innerhalb des Chat-Widgets laden. Wenn ein Kunde auf Ihren Webview-Button klickt, öffnet sich die Website in einem Panel über der Konversation. Er interagiert mit der Seite, erledigt seine Aufgabe und kehrt nahtlos zum Chat zurück. Für Kanäle, die keine Webviews unterstützen, können Sie eine Fallback-URL festlegen, die stattdessen in einem neuen Browser-Tab geöffnet wird.

Gängige Anwendungsfälle sind Buchungskalender, Zahlungsabwickler, Produktkonfiguratoren, Dokumentensignierungstools und Kontoverwaltungsportale. Jedes Szenario, in dem Sie mehr Funktionalität benötigen, als die integrierten Formulare von Zendesk bieten können, ist ein Kandidat für eine Webview-Vorlage.

Was Sie für den Anfang benötigen

Bevor Sie Ihre erste Webview-Vorlage erstellen, müssen Sie mehrere Anforderungen erfüllen. Lassen Sie uns diese aufschlüsseln:

Zendesk Plan Anforderungen:

Technische Anforderungen:

• Eine externe Website-URL, die das Laden von Iframes zulässt (die meisten modernen Web-Apps tun dies)
• HTTPS-Protokoll (erforderlich für die Sicherheit)
• Eine Fallback-URL für Kanäle, die keine Webviews unterstützen

Was Sie nicht benötigen:

Im Gegensatz zum Erstellen benutzerdefinierter Integrationen mit der Sunshine Conversations API benötigen Webview-Vorlagen keine Entwicklerressourcen. Sie können sie über die visuelle Oberfläche von Zendesk erstellen und verwalten. Die Einrichtung ist so einfach, dass Support-Admins sie ohne technische Hilfe bewältigen können.

Für Teams, die Alternativen evaluieren, bieten wir bei eesel AI einen anderen Ansatz. Anstatt Vorlagen für jeden Interaktionstyp zu erstellen, lernen unsere KI-Agenten aus Ihren bestehenden Inhalten und bearbeiten Konversationen autonom. Sie können mit einer 7-tägigen kostenlosen Testversion beginnen, wenn Sie KI-gestützten Support ohne die Komplexität von Vorlagen erkunden möchten.

Schritt-für-Schritt: Erstellen Ihrer ersten Webview-Vorlage

Schritt 1: Zugriff auf die AI Agent Einstellungen

Navigieren Sie zum Admin Center und klicken Sie dann in der linken Seitenleiste auf Kanäle. Wählen Sie AI Agents, um Ihre Liste der erweiterten AI Agents anzuzeigen. Wählen Sie den Agenten aus, dem Sie die Webview-Vorlage hinzufügen möchten. Wenn Sie noch keinen erweiterten AI Agent erstellt haben, müssen Sie zuerst einen einrichten und ihn mit einem Messaging-Kanal verbinden.

Schritt 2: Navigieren Sie zur Vorlagenverwaltung

Wenn Ihr AI Agent ausgewählt ist, klicken Sie in der Seitenleiste auf Einstellungen. Wählen Sie dann CRM-Integration aus dem Menü. Sie sehen mehrere Registerkarten oben im Inhaltsbereich. Klicken Sie auf die Registerkarte Vorlagen, um auf die Oberfläche zur Verwaltung strukturierter Nachrichtenvorlagen zuzugreifen.

Wenn dies Ihre erste Vorlage ist, sehen Sie eine Schaltfläche "Erstellen Sie Ihre erste Vorlage". Wenn Sie bereits Vorlagen erstellt haben, sehen Sie stattdessen eine Liste vorhandener Vorlagen mit einer Schaltfläche "Vorlage erstellen".

Schritt 3: Erstellen Sie eine neue Webview-Vorlage

Klicken Sie auf die Schaltfläche "Erstellen" und wählen Sie Webview aus den drei Optionen für den Vorlagentyp aus. Die Konfigurationsseite für die Webview-Vorlage wird mit mehreren auszufüllenden Feldern geöffnet.

Schritt 4: Konfigurieren Sie die Vorlagendetails

Füllen Sie die erforderlichen Felder aus:

Vorlagenname: Geben Sie eine eindeutige Kennung ein, die nur Buchstaben, Zahlen, Bindestriche und Unterstriche verwendet. Keine Leerzeichen erlaubt. Dieser Name wird in Ihrer Vorlagenliste angezeigt und ist das, worauf Sie sich beziehen, wenn Sie die Vorlage in Dialoge einfügen. Etwas wie "Buchungskalender" oder "Produktkonfigurator" funktioniert gut.

Beschreibung: Optional, aber empfohlen. Fügen Sie eine kurze Notiz hinzu, die erklärt, was diese Vorlage tut und wann sie verwendet werden soll. Dies hilft anderen Teammitgliedern, den Zweck der Vorlage zu verstehen.

Nachrichtentext: Die Nachricht, die Ihr AI Agent über dem Webview-Button anzeigt. Dies legt den Kontext für den Kunden fest. Zum Beispiel: "Sie können unsere Echtzeitverfügbarkeit überprüfen und unten einen Termin buchen."

Button-Text: Die Beschriftung auf dem Button, auf den Kunden klicken, um die Webview zu öffnen. Halten Sie es aktionsorientiert: "Termin buchen", "Produkt konfigurieren" oder "Dokument signieren".

URL: Die externe Website-URL, die geladen wird, wenn auf den Button geklickt wird. Diese muss HTTPS verwenden und das Laden in einem Iframe zulassen. Testen Sie diese URL vorher, um sicherzustellen, dass sie in einem Iframe-Kontext ordnungsgemäß funktioniert.

Fallback-URL: Eine Backup-URL für Kanäle, die keine Webviews unterstützen. Diese wird normalerweise in einem neuen Browser-Tab geöffnet. Normalerweise ist dies die gleiche wie Ihre primäre URL, aber Sie können bei Bedarf eine andere Seite festlegen.

Schritt 5: Legen Sie das Messaging-Verhalten fest

Klicken Sie auf "Optionale Felder", um zusätzliche Konfigurationsoptionen zu erweitern:

Größe: Wählen Sie aus, wie groß das Webview-Panel angezeigt wird. Ihre Optionen sind:

• Kompakt: Kleines Panel, gut für einfache Formulare oder kurze Inhalte
• Hoch: Mittleres Panel, geeignet für die meisten Anwendungsfälle
• Voll: Großes Panel, das den größten Teil des Widgets einnimmt, ideal für komplexe Interaktionen

Standardaktion: Markieren Sie dies als Standardaktion, wenn Sie dem Kunden mehrere Optionen anbieten.

Webview automatisch öffnen: Aktivieren Sie diese Option, um die Webview sofort zu öffnen, wenn die Vorlage ausgelöst wird, ohne dass der Kunde auf einen Button klicken muss. Verwenden Sie diese Option sparsam, da sie sich aufdringlich anfühlen kann.

Metadatenfelder: Fügen Sie benutzerdefinierte Felder hinzu, um Daten aus der Webview-Interaktion zu erfassen. Diese können Informationen zur Berichterstattung oder für Folgemaßnahmen an Zendesk zurückgeben.

Schritt 6: Speichern und testen

Klicken Sie auf Erstellen, um Ihre Vorlage zu speichern. Testen Sie sie nun gründlich:

1. Öffnen Sie Ihre Web Widget Vorschau
2. Lösen Sie den Dialog aus, der Ihre Webview-Vorlage enthält
3. Stellen Sie sicher, dass die externe Seite korrekt geladen wird
4. Testen Sie auf mobilen Geräten, um ein responsives Design sicherzustellen
5. Überprüfen Sie, ob die Fallback-URL funktioniert, indem Sie auf nicht unterstützten Kanälen testen

Wenn die Webview einen schwarzen Bildschirm oder einen Fehler anzeigt, blockiert die externe Seite wahrscheinlich das Laden von Iframes. Sie müssen entweder den Website-Administrator kontaktieren, um die Iframe-Einbettung zuzulassen, oder eine andere Lösung wählen.

Verwenden von Webview-Vorlagen in Konversationsabläufen

Hinzufügen von Vorlagen zu Dialogen

Das Erstellen der Vorlage ist nur die halbe Miete. Sie müssen sie in die Konversationsabläufe Ihres AI Agents einfügen, damit sie tatsächlich für Kunden angezeigt wird.

Vorlagen verwenden eine Kurzschriftsyntax, die automatisch durch den vollständigen Vorlageninhalt ersetzt wird, wenn sie gesendet wird. So fügen Sie einen Vorlage zu einem Dialog hinzu:

1. Gehen Sie zur Registerkarte Vorlagen Ihres AI Agents und suchen Sie Ihre Webview-Vorlage in der Liste
2. Klicken Sie auf den Kurzschriftcode, der in der Spalte Kurzschrift angezeigt wird (er sieht in etwa so aus: %((template:your-template-name))%)
3. Der Code wird in Ihre Zwischenablage kopiert
4. Öffnen Sie den Dialog, in dem Sie die Vorlage verwenden möchten
5. Wählen Sie den AI Agent Nachrichtenblock aus, in dem die Vorlage angezeigt werden soll
6. Fügen Sie den Kurzschriftcode in den Nachrichtentext ein

Optionen für die Vorlagensyntax

Zendesk bietet zwei Syntaxformate für Vorlagen:

• Standardsyntax: %((template:template_name))%
• Alternative Syntax: %{{template:template_name}}%

Die alternative Syntax existiert für den Fall, dass die Standardformat mit anderen Vorlagensystemen in Konflikt gerät, die Sie möglicherweise verwenden. Beide funktionieren auf die gleiche Weise.

Sie können Text vor der Vorlagenkurzschrift einfügen, wodurch eine Zwei-Nachrichten-Sequenz erstellt wird. Der Text wird zuerst angezeigt, dann wird die Vorlage als separate Nachricht gerendert. Jeder Text nach der Vorlagenkurzschrift wird ignoriert, also setzen Sie Ihren gesamten Kontext vor den Code.

Übergeben von Variablen an Vorlagen

Verwenden Sie für dynamische Webviews, die sich basierend auf dem Konversationskontext ändern, die CRM-Aktion "Webview hinzufügen" anstelle einer statischen Vorlage. Auf diese Weise können Sie URLs mit Variablen erstellen, die während der Konversation gesammelt wurden, z. B.:

https://your-booking-app.com?customer_id={{user.id}}&product={{conversation.product}}

Dieser Ansatz schafft personalisierte Erlebnisse, bei denen die externe Seite weiß, wer der Kunde ist und wonach er sucht.

Häufige Anwendungsfälle für Webview-Vorlagen

Webviews funktionieren gut in Szenarien, in denen die nativen Formulare von Zendesk nicht ausreichen. Hier sind die effektivsten Anwendungen:

Komplexe Buchungssysteme

Die Terminplanung erfordert oft Kalender-Schnittstellen, Zeitschlitz-Auswahl und Service-Optionsvergleiche. Anstatt dies in Zendesk-Formulare einzubauen, betten Sie Ihr bestehendes Buchungstool ein. Calendly, Acuity Scheduling oder benutzerdefinierte Buchungsportale funktionieren alle hervorragend als Webviews.

Benutzerdefinierte Formulare

Mehrstufige Datenerfassung, bedingte Logik oder Berechnungen übersteigen das, was die einfachen Formulare von Zendesk bewältigen können. Wenn Sie möchten, dass Kunden einen detaillierten Antrag, eine Angebotsanfrage oder einen Registrierungsprozess ausfüllen, ist eine Webview, die Ihr benutzerdefiniertes Formular lädt, die richtige Wahl.

Zahlungsabwicklung

Sichere Checkout-Abläufe sollten etablierte Zahlungsabwickler wie Stripe, PayPal oder Ihre E-Commerce-Plattform verwenden. Das Einbetten dieser über Webview ermöglicht es Kunden, Transaktionen abzuschließen, ohne die Support-Konversation zu verlassen.

Produktkonfiguratoren

Interaktive Produktanpassungstools, 3D-Viewer oder komplexe Optionsselektoren sind perfekte Webview-Kandidaten. Kunden können ihre ideale Produktkonfiguration erstellen, Preisaktualisierungen in Echtzeit sehen und dann zum Chat zurückkehren, um Fragen zu stellen oder den Kauf abzuschließen.

Dokumentensignierung

E-Signatur-Tools wie DocuSign oder Adobe Sign lassen sich reibungslos über Webview integrieren. Support-Agenten können die Dokumentensignierung während Rückerstattungsprozessen, Vertragsverlängerungen oder Streitbeilegungen auslösen.

Kontoverwaltung

Anstatt zu erklären, wie man Kontoeinstellungen findet, zeigen Sie Kunden ihr Kontoportal direkt im Chat. Dies funktioniert für Passwortzurücksetzungen, Abonnementverwaltung, Profilaktualisierungen und Datenschutzeinstellungen.

Für viele dieser Anwendungsfälle stellen Sie möglicherweise fest, dass die Wartung externer Tools und Webview-Vorlagen die Komplexität erhöht. Bei eesel AI haben wir festgestellt, dass das Trainieren eines KI-Agenten auf Ihre bestehenden Prozesse oft die Notwendigkeit komplexer Webview-Konfigurationen beseitigt. Unsere KI kann mehrstufige Konversationen führen, Kontoinformationen über die API abrufen und Kunden gesprächsweise durch Prozesse führen. Der Business Plan umfasst API-Aktionen und unbegrenzte Interaktionen, wenn Sie diesen Ansatz erkunden möchten.

Best Practices und Fehlerbehebung

Design für den Widget-Kontext

Webviews werden in einem begrenzten Raum innerhalb des Web Widgets angezeigt. Ihre externen Seiten sollten:

• Verwenden Sie ein responsives Design, das sich an kleinere Viewports anpasst
• Vermeiden Sie Navigationsmenüs, die mit der Widget-Oberfläche konkurrieren
• Laden Sie schnell, idealerweise unter 3 Sekunden
• Haben Sie klare Abschlusszustände, die Kunden mitteilen, was als Nächstes passiert

Sicherheitsanforderungen

• Verwenden Sie immer HTTPS-URLs. HTTP-Seiten werden in modernen Browsern nicht innerhalb von Iframes geladen.
• Stellen Sie sicher, dass Ihre externe Seite die Iframe-Einbettung zulässt. Suchen Sie nach X-Frame-Options Headern, die auf SAMEORIGIN oder DENY gesetzt sind, als Indikatoren dafür, dass die Einbettung nicht funktioniert.
• Berücksichtigen Sie die Daten, die zwischen Zendesk und Ihrer externen Seite übertragen werden. Verwenden Sie URL-Parameter sorgfältig und vermeiden Sie die Offenlegung sensibler Informationen.

Browserkompatibilität

Zendesk unterstützt die neuesten zwei Versionen von Chrome, Firefox und Edge sowie das neueste Safari. Testen Sie Ihre Webviews in diesen Browsern. Mobile Safari auf iOS und Chrome Mobile erfordern besondere Aufmerksamkeit, da sich das Iframe-Verhalten auf mobilen Geräten unterscheidet.

Häufige Probleme und Lösungen

Test-Checkliste

Vor dem Bereitstellen von Webview-Vorlagen in der Produktion:

• Testen Sie auf Desktop Chrome, Safari, Firefox und Edge
• Testen Sie auf iOS Safari und Android Chrome
• Überprüfen Sie das Fallback-URL-Verhalten auf nicht unterstützten Kanälen
• Bestätigen Sie, dass die Datenerfassung und die Metadatenfelder korrekt funktionieren
• Überprüfen Sie, ob die Vorlage im richtigen Dialogschritt angezeigt wird
• Validieren Sie, dass die externe Seite innerhalb von 3 Sekunden geladen wird
• Testen Sie mit einem Kundenkonto, um sicherzustellen, dass personalisierte URLs funktionieren

Wenn Webviews fehlschlagen oder die Komplexität wächst, hilft ein Backup-Ansatz. Wir haben eesel AI entwickelt, um Situationen elegant zu bewältigen, in denen strukturierte Vorlagen nicht ausreichen. Unsere KI lernt aus Ihren erfolgreichen Interaktionen und kann Kundenbedürfnisse oft lösen, ohne dass externe Tools erforderlich sind. Wenn Sie auf Einschränkungen mit dem Vorlagensystem von Zendesk stoßen, buchen Sie eine Demo, um zu sehen, wie sich die autonome KI-Bearbeitung vergleicht.

Alternativen zu Webview-Vorlagen

Webviews sind nicht immer die richtige Lösung. Berücksichtigen Sie je nach Bedarf diese Alternativen:

Native Zendesk Formulare

Für einfache Datenerfassung (Name, E-Mail, Dropdown-Auswahlen, kurzer Text) sind die integrierten Formularvorlagen von Zendesk schneller einzurichten und zuverlässiger. Sie lassen sich direkt in Ticketfelder integrieren und erfordern kein externes Hosting. Halten Sie Formulare für die beste Kundenerfahrung unter fünf Feldern.

Karussells und schnelle Antworten

Wenn Sie Produkte präsentieren oder einfache Auswahlmöglichkeiten anbieten, zeigen Karussells bis zu 10 scrollbare Karten mit Bildern und Buttons an. Schnelle Antworten präsentieren bis zu 11 vordefinierte Optionen als anklickbare Buttons. Beide halten Kunden im nativen Messaging-Erlebnis, ohne Iframe-Komplexität.

Marketplace-Apps von Drittanbietern

Apps wie Interactive Messaging Templates von Zenplates erweitern die Messaging-Funktionen von Zendesk mit agentenseitigen Vorlagenauswählern. Diese funktionieren gut, wenn Sie möchten, dass menschliche Agenten strukturierte Nachrichten auswählen und senden, anstatt alles über AI Agents zu automatisieren.

API-basierte benutzerdefinierte Lösungen

Für maximale Flexibilität ermöglicht die Sunshine Conversations API Entwicklern, vollständig benutzerdefinierte Nachrichtentypen zu erstellen. Dies erfordert technische Ressourcen, beseitigt aber die Einschränkungen vorlagenbasierter Ansätze.

Autonome KI-Bearbeitung

Anstatt Vorlagen und Webviews für jedes Szenario zu erstellen, gehen einige Teams zu AI Agents über, die Konversationen auf natürliche Weise führen. Anstatt einen Buchungskalender zu präsentieren, stellt die KI klärende Fragen, überprüft die Verfügbarkeit über die API und bestätigt Termine gesprächsweise. Dies macht es überflüssig, dass Kunden überhaupt mit externen Schnittstellen interagieren müssen.

Wir haben eesel AI um diese Philosophie herum aufgebaut. Unsere KI-Agenten lernen aus Ihren vergangenen Tickets, Ihrem Hilfe-Center und Ihrer Dokumentation, um Kundenkonversationen ohne vordefinierte Vorlagen zu führen. Für komplexe Szenarien, die traditionell Webviews erfordern würden, kann die KI oft Informationen gesprächsweise sammeln und Aktionen über API-Integrationen ausführen. Das Ergebnis ist eine einfachere Einrichtung mit weniger beweglichen Teilen. Sie können es 7 Tage lang kostenlos ausprobieren, um zu sehen, wie sich die autonome Bearbeitung mit vorlagenbasierten Workflows vergleicht.

Beginnen Sie mit der Verbesserung Ihres Zendesk Messaging mit Webview-Vorlagen

Zendesk Messaging Webview-Vorlagen schließen die Lücke zwischen Konversationssupport und komplexen externen Tools. Wenn Sie einen Buchungskalender, ein Zahlungsformular oder einen Produktkonfigurator präsentieren müssen, ohne den Konversationsfluss zu unterbrechen, sind Webviews Ihre Lösung.

Die Einrichtung erfordert den richtigen Plan (Suite Team plus AI Agents - Advanced), eine kompatible externe Website und einige Konfigurationen im Zendesk Admin Center. Einmal konfiguriert, lassen sich Webviews nahtlos in AI Agent Dialoge mithilfe einer einfachen Kurzschriftsyntax integrieren.

Bevor Sie umfangreiche Webview-Konfigurationen erstellen, sollten Sie überlegen, ob jeder Anwendungsfall wirklich eine externe Schnittstelle erfordert. Manchmal reicht ein natives Formular aus. Manchmal funktioniert ein Karussell besser. Und manchmal kann der gesamte Workflow gesprächsweise von einem AI Agent abgewickelt werden, der Ihre Prozesse lernt und Aktionen direkt ausführt.

Wenn Sie die Vorlagenverwaltung als überwältigend empfinden oder an die Grenzen dessen stoßen, was Webviews leisten können, können wir Ihnen helfen. Wir bei eesel AI sind auf autonome AI Agents spezialisiert, die Kundenkonversationen ohne die Komplexität von Vorlagen führen. Unsere KI lernt aus Ihren bestehenden Inhalten, integriert sich in Ihren Helpdesk und eskaliert bei Bedarf an Menschen. Probieren Sie eesel AI 7 Tage lang kostenlos aus oder vereinbaren Sie eine Demo, um zu sehen, wie es sich mit vorlagenbasierten Ansätzen vergleicht.