Mon édition
Module supplémentaire Agents IA - avancé

Les messages enrichis, comme les boutons et les carrousels, ne sont pas pris en charge par Salesforce. C’est pour cela que nous avons créé nos propres scripts que vous pouvez ajouter à Salesforce comme ressources statiques pour activer les boutons comme messages enrichis dans les workflows de dialogue. Cette opération doit être effectuée par un administrateur Salesforce.

  • Scripts
    • Télécharger et charger des scripts dans Salesforce
    • Modifier le widget de chat pour faire référence aux scripts personnalisés
  • Lightning Component
    • Télécharger le Lightning Component
    • Installer et déployer le composant 
  • Paramètres Salesforce
    • Mettre à jour le paramètre de déploiements du service Widget Chat intégré
  • Supprimer le code HTML de la transcription du chat
  • Personnalisations recommandées

Module

Ces scripts activent toutes les fonctionnalités de personnalisation et le CSS pour le rendu de messages enrichis. 

Télécharger le module

  1. Téléchargez le fichier assets.zip ici 
  2. Décompressez le fichier zip et vous trouverez un dossier appelé riche-message-plugin dans lequel vous verrez deux fichiers :
    • CustomEvents_AddButtons.js
    • CustomEvents_AddButtons_Stylesheet.css

Télécharger le module

Les deux fichiers doivent être ajoutés comme ressources statiques. Pour ce faire :

  1. Dans Salesforce, accédez à Configurer > Code personnalisé > Visualforce Pages -> Developer Console (cela ouvre une nouvelle fenêtre)
  2. Dans la nouvelle fenêtre, sélectionnez Fichier > Nouveau > Ressource statique
  3. Configurez les champs comme suit :
    • Nom : CustomEvents_AddButtons
      • Remarque - (Vous pouvez renommer ce nom si vous le souhaitez. Il s’agit de la référence que vous utiliserez dans le code du widget ultérieurement et vous n’avez pas besoin des balises .js et .css.)
    • Type MIME : text/javascript ou text/css, selon le fichier que vous téléchargez.
  4. Cliquez sur Envoyer
  5. Répétez les étapes 2 à 4 pour le fichier CustomEvents_Addtons_Stylesheet.css.

Modifier le widget de chat pour faire référence au module personnalisé

  1. Dans le code source de votre site Web, localisez le snippet du widget à intégrer
  2. Ajoutez les lignes suivantes au-dessusembedded_svc.init() :
embedded_svc.settings.externalScripts = ["CustomEvents_AddButtons"];
embedded_svc.settings.externalStyles = ["CustomEvents_AddButtons_Stylesheet"];

 

Lightning Component

Le Lightning Component active l’indicateur de saisie et remplace la composante standard du message de chat par une composante capable de comprendre la logique HTML.

Télécharger le Lightning Component

Dans le dossier zip que vous avez téléchargé précédemment, vous trouverez un dossier rich-message-lightning-web-component.

Installer et déployer le composant

Si vous déployez un composant Web pour la première fois, consultez le guide des versions d’essai ici.

Installer

  1. Créez le projet dans DS Code - vous devez activer l’extension Salesforce et installer l’interface de ligne de commande Salesforce téléchargée.

    1. Créez un projet en sélectionnant SFMX : Créer le projet à partir de la vue > Palette de commandes

      Acceptez le modèle standard et donnez-lui le nom du projet lwcchatpack.

    2. Sous force-app/main/default, cliquez sur le dossier lwc avec le bouton droit et sélectionnez SFMX : Créer un composant Web Lightning.

      vs_code_salesforce.png

    3. Saisissez : lwcchatpack pour le nom du nouveau composant et acceptez les valeurs par défaut

    4. Remplacez les fichiers créés automatiquement par ceux qui ont été téléchargés de Google Drive et ajoutez le nouveau fichier CSS. Enregistrez tout

Déployer

    1. Sous Vue > Palette de commandes, entrez SFMX : Autoriser une organisation.
      À l’invite, acceptez le projet par défaut et appuyez sur Entrée pour accepter l’alias par défaut. Si vous êtes invité à accorder l’accès, cliquez sur Autoriser.

    2. Cliquez sur le dossier par défaut avec le bouton droit et sélectionnez SFMX : Déployer cette source dans l’organisation.

Si le déploiement pour votre éditeur de code ne fonctionne pas, vous pouvez le faire à partir de l'interface de ligne de commande en saisissant ce qui suit

cd Filepath/where/project/lives
sfdx force:source:deploy -p force-app/main/default

 

Mettre les paramètres Salesforce à jour

Pour que vous puissiez utiliser ce nouveau composant, vous devez l’activer dans le widget de chat.

Vous contrôlez cela par le biais du « service incorporé » que vous utilisez déjà aujourd’hui (il s’agit du widget que vous utilisez).

Pour mettre les paramètres à jour, allez à Paramètres > Déploiement de Service incorporé, sélectionnez le widget approprié, cliquez sur Vue,puis modifiez les paramètres de chat.

Vous verrez alors la section « Personnalisation avec le Lightning Component » dans laquelle vous pouvez remplacer le composant « message de chat » par défaut par celui que nous avons installé ci-dessus. N’oubliez pas d’utiliser le nom de projet lwcchatpack que nous avons utilisé précédemment.

Screenshot_2023-01-25_at_10.22.57.png

Supprimer le code HTML de la transcription du chat

Maintenant que nous avons terminé cette personnalisation avec les options riches, nous voulons nous assurer que la transcription du chat reste lisible.

Nous pouvons modifier cela pour que le rendu HTML soit effectué en ajoutant un déclencheur de transcription de chat.

Configurer > Gestionnaire d'objet > Transcription du chat > Déclencheur > Nouveau

trigger regexReplace on LiveChatTranscript (before insert, before update) {
for(LiveChatTranscript chatTranscript : Trigger.new){
if(String.isNotBlank(chatTranscript.Body)){
chatTranscript.Body=chatTranscript.Body.replaceAll('&lt;','<').replaceAll('&gt;','>').replaceAll('&quot;','"').replaceAll('&amp;','&'); 
}
}
}
image__37_.png


Recommandations 

Ajuster la largeur du champ de chat

Pour une meilleure expérience, nous vous conseillons d’augmenter la largeur du champ de chat. Nous suggérons une taille minimale de 350 pixels, mais l’idéal est de 450 pixels.

Pour modifier cela, recherchez la ligne ci-dessous dans le code du widget et définissez la valeur de votre choix.

embedded_svc.settings.widgetWidth =

Ajuster la police et la couleur par défaut

Dans le fichier CSS du code du widget, localisez le sélecteur de couleur. Par défaut, il sera violet, mais vous pouvez l’ajuster dans le fichier CustomEvents_AddButtons_Stylesheet.css que nous avons chargé au début. 

Si vous avez besoin de remplacer la couleur que vous avez définie, par exemple si vous voulez avoir des étoiles jaunes, mais votre marque doit être en violet pour les autres couleurs, il vous suffit d'ajouter le marqueurimportant;.

Réalisé par Zendesk