DASTRA
Français
Français
  • Introduction à Dastra
  • 🇪🇺Rappels utiles
    • Introduction au RGPD
    • Notions clefs du RGPD
      • Donnée personnelle
      • Registre des traitements
      • Analyse d'impact
      • Durées de conservation
      • Droits des personnes
      • Confidentialité dès la conception et par défaut
      • Mesures de sécurité
      • Violations de données
    • Gestion des risques
      • Définition des risques
      • Evaluation d'un risque
      • Risques sous-traitants
  • 👨‍💻Bien commencer
    • Mise en place
      • Les notions importantes
      • Créer et paramétrer un espace de travail
      • Créer et paramétrer les unités organisationnelles
      • Désigner un DPO
      • Ajouter une autorité chef de file
      • Inviter des utilisateurs
      • Gérer les rôles et permissions
      • Créer puis affecter des équipes
      • Questions fréquentes
    • Tutoriel
      • Etape 1 : La mise en place
      • Etape 2 : Cartographier vos traitements de données à caractère personnel et établir le registre
      • Etape 3 : Gérer les risques
      • Etape 4 : Prioriser les actions à mener
      • Etape 5 : Implémenter les processus internes
      • Etape 6 : Documenter la conformité
    • Support
      • L'assistant dastronaute
      • L'aide en ligne
      • Demande de support
      • Le processus de support client
  • ⚙️Les fonctionnalités
    • Tableau de bord
    • Généralités
      • Filtres avancés
      • Importer vos données (Excel, Csv)
      • Gestion des tags
      • Champs personnalisés
      • Assistant IA
      • Modèles email
      • 😇Foire aux questions
      • Discussions internes
    • Cartographie des données
      • Référentiels
    • Registre des traitements
      • Registre "Responsable de traitement"
      • Registre "Sous-traitant"
      • Etablissez votre registre
      • Exporter / importer le registre
      • Utiliser un modèle de traitement
      • Déclarer un traitement
      • Compléter un traitement
        • Général
        • Parties prenantes
        • Finalités
        • Actifs
        • Données et conservation
        • Personnes concernées
        • Droits des personnes
        • Destinataires
          • Transferts de données hors UE
        • Mesures de sécurité
        • Analyse d'impact
        • Documents
        • Récapitulatif
      • Créer des relations entre les traitements
      • Fraicheur des traitements
      • Partager le registre
      • Visualisation des données
        • Visualiser l'arborescence des traitements
        • Visualiser la cartographie des données du registre
        • Visualiser la carte des transferts
      • Questions fréquentes
    • Gestion de documents (GED)
      • Modèles de documents
    • Questionnaires et PIA
      • Créer ou modifier un modèle de questionnaire ou un PIA
        • Créer ou modifier un modèle de PIA
      • Planifier un questionnaire ou un PIA
      • Partager un rapport d'audit ou PIA
      • Supprimer un audit ou un modèle d'audit
      • Questions fréquentes
    • Privacy hubs
      • Créer un Privacy hub
      • Paramétrer votre Privacy hub
        • Page d'accueil et configuration générale
        • Questionnaires
        • Exercice des droits
        • Registre des traitements
        • Documents
        • Organigramme
        • Contacts
        • Sécurité
        • Apparence et design
      • Prévisualiser et partager votre Privacy hub
      • Collecter des projets de traitements, d'incidents, d'actifs ou de contrats
    • Contrats
      • Déclarer un contrat
      • Structure d'un contrat
      • Les documents
      • Les actifs
      • Les signataires
      • Utilisateurs associés
      • Signer le contrat
      • Intégration avec Docusign
      • Versionner le contrat
      • Revue régulière du contrat
      • Modèles de contrats dynamiques
    • Gestion des risques
      • Glossaire
      • Le processus de gestion des risques
        • 1. Identifier
        • 2. Evaluer
        • 3. Maîtriser
        • 4. Contrôler
        • Récapitulons
      • Comparaison Dastra / eBios RM
      • Associer un risque à un traitement
      • Questions fréquentes
    • Planification
      • Créez ou modifier une tâche
      • Créer ou modifier un projet ou une itération
      • Suivre, filtrer ou exporter les tâches
      • Personnaliser le workflow des tâches
      • Synchroniser avec d'autres calendriers
      • Questions fréquentes
    • Exercices des droits
      • Gestion des demandes d'exercices de droits
      • Formulaire de collecte de demandes
      • Intégration technique
      • Intégration de l'API
    • Violations de données
      • Documenter une nouvelle violation de données
      • Exportez vos violations de données
    • Cookies
      • Mise en place de la bannière
        • Etude préliminaire
        • Scannez les cookies déposés sur votre site Web
        • Classifiez les cookies par catégories de consentement
        • Les finalités des cookies
        • Configurez un widget de consentement aux cookies
        • Collectez les preuves de consentement cookies
        • Allez plus loin sur le consentement des cookies
        • En cas d'indisponibilité
      • Intégration technique
        • Fonctionnement de la bannière
        • Démarrage rapide
          • Wordpress
        • Gestion de la langue
        • Tester l'intégration d'un widget
        • Blocage des cookies
          • Blocage des iframes (twitter/youtube...)
          • Google Tag Manager
        • Design avancé
        • Gérer le consentement programmatiquement
        • Identification des utilisateurs
        • Applications mobiles
          • Applications hybrides
          • Applications natives
        • TCF 1.1/2.0
      • Conformité RGAA
      • Dépannage
    • Revue régulière (fraicheur)
    • Rapports personnalisés
      • Intégration dans les outils d'analyse de données (BI)
    • Systèmes d'IA
      • Etablir un registre des Systèmes d'IA
      • Analyse de risque et valeur ajoutée
      • Notice de transparence
      • Le référentiel des modèles d'IA
    • Configuration avancée
      • Rôles et permissions
      • Single Sign On (SSO)
        • SAML 2
        • OpenId
        • ADFS
        • Active Directory (MS Entra)
        • Okta
        • Problèmes connus
      • SCIM
      • Gestion des clés d'API
      • Notifications
      • Adresses emails de collecte
      • Intégrations OneDrive/Google Drive
      • Etapes de processus
      • Webhooks
      • Configuration du SMTP
      • Règles de workflows
      • Modèles de messages
      • Domaines emails
  • PARTENAIRES
    • Portail partenaire
  • 📄La documentation API
    • Liste des endpoints d'API
    • Cas d'usage de l'API
    • Configuration API
    • Authentification
    • API References
    • Intégrations via Zapier
      • Questions fréquentes
  • 🛡️La sécurité
    • Sécurité chez Dastra
    • Authentification forte
    • Qualité de nos services
  • Certifications
  • 🤖DIVERS
    • Foire aux questions
    • Problèmes connus
    • Notes de version
    • Webinaires
Propulsé par GitBook
Sur cette page

Cet article vous a-t-il été utile ?

  1. Les fonctionnalités
  2. Cookies
  3. Intégration technique

Design avancé

Ce guide vous expliquera comment modifier l'apparence du widget à l'aide de règles CSS simples

Intégration CSS

De manière à obtenir de bonnes performances d'affichage, le rendu du widget de Dastra se fait directement dans la page du site, dans le container avec l'id #dastra-widget

Il est possible de surcharger l'apparence du widget à l'aide de règles CSS simple.

Exemple basique :

/**Trigger button**/
.dastra-cw-trigger-button{
  background-image:url('data:image/png;base64,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')
}
.dastra-cw-trigger-button svg{
  display:none;
}

/**Modal container**/
.dastra-cw-container{
  border-radius:0;
  box-shadow: 0 0 50px rgba(0,0,0,.3);
}

/**Button in the footer**/
.dastra-cw-button {
  font-weight:bold;
}

/**Button view more**/
.dastra-cw-viewmore-button {
  border:none;
  color:red;
}

/**Title of consent category**/
.dastra-cw-collection-title {
  letter-spacing:1px;
  font-size:19px;
  font-weight:200;
}

Attention, certaines modifications sur le container du widget peut engendrer des effets indésirables.

Dernière mise à jour il y a 5 ans

Cet article vous a-t-il été utile ?

⚙️