Vous pouvez personnaliser la mise en page, le style, le contenu et le comportement de votre modèle de bandeau. Cela vous permet de créer une expérience qui correspond à l'identité visuelle et aux préférences de comportement de votre organisation.
[en] What is a Cookie Consent Banner?
[en] A Cookie Consent Banner is a pop-up that is displayed on websites that allows users to explicitly provide consent (e.g., accept or reject) to cookies that are available on the website.
Pour personnaliser un modèle de bandeau
[en] Banners can be customized and created in two ways. This article details creating and customizing your Banner through the Templates section of Cookie Consent. To learn how to configure a banner when scanning a domain, see Scanning a Website.
Dans le menu Consentement aux cookies, sous la rubrique Configuration, cliquez sur Modèles. La page Modèles s'affiche.
Cliquez sur le nom du modèle vous voulez personnaliser. La page Détails du modèle s'affiche.
Cliquez sur le bouton Navigateur Web de la Plate-forme.
[en] Click the Save button for each template section you configure.
Cliquez sur le bouton Enregistrer le modèle.
[en] For the changes to reflect on your site, the respective domain's production or testing script must be republished.
Modèle de page : Détails du modèle de bandeau
Mise en page
[en] This section allows you to select how the banner is positioned on your website.
Mise en page
Description
Options de position
Centré et arrondi
Permet d'afficher un bandeau aux coins arrondis au centre de la page.
Par défaut
Choix de bandeau
Permet d'afficher un bandeau qui présente les catégories des cookies de votre site et permet à l'utilisateur de configurer ses préférences.
Par défaut
Flottant
Permet d'afficher un bandeau sur toute la largeur de la page.
Bas
Haut
Flottant et plat
Permet de positionner un bandeau de demi-largeur sur un côté de la page.
Bas gauche
Bas droite
Flottant et arrondi
Permet de positionner un bandeau de demi-largeur avec des coins arrondis sur un côté de la page.
Bas gauche
Bas droite
Flottant avec bords arrondis
Permet de positionner un bandeau sur un tiers de la largeur de la page avec des coins arrondis sur un côté.
Bas gauche
Bas droite
Icône flottante arrondie
Permet de positionner un bandeau avec des coins arrondis et une icône au bas de la page.
Par défaut
Aucun bandeau
Permet d'afficher le centre de préférences sur la première couche sans bandeau.
Note
[en] If you do not want to display a modal when the user first visits your site and prefer to provide a link elsewhere for the user to update consent preferences, ensure you uncheck the Show Banner option in the geolocation rule.
[en] Additionally, selecting the No Banner layout option in the template does not have the same functionality as unchecking Show Banner in a geolocation rule.
[en] This section allows you to customize colors for buttons, text, and the background of the Banner, in addition to other styling options. You can also add a custom logo.
Note
[en] The recommended color contrast ratio is 4.5:1 for WCAG compliance. You will see a warning in the tool if the contrast ratio is below the recommended guidelines.
Champ
Description
Couleur des boutons Accepter et Refuser
Sélectionnez la couleur des boutons du bandeau.
Couleur du lien du bouton Continuer sans accepter
Sélectionnez la couleur du texte du lien Continuer sans accepter.
[en] Save Choices Button
[en] Select the color for the Save Choices button.
Couleur du texte du bouton
Sélectionnez la couleur du texte des boutons du bandeau.
Couleur du texte
Sélectionnez la couleur du texte du bandeau.
Couleur de l'arrière-plan
Sélectionnez la couleur de l'arrière-plan du bandeau.
Couleur du texte du lien
Sélectionnez la couleur du lien Politique de cookies.
Couleur de l'arrière-plan
Sélectionnez la couleur de l'arrière-plan.
Note
[en] Only applicable if you do not override Banner styling in the Preference Center.
Gérer les préférences de couleur des boutons
Sélectionnez la couleur du bouton Centre de préférences.
Note
[en] Only applicable if Cookie Settings is configured as a button on the Banner in the Content section.
Couleur du lien gérer les préférences
Sélectionnez la couleur du lien Centre de préférences.
Note
[en] Only applicable if Cookie Settings is configured to be a link on the Banner in the Content section.
Couleur de la bordure du focus
Sélectionnez la couleur de la bordure d'un élément sur lequel porte le focus.
[en] Category Container Color
[en] Select the color of the category container.
Note
[en] Only available for Banners with a Choices Banner layout.
[en] Category Style
[en] Select the display style of your categories, either Checkbox or Toggle.
Note
[en] Only available for Banners with a Choices Banner layout.
[en] Your Logo
[en] Click the Upload button to upload a custom logo image.
[en] The optimum size for a logo in the Banner:
[en] Height: 60px
[en] Width: 60px
[en] Supported file formats are PNG, JPG, and JPEG with a maximum size of 2MB.
[en] Company Logo Screen Reader Value (aria-label)
[en] Enter screen reader text for your custom logo.
[en] Remove Logo
[en] Click to remove your logo file.
CSS personnalisé
Ajoutez un CSS personnalisé pour plus d'options de personnalisation du bandeau.
[en] Click the Apply Custom CSS button to display custom CSS in your template preview.
Note
[en] Because there are regular updates to the Cookie Consent application, elements IDs used for CSS can change. OneTrust recommends testing custom CSS added in your template on a staging site before publishing a production CDN script.
[en] If Show other text is selected, enter the text for the Cookie Settings button.
Style du bouton de paramètres des cookies
Choisissez d'afficher les paramètres des cookies sous la forme d'un lien ou d'un bouton
Afficher le bouton Refuser tout
Activez cette option pour ajouter un bouton permettant de refuser tous les cookies.
Texte du bouton Refuser tout
Saisissez le texte de l'étiquette du bouton Refuser tout.
Afficher le bouton Fermer
Activez cette option pour ajouter un bouton permettant de fermer le bandeau.
Valeur du lecteur d'écran (aria-label)
Saisissez la valeur de l'étiquette aria du bouton Fermer.
Note
Les étiquettes aria sont des métadonnées pour les éléments de page sans texte. Lorsqu'un visiteur du site utilise un lecteur d'écran ou une technologie d'assistance similaire, l'étiquette aria est utilisée pour identifier l'élément.
[en] Continue Without Accepting link
[en] If Continue Without Accepting Link is selected, enter the text to display for the Continue Without Accepting link.
Note
[en] This option leaves the consent “as-is” based on the default consent model configured in the geolocation rules.
[en] Opt Out Signal
[en] Field
[en] Description
[en] Enable Opt-Out Signal Notification
[en] Enable the setting to display a notification on your cookie Banners and Preference Center that the opt-out preference signal has been honored.
[en] The notification will display if any of these three conditions are met:
[en] A user has explicitly opted out of any cookie categories in the Banner or Preference Center.
[en] Notification
[en] Enter the notification text to display to your end users.
Comportement
[en] This section allows you to configure different behaviors for the Banner.
Champ
Description
Focus du bandeau
Activez cette option pour définir le focus initial au chargement du bandeau à l'aide de l'une des options disponibles ci-dessous.
Focus initial - Bandeau
Sélectionnez cette option pour diriger le focus initial lorsque le bandeau est chargé dans le bandeau. Quand le bandeau est fermé ou que des actions sont faites sur le bandeau, le focus sera mis sur le corps de la page.
Focus initial - Lien, bouton
Sélectionnez cette option pour diriger le focus initial vers la politique de cookies ou le lien vers la politique de confidentialité au chargement du bandeau. Quand le bandeau est fermé ou qu'il y a eu interaction avec lui, le focus sera mis sur le premier élément tabulé.
Désactivez-la pour que le focus suive l'ordre naturel des éléments tels qu'ils apparaissent sur la page.
Réponse au bandeau obligatoire
Activez cette option pour empêcher l'accès au site Web jusqu'à ce que l'utilisateur accepte les cookies ou modifie les paramètres.
[en] Banner pushes down page
[en] Enable to insert the Banner above the page header instead of as an overlay.
Note
[en] Only available for Banners with a Flat layout and Top position.
Animation du bandeau
Sélectionnez une option d'animation pour déterminer l'apparence du bandeau.
Glisser vers l'intérieur
Apparition en fondu
Supprimer l'animation
Utilisation de tailles de police relatives
Activez cette option pour que la taille de police du bandeau et du centre de préférences soit relative à la taille de police définie dans le code HTML de base.
Pour gérer les langues du bandeau
[en] The Language field displays all languages that are available for a template. Only languages that are enabled for the template will appear in the selection menu.
[en] You can add additional languages for the banner and select from the Advanced Languages section to cover additional language HTML code options that may be used on your website. For more information on how OneTrust language detection can work on your website, see the Enable Language Detection on Scripts section in Publishing and Implementing Cookie Consent Scripts.
Note
[en] Only out-of-the-box OneTrust Banner text is automatically translated for applicable languages. Any custom text changes made to a template are not automatically translated to other languages. For these changes to translate, you must provide your own translations in the template.
Astuce
Dans le script de votre bandeau, vous pouvez définir des codes de langue à l'aide de traits de soulignement ou de tirets.
Exemple : fr-FR ou fr_FR.
[en] On the Cookie Consent menu, select Templates. The Templates screen appears.
[en] Click on the name of the template. The Template Details screen appears.
Cliquez sur le bouton Gérer les Langues. La fenêtre modale Gérer les langues s'affiche.
Cochez les cases correspondant aux langues que vous souhaitez activer. Vous pouvez sélectionner une nouvelle langue par défaut en cochant la case de la colonne Par défaut.
Note
Si vous souhaitez sélectionner les langues en fonction de l'emplacement, activez la fonctionnalité Afficher les options de langues avancées.
Cliquez sur le bouton Ajouter.
[en] Things to Know: Enhancing Banner Performance
[en] You can leverage the following configurations to potentially increase page load speed and improve Banner performance:
[en] Remove the banner load animation by selecting Remove Animation in the Banner Animation field. For more information, see Comportement.
