Nachdem Sie das Web Widget konfiguriert haben, können Sie es in Ihrer Website oder im Help Center installieren und für Ihre Kunden bereitstellen. Wenn Sie genau festlegen möchten, wo und wie das Web Widget angezeigt wird, können Sie es auch einbetten.
Dieser Beitrag enthält die folgenden Themen:
Installieren des Web Widgets in einer Website
Um das Web Widget auf Ihrer Website zu installieren, müssen Sie in Grundzügen mit ihrem HTML-Code vertraut sein, da Sie das Code-Snippet vor dem abschließenden </body>-Tag einfügen müssen.
Das folgende Video bietet einen Überblick über das Hinzufügen von Messaging zu Ihrer Website:
Hinzufügen von Messaging zu Ihrer Website [1:40]
So fügen Sie das Web Widget zu Ihrer Website hinzu
- Klicken Sie in der Seitenleiste des Admin Centers auf
Kanäle und dann auf Messaging und Social Media > Messaging. - Klicken Sie auf den Namen des Widgets, das Sie installieren möchten.
- Scrollen Sie nach unten und klicken Sie dann auf Installieren, um den Abschnitt zu erweitern.
- Klicken Sie unten im Bereich mit dem Code-Snippet auf das Symbol Kopieren (
). - Fügen Sie das Code-Snippet vor dem abschließenden <</body>>-Tag in den HTML-Code der Website ein, auf der es erscheinen soll. Fügen Sie den Code zu jeder Webseite hinzu, auf der das Widget erscheinen soll.
- Wenn Sie den Code an eine andere Person (z. B. an einen Entwickler) senden möchten, klicken Sie auf Code per E-Mail an Teammitglied senden.
- Stellen Sie sicher, dass Ihre Firewall so konfiguriert ist, dass das Web Widget angezeigt werden kann.
Installieren des Web Widgets in einem Help Center
Die Installation des Widgets in einem Help Center erfolgt mit einem einfachen Mausklick und ist ohne technischen Support leicht zu bewältigen. Voraussetzung für die Installation des Web Widgets ist aber, dass Sie Ihr Help Center erstellt und aktiviert haben.
So fügen Sie das Web Widget zum Help Center hinzu
- Klicken Sie in der Seitenleiste des Admin Centers auf Kanäle und dann auf Messaging und Social Media > Messaging.
- Klicken Sie auf den Namen des Widgets, das Sie installieren möchten.
- Scrollen Sie nach unten und klicken Sie dann auf Installieren, um den Abschnitt zu erweitern.
- Aktivieren Sie das Kontrollkästchen Web Widget automatisch in Help Center einbetten.
Diese Option wird nur angezeigt, wenn Sie Ihr Help Center erstellt und aktiviert haben.
- Klicken Sie auf Speichern.
Das Widget wird zu jeder Seite Ihres Help Centers hinzugefügt.
Einbetten des Web Widgets
Im Einbettungsmodus wird das Web Widget in einem speziellen HTML-Container auf Ihrer Seite platziert und nicht als unverankertes Overlay mit fester Position angezeigt. Das Widget füllt Ihren ausgewählten Container vollständig aus, sodass Sie genau bestimmen können, wo und wie es dargestellt wird. Dies ist beispielsweise bei komplexen Layouts mit geteilten Ansichten hilfreich, in denen Konversationslisten und Nachrichten nebeneinander angeordnet sind.
Der Einbettungsmodus setzt voraus, dass Sie den Modus und den Zielcontainer für das Widget mit einem API-Aufruf „JavaScript embed“ angeben.
Um den Einbettungsmodus zu verwenden, deaktivieren Sie zunächst das Rendering-Standardverhalten (automatisch) des Widgets:
window.zEMessenger = {
autorender: false
}
Teilen Sie anschließend dem Widget mit, wo es erscheinen soll, indem Sie die ID oder Klasse eines Containers angeben:
zE('messenger', 'render', {
mode: 'embedded',
widget: {
targetElement: '#messaging-container'
}
});
Das Web Widget wird jetzt im #messaging-container-Element in der Größe und an der Position angezeigt, die in Ihrem CSS-Code festgelegt ist.
Weitere Informationen finden Sie in unserer Entwicklerdokumentation unter Web Widget embedded mode (Englisch). Wenn Sie an weiteren Beispielen interessiert sind, lesen Sie den Beitrag Embedded mode for the Zendesk Widget (Englisch).