Personnaliser les widgets de conversation instantanée en direct à l’aide de balises de données
Vous pouvez personnaliser les widgets de conversation instantanée en direct à l’aide de balises de données dans le script du widget. Vous pouvez utiliser les balises suivantes dans le script de widget de conversation instantanée que vous copiez depuis votre application d’administration, telle que le Centre d’administration de Customer Service. Pour plus d’informations : Intégrer le widget de conversation instantanée à votre site Web ou portail
| Nom de l’attribut | Description | Exemple |
|---|---|---|
data-hide-chat-button |
Lorsque vous implémentez votre widget de conversation instantanée, vous pouvez ajouter un bouton de conversation instantanée aligné sur votre expérience d’application mobile au lieu d’utiliser le bouton de conversation instantanée par défaut. Dans cette situation, utilisez cette balise de données pour masquer le bouton de conversation ouvert par défaut disponible dans le widget de conversation instantanée. | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-hide-chat-button="true"></script> |
data-hide-minimize-button |
Lorsque vous implémentez votre widget de conversation instantanée, vous pouvez désactiver le bouton de réduction dans le chat par défaut. Utilisez cette balise de données pour masquer le bouton de réduction du chat par défaut disponible dans le widget de conversation instantanée en direct. | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-hide-minimize-button="true"></script> |
data-disable-telemetry |
Par défaut, la collecte de données de télémétrie est activée pour tous les widgets. Définissez la valeur de cette balise de données sur true, si vous souhaitez désactiver la collecte de données de télémétrie. Pour plus d’informations : : Télémétrie du widget de conversation instantanée. |
<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-disable-telemetry="true"></script> |
data-render-mobile |
Ouvrez le widget de chat en mode mobile. Le widget de conversation instantanée n’a pas d’en-tête lorsqu’il est utilisé sur un appareil mobile. Pour plus d’informations : Personnaliser le chat en direct widget pour les applications mobiles | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-render-mobile="true" ></script> |
data-color-override |
Utilisez cet indicateur de données pour remplacer la couleur du thème par défaut du widget de conversation instantanée. Ce remplacement aura priorité sur tous les paramètres de thème de couleur sur l’application d’administration. | Voici un exemple où la couleur du thème du widget de conversation instantanée est changée en bleu.<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-color-override="#0000FF"></script> |
data-font-family-override |
La famille de polices par défaut est Segoe UI. Utilisez cet indicateur de données pour remplacer la famille de polices par défaut avec une autre police de caractères prise en charge en mode natif. | Exemple 1 : Pour remplacer la police par défaut Segoe UI et définir la famille de polices sur Arial : <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-font-family-override="Arial, Segoe UI"></script> Exemple 2 : Pour ajouter une famille de polices personnalisées comme Monotype Corsiva : <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-font-family-override="Monotype Corsiva"></script> |
data-open-in-window |
Utilisez cette balise de données pour ouvrir le widget de conversation instantanée dans une nouvelle fenêtre. Vous pouvez définir cette balise sur true ou false (valeur par défaut). Par défaut, le widget de conversation instantanée s’ouvre dans la même fenêtre du navigateur. Si la valeur est true, le widget de conversation instantanée s’ouvrira dans une nouvelle fenêtre du navigateur. |
<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-open-in-window="true"></script> |
data-suggested-action-layout |
Utilisez cette balise de données pour afficher les actions suggérées verticalement. Par défaut, les actions suggérées sont affichées horizontalement. Pour afficher les actions suggérées verticalement, définissez la valeur de cette balise de données comme stacked. |
<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-suggested-action-layout="stacked"></script> |
data-enable-lcw-autofill |
Utilisez cette balise de données pour permettre au widget de chat de remplir automatiquement la fenêtre du navigateur en mode intégré. | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-enable-lcw-autofill="true"></script> |
data-custom-close-button-text |
Utilisez cette balise de données pour personnaliser le bouton de fermeture du widget de conversation instantanée. L’entrée est une chaîne de texte qui apparaîtra à la place du bouton de fermeture « X » par défaut. | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-custom-close-button-text="End Chat"></script> |
data-enable-sso-magic-code |
Utilisez cette balise de données pour envoyer automatiquement un code magique à l’utilisateur après la connexion, soit dans la conversation instantanée, soit en mode silencieux via le client. Cette fonction est similaire à l’authentification multifacteur et permet de prévenir les attaques de hameçonnage. Vous pouvez définir cette balise sur true (valeur par défaut) ou false. Si elle est définie sur false, le code est automatiquement envoyé via le client en mode silencieux, après la connexion. Si elle est définie sur true, un code magique est affiché à l’utilisateur pour qu’il l’entre manuellement dans la conversation instantanée, après la connexion. Consultez la section Paramètres supplémentaires pour les navigateurs dans cet article pour obtenir plus d’informations. |
Dans cet exemple, le code magique est automatiquement transmis via le client après la connexion, sans avoir besoin d’une intervention de l’utilisateur. <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-enable-sso-magic-code="false"></script> |
Paramètres supplémentaires pour les navigateurs
Effectuez les étapes spécifiques au navigateur décrites ici pour transmettre automatiquement le code magique.
Navigateurs basés sur Chrome
- Dans Microsoft Edge, saisissez « edge://flags/#third-party-storage-partitioning » dans la barre d’adresse. Dans Google Chrome, saisissez « chrome://flags/#third-party-storage-partitioning » dans la barre d’adresse.
- Sur la page qui s’affiche, définissez l’indicateur Partitionnement du stockage tiers sur Désactivé.
Firefox
- Dans Firefox, saisissez « about:preferences#privacy » dans la barre d’adresse.
- Sur la page qui apparaît, sélectionnez Personnalisé et, pour Cookies, sélectionnez Cookies de suivi entre sites.
Safari
Dans la boîte de dialogue des paramètres, sélectionnez Indicateurs de fonctionnalité et effacez la sélection pour Partitionnement d’origine BroadcastChannel.
Étapes suivantes
Développer un widget personnalisé de conversation instantanée en direct
Voir aussi
Initier une conversation de manière proactive
Télémétrie du widget de conversation instantanée
Personnaliser les widgets de conversation instantanée pour les applications mobiles
Référence du SDK de conversation instantanée en direct