Benutzerdefiniertes Live-Chat-Widget entwickeln

Microsoft bietet eine Option zum Erstellen eines benutzerdefinierten Live-Chat-Widgets, das Sie Ihrem Dynamics 365 Customer Service-Konto anfügen können. Jede Komponente des benutzerdefinierten Live-Chat-Widgets kann sowohl für Funktionen als auch für die Benutzeroberfläche angepasst werden.

Je nach Anforderung und Ergebnis können Sie das Chat-Widget mithilfe einer der folgenden Optionen anpassen:

• Anpassbares Live-Chat-Widget 2.0 verwenden
• Entwickeln Ihres eigenen Widgets

Anpassbares Live-Chat-Widget 2.0 verwenden

Mit dem anpassbaren Live-Chat-Widget 2.0 können Sie alle Elemente des Widgets bearbeiten, z. B. Schriftart, Farben und Formatierung, sodass Sie das Widget mit Ihrem Markenbild abgleichen können. Das angepasste Widget hilft Ihnen dabei, Vertrauen und Glaubwürdigkeit zu pflegen, Ihre Marke zu unterscheiden, positive emotionale Verbindungen zu fördern und den Wert zu erhöhen, den Kunden Ihrem Produkt zugeschrieben haben.

Das neue Live-Chat-Widget 2.0 basiert auf omnichannel Chat SDK und live Chat Widget UI Component Library.

Portalentwickler – Anpassen der vordefinierten skriptbasierten Benutzeroberfläche

Mit der Portalentwickleroption können Sie die Benutzeroberfläche des Chat-Widgets personalisieren, aber die sofort einsatzbereiten Funktionalitätseinstellungen im Copilot Service Admin Center nicht ändern. Zum Anpassen können Sie das Skript "data-customization-callback" verwenden, das das vordefinierte Widget mit einer JavaScript-Funktion verbindet. Die Funktion kann CSS-Formatierungsanpassungen für die Chatkomponenten mit den gleichen Präzedenzfällen wie die Omnichannel Live Chat Widget Ui Components Library enthalten.

Bearbeiten eines Live-Chat-Widget-Skripts zum Aktivieren des Live-Chat-Widgets 2.0

Um das Live-Chat-Widget 2.0 und die skriptbasierte Anpassung zu verwenden, ändern Sie den Codeausschnitt des sofort einsatzbereiten Livechat-Widgets 2.0 wie folgt.

1. Öffnen Sie im Copilot Service Admin Center den Chat-Workstream, und wählen Sie "Live Chat Widget 2.0 Script kopieren" aus, um den Codeausschnitt zu kopieren.
2. Erstellen Sie eine neue JavaScript-Funktion mit allen Komponentenformaten. Weitere Informationen: Omnichannel-Chat-Widget
3. Fügen Sie "v2" nach dem Skript-Attribut hinzu.
4. Fügen Sie "data-customization-callback" hinzu, und verweisen Sie auf die JavaScript-Funktion.

Der aktualisierte Codeausschnitt sieht wie folgt aus.

Ein Beispielfoto eines Chat-Widgets 2.0, das angepasst ist, um seine Größe zu erhöhen, lautet wie folgt.

Sehen Sie sich das exemplarische Video des eingerichteten Live-Chat-Widgets an.

Verwenden der Web-Engagement-Orchestrierung zum Anpassen des Widgets

Mit der Web-Engagement-Orchestrierung können Sie Ihre Konfigurationsüberschreibungen aus dem JavaScript Ihrer Seite und in das Admin Center verschieben. Weitere Informationen finden Sie unter Bereitstellen von Chat-Widgets auf Websites mithilfe eines einzelnen Tags.

Entwickeln Ihres eigenen Widgets

Verwenden Sie die Informationen in den folgenden Abschnitten, um Ihr eigenes Widget zu erstellen.

Omnichannel Live Chat Widget Ui Components Library

Die Omnichannel Live Chat Widget Ui Components-Bibliothek bietet ein Framework wiederverwendbarer React-Komponenten. Die Komponenten werden mithilfe der Fluent UI-Bibliothek erstellt. Erfahren Sie mehr über die Omnichannel Live Chat Widget Ui Components Library.

Omnichannel Chat SDK

Das Omnichannel Chat SDK ist ein Open-Source-Paket, das Chatmethoden und -features bereitstellt, um einem Live-Chat-Widget Funktionen hinzuzufügen. Erfahren Sie mehr über das Omnichannel Chat SDK.

Anpassen Ihres Live-Chat-Widgets

Nachdem Sie die neueste Version des Omnichannel Chat SDK installiert haben, passen Sie Ihr Live-Chat-Widget mithilfe von Omnichannel Chat SDK-Methoden an, und bearbeiten Sie die grundlegenden CSS-Stile von Omnichannel Live Chat Widget Ui Components.

Verwandte Informationen

Live-Chat-Widgets für mobile Apps anpassen
startChat
schließenChat
lcw:closeChat
lcw:threadAktualisieren
lcw:chatAbgerufen
lcw:chatIn der Warteschlange