Tu peux ici importer ton logo, configurer le thème de ton webinaire et ajouter du CSS personnalisé à tes pages.
Logo
Pour importer un logo, suis ces étapes :
Clique sur « Account » dans l’angle supérieur droit.
Clique ensuite sur « My account » dans le menu déroulant.
Dans l’onglet « Webinaires », accède à « Branding » dans le menu de gauche.
Clique sur « Upload logo » et sélectionne le bon fichier.
Tu peux importer deux logos : un pour le mode clair et un pour le mode sombre. Le logo du thème clair sera visible sur la page d’inscription, la page de confirmation, la chaîne et dans l’angle supérieur gauche de la page du webinaire lorsque le mode clair est activé. Le logo du thème sombre n’est visible sur la page du webinaire que lorsque le mode sombre est activé.
À noter ! Le format SVG est recommandé pour garantir la meilleure qualité, quelle que soit la taille d’affichage du logo (tu peux également importer des fichiers .png transparents). Les fichiers image importés (.png) doivent mesurer au moins 70 pixels de haut.
Icône
Pour importer une icône, suis ces étapes :
Clique sur « Account » dans l’angle supérieur droit.
Clique ensuite sur « My account » dans le menu déroulant.
Dans l’onglet « Webinaires », accède à « Branding » dans le menu de gauche.
Clique sur « Upload logo » et sélectionne le bon fichier.
L’importation d’une icône est disponible avec l’offre Enterprise. Tu peux importer deux icônes : une pour le mode clair et une pour le mode sombre. L’icône du thème clair sera visible dans l’application de streaming mobile et dans le navigateur en tant que favicon lorsque le mode clair est activé. L’icône du thème sombre n’est visible que lorsque le mode sombre est activé.
Couleurs du thème
Pour modifier le thème de tes webinaires, suis ces étapes :
Clique sur « Account » dans l’angle supérieur droit.
Clique ensuite sur « My account » dans le menu déroulant.
Dans l’onglet « Webinaires », accède à « Branding » dans le menu de gauche.
Clique sur « Theme colors » et configure ton thème de webinaire par défaut ou les couleurs personnalisées du thème.
N’oublie pas de cliquer sur « Update webinar theme » pour enregistrer tes modifications.
Thème du webinaire
Tu peux ici définir le thème visuel par défaut de tes webinaires. Il s’applique aux pages sur lesquelles les participants assistent à ton webinaire. Par défaut, personne ne peut modifier le thème que tu choisis, ni les présentateurs, ni les modérateurs, ni les spectateurs, sauf configuration contraire de ta part.
À noter ! Si la case « All participants can toggle between light and dark mode. » est cochée, le thème par défaut de tes pages d’inscription et de webinaire dépendra des réglages de l’appareil du participant.
Lorsque la case « All participants can toggle between light and dark mode. » est cochée, les visiteurs peuvent utiliser un bouton pour passer du mode sombre au mode clair, et inversement.
Couleurs personnalisées du thème
Tu peux ici définir tes propres couleurs. Par défaut, nous utilisons ta couleur principale et ta couleur d’accentuation comme base. Nous les combinons pour créer un ensemble harmonieux grâce à la théorie des couleurs.
À noter ! Les modifications ne seront appliquées qu’après avoir enregistré. Vérifie que le thème personnalisé est activé, puis clique sur « Update theme colors ».
Tu peux aussi activer les couleurs exactes de ta marque en cochant « Use exact brand colors ». Tes couleurs principale et d’accentuation resteront alors exactement telles que tu les as saisies, afin que l’environnement du webinaire corresponde précisément à ta marque. Saisis les codes HEX exacts de ta couleur principale et de ta couleur d’accentuation, puis clique sur « Update webinar theme » pour enregistrer.
Pour activer cette fonctionnalité, vérifie que la case est cochée afin d’empêcher les visiteurs de passer du mode clair au mode sombre.
À noter ! Les couleurs exactes de ta marque peuvent rendre certains boutons, liens ou textes plus difficiles à voir dans certains thèmes.
Tu peux en savoir plus sur les thèmes de webinaire dans cet article.
Libellé des membres de l’équipe
Pendant tes webinaires, les membres de l’équipe du webinaire auront un libellé à côté de leur nom. Par défaut, « Team » est utilisé, mais tu peux personnaliser le libellé par défaut en suivant ces étapes :
Clique sur « Account » dans l’angle supérieur droit.
Clique ensuite sur « My account » dans le menu déroulant.
Dans l’onglet « Webinaires », accède à « Branding » dans le menu de gauche.
Fais défiler jusqu’à « Team label » et saisis un libellé de 20 caractères maximum.
N’oublie pas de cliquer sur « Update account » pour enregistrer tes modifications.
Le libellé que tu configures ici est utilisé par défaut pour tous les membres de l’équipe du webinaire, mais tu peux aussi ajouter des libellés individuels.
Libellés individuels des membres de l’équipe
Les propriétaires du compte peuvent attribuer des libellés individuels à différents membres de l’équipe du webinaire. Cette option est disponible lorsque tu ajoutes ou modifies un membre de l’équipe du webinaire dans un webinaire. Pour en savoir plus, consulte cet article.
CSS personnalisé
Pour ajouter du CSS personnalisé à tes pages, suis ces étapes :
Clique sur « Account » dans l’angle supérieur droit.
Clique ensuite sur « My account » dans le menu déroulant.
Dans l’onglet « Webinaires », accède à « Branding » dans le menu de gauche.
Ajoute du CSS personnalisé à tes pages pour leur donner une mise en page personnalisée. Cela s’applique à toutes les pages d’inscription et de visualisation.
N’oublie pas de cliquer sur « Update styles » pour enregistrer tes modifications.
Le CSS personnalisé est disponible avec l’offre Enterprise.
À noter ! Les possibilités du CSS personnalisé sont limitées. Par exemple, tu peux appliquer une autre police, mais les couleurs des éléments sont définies par nos soins. Les polices personnalisées ne s’appliquent actuellement pas aux formulaires intégrés.
Conseils, astuces et références :
Teste toujours tes pages après une modification.
Utilise la fonction @import pour charger des sources externes (https), telles que des polices.
Ne charge pas de styles pour les éléments interactifs tels que le lecteur vidéo, afin d’éviter des dysfonctionnements.
Pour savoir quels éléments sélectionner, utilise « Web inspector » ou « Developer toolbar » dans Chrome ou Firefox afin de cliquer sur les éléments et d’identifier leur sélecteur (par ex. « .logo-balk ») à cibler avec du CSS personnalisé.
Nous nettoyons le code CSS et supprimons le code indésirable. Si cela se produit, vérifie ta syntaxe et ta notation.
// set all font elements to the font family 'Verdana'
* { font-family: 'Verdana' !important; }
// set all fonts on any page to 'Roboto' and fallback to sans-serif if it is not available
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* { font-family: 'Roboto', sans-serif !important; }