Toute personnalisation appliquée à l'UI du widget Web SDK au-delà de celles documentées ici n'est pas prise en charge et peut entraîner un comportement inattendu. Google recommande d'utiliser le SDK sans interface graphique si vous avez besoin de personnalisations plus avancées.
Pour vous assurer que les personnalisations de votre thème s'affichent comme prévu, Google vous recommande de tester vos modifications dans un environnement de test avant de les déployer en production.
Conception du lanceur d'applications
Vous pouvez personnaliser l'icône, la taille, la position et la couleur du lanceur.
Lanceur d'applications
Icône Ouvrir
Icône Fermer
Icônes
Si l'UI du lanceur d'applications par défaut ne correspond pas à votre image de marque, vous pouvez personnaliser les icônes du lanceur d'applications avec votre propre fichier SVG. Vous ne pouvez pas ajouter d'URL au fichier SVG. Il doit s'agir du fichier SVG lui-même.
ccaas.config({ launcherOpenIcon: '<svg ....>', launcherCloseIcon: '<svg ....>',})
Taille
La largeur et la hauteur par défaut du lanceur sont 80px. Vous pouvez choisir une autre taille :
#ccaas-widget {
--launcher-size: 60px;
}
Personnalisation des bordures
Vous pouvez personnaliser les options suivantes pour la bordure du lanceur :
- Couleur de la bordure
- Largeur de la bordure
- Ombre portée (augmenter ou diminuer)
--launcher-border-color
--launcher-border-width
--launcher-shadow
Couleurs du Lanceur d'applications
Par défaut, le lanceur utilise la couleur d'accentuation.
{
--launcher-border-color: var(--accent-10);
--launcher-background-color: var(--accent-10);
--launcher-color: var(--accent-9-contrast);
}
Vous pouvez personnaliser le lanceur pour utiliser une autre couleur. Exemple :
#ccaas-widget {
--launcher-border-color: var(--green-10);
--launcher-background-color: var(--blue-10);
--launcher-color: white;
}
Désactiver le lanceur d'applications
Pour des raisons esthétiques, vous pouvez choisir de masquer le lanceur Web SDK et d'utiliser à la place un déclencheur de chat proactif ou de démarrer le chat de manière programmatique. Vous pouvez masquer ou désactiver l'UI du lanceur à l'aide de disableLauncher :
ccaas.config({
disableLauncher: true
})
Lorsque le lanceur est désactivé, vous pouvez ouvrir le widget avec :
ccaas.show()
Conception du widget
Widget
Logo
Polices
Sélectionnez différentes polices pour votre interface utilisateur.
--font-en : Roboto, Verdana, Helvetica Neue
--font-zh : PingFang SC, Hiragino Sans GB, Droid Sans Fallback, Microsoft YaHei
--font-ja : Hiragino Sans, Meiryo
Couleur d'accentuation
Vous pouvez personnaliser l'accent color en sélectionnant une option de couleur prédéfinie à l'aide de la configuration suivante :
ccaas.config({
accent: 'green',
})
Les couleurs prédéfinies sont blue, green, purple, orange, yellow, gold et red.
Personnalisation de l'accent
Si les choix prédéfinis ne répondent pas aux besoins de votre entreprise, vous pouvez personnaliser le style avec les variables CSS.
#ccaas-widget {
--accent-1: #fbfdff;
--accent-2: #f4faff;
--accent-3: #e6f4fe;
--accent-4: #d5efff;
--accent-5: #c2e5ff;
--accent-6: #acd8fc;
--accent-7: #8ec8f6;
--accent-8: #5eb1ef;
--accent-9: #0090ff;
--accent-10: #0588f0;
--accent-11: #0d74ce;
--accent-12: #113264;
--accent-contrast: white;
--chat-input-selection-color: var(--accent-11);
}
Position
Si le point de montage est #ccaas-widget, vous pouvez mettre à jour la position du widget à l'aide de la commande suivante :
#ccaas-widget {
--ujet-right: 20px;
--ujet-bottom: 10px;
}
Logo
Choisissez un logo personnalisé à afficher dans le widget.
ccaas.config({
logo: 'https://example.com/logo.png'
})
Masquer la bordure du logo de l'agent
Si le point de montage est #ccaas-widget, vous pouvez masquer la bordure du logo de l'agent à l'aide de l'exemple de code suivant :
#ccaas-widget {
--head-logo-shadow: none;
}
Composants divers
En plus des couleurs d'accentuation et de la position, le widget Web SDK fournit davantage de variables CSS pour configurer certains des autres composants utilisés dans le widget.
Si le point de montage est #ccaas-widget, vous pouvez le personnaliser à l'aide de l'exemple de code suivant :
#ccaas-widget {
--variable-name: value;
}
Variables CSS générales
--text-font: Famille de polices par défaut pour le texte.
--text-color: Couleur du texte par défaut.
--end-color: Couleur par défaut des boutons de fin (mettre fin au chat, quitter le chat, mettre fin à la navigation conjointe)
Icône de confirmation
L'icône de confirmation qui s'affiche sur différentes pages du SDK peut être personnalisée. Vous pouvez remplacer l'icône par défaut par une icône personnalisée, et contrôler sa taille et sa couleur.
--confirmation-icon-size
--confirmation-icon-color
Boutons
Vous pouvez contrôler précisément la personnalisation des différents types de boutons. Le tableau suivant explique le comportement attendu lorsque vous personnalisez différents types de boutons en même temps.
| Personnalisations des boutons appliquées | Résultat |
| Aucun | Comportement par défaut (tous les styles de boutons s'affichent en fonction du thème principal). |
| Personnalisations générales des boutons | Tous les boutons (à l'exception des boîtes de dialogue et des écrans de chat) s'affichent en fonction des personnalisations définies par le client. Cela inclut les boutons de menu.
Si une variable de personnalisation générale des boutons N'EST PAS spécifiée, le comportement par défaut est appliqué. |
| Personnalisation du bouton de menu
Personnalisation des boutons de boîte de dialogue |
Les boutons de menu s'affichent en fonction de la variable --menu-button.
Les boutons de la boîte de dialogue s'affichent en fonction des variables Si une variable de personnalisation de bouton de menu / boîte de dialogue N'EST PAS spécifiée, le comportement par défaut est appliqué. |
| Personnalisations générales des boutons
Personnalisation du bouton de menu Personnalisation des boutons de boîte de dialogue |
Les boutons de menu s'affichent en fonction de la variable --menu-button.
Les boutons de la boîte de dialogue s'affichent en fonction des variables Les boutons qui NE SONT PAS des boutons de menu ou de boîte de dialogue s'affichent en fonction des personnalisations générales. Si une variable de personnalisation générale / de menu / de boîte de dialogue N'EST PAS spécifiée, le comportement par défaut est appliqué à ce bouton. |
Boutons généraux
Tous les autres boutons du SDK qui n'ont pas leurs propres variables CSS utilisent la configuration et la personnalisation des boutons généraux.
--general-button-default-background
--general-button-default-border
--general-button-default-color
--general-button-default-outline
--general-button-hover-background
--general-button-hover-border
--general-button-hover-color
--general-button-hover-outline
--general-button-active-background
--general-button-active-border
--general-button-active-color
--general-button-active-outline
--general-button-focus-background
--general-button-focus-border
--general-button-focus-color
--general-button-focus-outline
Boutons principaux
--primary-button-default-background<
--primary-button-default-color
--primary-button-focus-background
--primary-button-focus-color
--primary-button-hover-background
--primary-button-hover-color
--primary-button-active-background
--primary-button-active-color
--primary-button-disabled-background
--primary-button-disabled-color
Boutons secondaires
--secondary-button-default-background
--secondary-button-default-border
--secondary-button-default-outline
--secondary-button-default-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-outline
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-outline
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-outline
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color
Boutons secondaires (inversés)
--secondary-button-inverse-default-background
--secondary-button-inverse-default-border
--secondary-button-inverse-default-outline
--secondary-button-inverse-default-color
--secondary-button-inverse-hover-background
--secondary-button-inverse-hover-border
--secondary-button-inverse-hover-outline
--secondary-button-inverse-hover-color
--secondary-button-inverse-active-background
--secondary-button-inverse-active-border
--secondary-button-inverse-active-outline
--secondary-button-inverse-active-color
--secondary-button-inverse-disabled-background
--secondary-button-inverse-disabled-border
--secondary-button-inverse-disabled-outline
--secondary-button-inverse-disabled-color
--secondary-button-inverse-focus-background
--secondary-button-inverse-focus-border
--secondary-button-inverse-focus-outline
--secondary-button-inverse-focus-color
Boutons de menu
Personnalisation du bouton de menu.
--menu-button-default-background
--menu-button-default-border
--menu-button-default-text
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-text
--menu-button-active-background
--menu-button-active-border
--menu-button-active-text
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-text
--menu-button-focus-outline
Personnalisation du bouton de menu
Boutons de boîte de dialogue
(par exemple, les modaux ou les pop-ups).
--dialog-background
--dialog-text
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-text
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-text
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-text
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-text
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-text
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-text
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-text
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-text
--dialog-secondary-button-active-outline
En-tête du chat
--options-menu-icon-color-default
--options-menu-icon-color-hover
--options-menu-icon-color-active
--options-menu-icon-color-focus
--options-menu-icon-background-default
--options-menu-icon-background-hover
--options-menu-icon-background-active
--options-menu-icon-background-focus
Désactiver le son du chat
ccaas.config({
enableMuteChat: true,
})
Bulle de chat
--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height
--chat-bubble-agent-background
--chat-bubble-agent-text
--chat-bubble-agent-border-top-left
--chat-bubble-agent-border-top-right
--chat-bubble-agent-border-bottom-right
--chat-bubble-agent-border-bottom-left
--chat-bubble-user-background
--chat-bubble-user-text
--chat-bubble-user-border-top-left
--chat-bubble-user-border-top-right
--chat-bubble-user-border-bottom-right
--chat-bubble-user-border-bottom-left
### Personnalisation de la bulle de chat
Message
--message-event-general-font
--message-event-general-font-size
--message-event-general-font-weight
--message-event-general-color
--message-event-error-font
--message-event-error-font-size
--message-event-error-font-weight
--message-event-error-color
--message-event-confirmation-font
--message-event-confirmation-font-size
--message-event-confirmation-font-weight
--message-event-confirmation-color
--message-progress-color
--message-button-font
--message-button-text-size
--message-button-text-color
--message-button-font-style
--message-button-default-background
--message-button-default-border
--message-button-hover-background
--message-button-focus-background
--message-button-focus-text
--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style
Agent virtuel post-session
--post-session-background
--post-session-padding
