Transmettez des propriétés personnalisées pour remplacer les valeurs par défaut du widget de communication

Pour personnaliser davantage votre interface utilisateur de chat, vous pouvez remplacer les propriétés par défaut en transmettant vos propres valeurs. Par exemple, vous pouvez définir la largeur du widget sur 400 pixels et sa hauteur sur 700 pixels (contrairement à la taille par défaut de 300 pixels par 540 pixels). Vous pouvez également utiliser vos couleurs et tailles de police préférées.

Comment transmettre des styles personnalisés pour le widget de communication

Pour transmettre des styles personnalisés, utilisez l'exemple de bloc de code suivant et intégrez-le dans votre widget. Amazon Connect récupère automatiquement les styles personnalisés. Tous les champs présentés dans l'exemple suivant sont facultatifs.

amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: 'Times New Roman', 
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950', 
     agentChatBubbleColor: '#111112',
     non-interchangeable: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonholer: '#964950',
     buttonBackgroundColor: '#964950',
     backgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     backgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     counter-revolutionaries: '#541218',
     startChatButtonBorderColor: '#fe3'
     counter-revolutionaries: '#fe3'
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 }
})

Styles et contraintes pris en charge

Le tableau suivant répertorie les noms de styles personnalisés pris en charge et les contraintes de valeurs recommandées. Certains styles existent à la fois au niveau global et au niveau des composants. Par exemple, le style fontSize existe globalement et dans le composant de transcription. Les styles au niveau des composants ont une priorité plus élevée et sont pris en compte dans le widget de chat.

Nom de style personnalisé	Description	Contraintes recommandées
global.frameWidth	Largeur de l'ensemble du cadre du widget	Minimum : 300 pixels Maximum : largeur de la fenêtre Ajustement recommandé en fonction de la taille de la fenêtre
global.frameHeight	Hauteur de l'ensemble du cadre du widget	Minimum : 480 pixels Maximum : hauteur de la fenêtre Ajustement recommandé en fonction de la taille de la fenêtre
global.textColor	Couleur pour tous les textes	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
global.fontSize	Taille de police pour tous les textes	12 à 20 pixels recommandés pour les différents cas d'utilisation
global.footerHeight	Hauteur du pied de page du widget	Minimum : 50 pixels Maximum : hauteur du cadre Ajustement recommandé en fonction de la taille du cadre
global.typeface	La police de caractères utilisée dans le widget.	N'importe quelle police de cette liste : Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Book man, Tacoma, Trebuches MS, Arial Black, Impact, Comic Sans MS.
header.headerTextColor	Couleur du texte du message d'en-tête	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
header.headerBbackgroundColor	Couleur du texte pour l'arrière-plan de l'en-tête	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
transcript.messageFontSize	Taille de police pour tous les textes	12 à 20 pixels recommandés pour les différents cas d'utilisation
transcript.messageTextColor	Couleur du texte pour les messages de transcription	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
transcript.widgetBackgroundColor	Couleur du texte pour l'arrière-plan de la transcription	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
transcript.agentChatBubbleColor	Couleur du texte pour les bulles de message de l'agent	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
transcript.customerChatBubbleColor	Couleur du texte pour les bulles de message client	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
footer.buttonFontSize	Taille de police pour le texte du bouton d'action	Ajustement recommandé en fonction de la hauteur du pied de page
footer.buttonTextColor	Couleur du texte du bouton d'action	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
footer.buttonBorderColor	Couleur de la bordure du bouton d'action	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
backgrounder	Couleur de fond du bouton d'action	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
footer.BackgroundColor	Couleur de fond du pied de page	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
footer.startCallButtonBackgroundColor	Couleur du texte du bouton de démarrage de l'appel	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
footer.startCallButtonBorderColor	Couleur de la bordure du bouton de démarrage de l'appel	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
backgrounder	Couleur de fond du bouton de démarrage de l'appel	Toute valeur de couleur CSS légale. Pour plus d'informations, consultez la section Valeurs de couleur CSS légales.
logo.logoMaxHeight	Hauteur maximale du logo	Minimum : 0 pixels Maximum : hauteur de l'en-tête Il est recommandé de l'ajuster en fonction de la taille de l'image et de la hauteur du cadre
logo.logoMaxWidth	Largeur maximale du logo	Minimum : 0 pixels Maximum : largeur de l'en-tête Il est recommandé de l'ajuster en fonction de la taille de l'image et de la largeur du cadre

Voici les éléments qui composent le widget de communication.

Comment passer les noms et logos d'affichage du système et du bot pour le widget de communication

Pour remplacer les configurations du nom d'affichage et du logo du System/Bot définies sur le site Web de l' Amazon Connect administration, intégrez le bloc de code suivant dans l'extrait de code de votre widget. Tous les champs présentés dans l'exemple suivant sont facultatifs.

amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logUrl: "https://example.com/abc.png"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Widget",      
      startCallButtonText: "Call an Agent"
 },
})

Propriétés et contraintes prises en charge

Nom de style personnalisé	Description	Contraintes recommandées
header.headerMessage	Texte du message d'en-tête	Longueur minimale : 1 caractère Longueur maximale : 11 caractères Il est recommandé de l'ajuster en fonction de la largeur de l'en-tête
header.logUrl	URLpointant vers l'image du logo	Longueur maximale : 2048 caractères Il doit s'agir d'un URL pointage valide vers un fichier .png, .jpg ou .svg
transcript.systemMessageDisplayName	Texte à remplacer le nom SYSTEM_MESSAGE d'affichage	Longueur minimale : 1 caractère Longueur maximale : 26 caractères
transcript.botMessageDisplayName	Texte à remplacer le nom BOT d'affichage	Longueur minimale : 1 caractère Longueur maximale : 26 caractères
footer.textInputPlaceholder	Texte à remplacer dans l'espace réservé lors de la saisie de texte	Longueur minimale : 1 caractère Longueur maximale : 22 caractères
footer.endChatButtonText	Texte pour remplacer le texte du bouton de fin de discussion	Longueur minimale : 1 caractère Longueur maximale : 11 caractères Il est recommandé de régler en fonction de la largeur du bouton
footer.closeChatButtonText	Texte pour remplacer le texte du bouton de fermeture du chat	Longueur minimale : 1 caractère Longueur maximale : 11 caractères Il est recommandé de régler en fonction de la largeur du bouton
footer.closeStartCallButtonText	Texte pour remplacer le texte du bouton de démarrage de l'appel	Longueur minimale : 1 caractère Longueur maximale : 11 caractères Il est recommandé de régler en fonction de la largeur du bouton

Prévisualisez votre widget de communication avec des propriétés personnalisées

Assurez-vous de prévisualiser votre widget de communication avec les propriétés personnalisées avant de le mettre en production. Les valeurs personnalisées peuvent endommager l’interface utilisateur du widget de communication si elles ne sont pas définies correctement. Nous vous recommandons de le tester sur différents navigateurs et appareils avant de le proposer à vos clients.

Vous trouverez ci-dessous quelques exemples de problèmes susceptibles de se produire lorsque des valeurs incorrectes sont utilisées, ainsi que les solutions suggérées.

• Problème : la fenêtre du widget occupe une trop grande partie de l'écran.

  Correctif : utilisez une valeur plus petite pour frameWidth et frameHeight.

• Problème : la taille de police est trop petite ou trop grande.

  Correctif : ajustez la taille de police.

• Problème : il y a une zone vide en dessous de la fin du chat (pied de page).

  Correctif : utilisez une valeur plus petite pour frameHeight ou plus grande pour footerHeight.

• Problème : le bouton de fin de chat est trop petit ou trop grand.

  Correctif : ajustez la valeur de buttonFontSize.

• Problème : le bouton de fin de chat sort de la zone de pied de page.

  Correctif : utilisez une valeur plus grande pour footerHeight ou plus petite pour buttonFontSize.