Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
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 |
---|---|---|
|
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 |
|
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 |
|
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 |
|
Taille de police pour tous les textes |
12 à 20 pixels recommandés pour les différents cas d'utilisation |
|
Hauteur du pied de page du widget |
Minimum : 50 pixels Maximum : hauteur du cadre Ajustement recommandé en fonction de la taille du cadre |
|
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. |
|
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 |
|
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 |
|
Taille de police pour tous les textes |
12 à 20 pixels recommandés pour les différents cas d'utilisation |
|
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 |
|
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 |
|
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 |
|
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 |
|
Taille de police pour le texte du bouton d'action |
Ajustement recommandé en fonction de la hauteur du pied de page |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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.
![Éléments qui composent le widget de communication](images/chatwidget-elements.png)
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 |
---|---|---|
|
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 |
|
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 |
|
Texte à remplacer le nom SYSTEM_MESSAGE d'affichage |
Longueur minimale : 1 caractère Longueur maximale : 26 caractères |
|
Texte à remplacer le nom BOT d'affichage | Longueur minimale : 1 caractère Longueur maximale : 26 caractères |
|
Texte à remplacer dans l'espace réservé lors de la saisie de texte | Longueur minimale : 1 caractère Longueur maximale : 22 caractères |
|
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 |
|
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 |
|
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
etframeHeight
. -
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 pourfooterHeight
. -
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 pourbuttonFontSize
.