Toute personnalisation appliquée à l'interface utilisateur du widget du SDK Web au-delà de celles décrites ici n'est pas compatible et peut entraîner un comportement inattendu. Google vous 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 d'applications.
Lanceur d'applications
Icône Ouvrir
Icône Fermer
Icons
Si l'interface utilisateur du lanceur d'applications par défaut ne correspond pas à votre image de marque, vous pouvez personnaliser ses icônes 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 d'applications sont de 80px. Vous pouvez les modifier :
#ccaas-widget {
--launcher-size: 60px;
}
Personnalisation de la bordure
Vous pouvez personnaliser les options suivantes pour la bordure du lanceur d'applications :
- Couleur de la bordure
- Largeur de la bordure
- Ombre portée (augmentation ou réduction)
--launcher-border-color
--launcher-border-width
--launcher-shadow
Couleurs du lanceur d'applications
Par défaut, le lanceur d'applications 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 le personnaliser pour qu'il utilise 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 masquer le lanceur d'applications du SDK Web et choisir d'utiliser un déclencheur de chat proactif ou de démarrer le chat de manière programmatique. Vous pouvez masquer ou désactiver l'interface utilisateur du lanceur d'applications à l'aide de disableLauncher :
ccaas.config({
disableLauncher: true
})
Lorsque le lanceur d'applications 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 la color d'accentuation 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 incluent blue, green, purple, orange, yellow, gold et red.
Personnalisation de l'accentuation
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 :
#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
Outre les couleurs d'accentuation et la position, le widget du SDK Web 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 les 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 par défaut du texte.
--end-color: : couleur par défaut des boutons de fin (fin du chat, fin de la session de navigation partagée)
Icône de confirmation
Vous pouvez personnaliser l'icône de confirmation qui s'affiche sur différentes pages du SDK. 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 de manière précise la personnalisation des différents types de boutons. Le tableau suivant explique le comportement attendu lors de la personnalisation combinée de différents types de boutons.
| Personnalisations de boutons appliquées | Résultat |
| Aucune | 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/é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 de bouton général N'EST PAS spécifiée, le comportement par défaut est appliqué. |
| Personnalisations des boutons de menu
Personnalisations des boutons de boîte de dialogue |
Les boutons de menu s'affichent en fonction de la variable --menu-button.
Les boutons de 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 des boutons de menu Personnalisations des boutons de boîte de dialogue |
Les boutons de menu s'affichent en fonction de la variable --menu-button.
Les boutons de 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 de bouton général / menu / 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 ne possèdent 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 (inverses)
--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 des boutons 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 des boutons de menu
Boutons de boîte de dialogue
Par exemple, les fenêtres modales ou pop-up.
--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 de 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
Ignorer le 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 des bulles 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
