Documentation dydu
EnglishFrench
  • Un même logiciel, de multiples applications
  • Guide de première utilisation
    • Prise en main
    • Créer votre bot
    • Créer votre première connaissance
    • Créer et publier votre chatbot
    • Cas d'utilisation fréquents
    • Bonnes pratiques
    • Glossaire
  • Contenus
    • Connaissances
      • Gestion des connaissances
      • Gestion des thématiques
      • Types de connaissances
        • Réponse à une question
        • Réponse complémentaire
        • Réponse prédéfinie
        • Ciblage comportemental
        • Slot filling
      • Eléments de réponse
      • Accessibilité des réponses des bots
      • Arbre de décision
      • Commentaires
      • Tester le bot
      • Alertes qualité
    • Carte des connaissances
    • Groupes de formulations
    • Phrases générales
    • Langues / espaces
    • Conditions de contexte
    • Contenus externes
      • LLM : comment configurer chaque type de modèle ?
      • VertexAI Gemini
    • Galerie
    • Services Web
      • Exemples de configuration (REST)
      • Configurer l’OIDC sur keycloack pour un Service Web
      • Questions Fréquentes
    • Avancé
      • Scripts serveurs
      • Modèles de réponse prédéfinis
      • Variables
      • Déclencheurs de web services
      • Top connaissances
    • Outils
    • Import/Export de connaissances
  • Apprentissage
    • Conversations
    • Suggestions
    • Phrases incomprises
  • Statistiques
    • Exploitation
      • Important
      • Conversations
      • Visiteurs
      • Thématiques
      • Connaissances
      • Qualification
      • Avis des utilisateurs
      • Liens cliqués
      • Reformulations
      • Performance
      • Autres
    • Livechat
      • Conversations
      • Connaissances
      • Opérateurs
      • Satisfaction
      • Files d'attente
    • Base de connaissances
      • Formulations
      • Utilisateurs
      • Matches
    • Export
    • Configuration
  • Statistiques personnalisées
    • Rapports
    • Alertes
    • Configuration
      • Rapports
      • Exports
      • Sources prédéfinies
      • Alertes
      • Préférences
      • Annexe : liste des indicateurs
  • Livechat
    • Activer le livechat
    • Configuration de la base de connaissances
    • Livechat DYDU
      • Aperçu des interfaces
        • Interface opérateur
        • Interface manager
      • Configuration livechat DYDU
        • Configuration générale
        • Compétences
        • Files d'attente
          • Général
            • Mise en place de la file d'attente
          • Compétence
            • Mise en place de la file d'attente par compétence
            • Mise en place d'une connaissance avec la file d'attente par compétence
        • Capacité de l'opérateur
        • Paramètres de compte
    • Connecteur Livechat Genesys
  • Intégrations
    • FAQ
      • FAQ statique
      • FAQ dynamique
    • MetaBot
    • Actions javascript
    • Règles personnalisées du ciblage comportemental
    • Canaux
      • Chatbox
        • Intégration d'une chatbox dans une webview
      • Customisation avancée
        • Éditeur Css
          • Teaser
            • Modification CSS teaser
          • Header
            • Modification CSS header
          • Body
            • Modification CSS body
        • Éditeur JS Custom
        • Gestion des libellés
        • Intégrations possibles
      • Connecteurs
        • Teams
        • Meta
          • Messenger
          • Instagram
          • WhatsApp
          • Fonctionnalités et compatibilité META
          • Contrôle d'application Meta
    • LLM - IA générative
  • Préférences
    • SAML 2
    • OpenID Connect (OIDC)
    • Droits et utilisateurs
    • Bot
      • Général
      • Conversations
      • Questionnaires
      • URLs
      • Champ de recherche
  • Autres
    • Comment fonctionne votre bot?
    • Protection des données
      • Politique de gestion des cookies
    • Console des logs
    • Mots-clés spéciaux
    • Aspects techniques
      • Hébergement
      • Infrastructure
    • Sécurité
      • Informations générales
      • Usage des serveurs
      • Outils open source
      • Expiration session utilisateur
  • Développeurs
    • Référence API
      • Authentification
      • Boîte de dialogue API
      • Export des Conversations
      • Champ de recherche
      • Import/Export du bot
      • Import/Export Base de connaissances
      • API de statut du serveur
      • Accès aux APIS
      • Gestion des utilisateurs du BMS
    • Chatbox V5
      • Mise en place et intégration
  • Release Note
Propulsé par GitBook

Tous droits réservés @ 2023 dydu.

Sur cette page

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

  1. Intégrations
  2. Canaux
  3. Customisation avancée

Éditeur Css

Pour les profils avancés, il est possible de personnaliser le style CSS du chatbot directement à partir de cette section. Grâce à l'édition CSS, il est possible de revoir plus en détail l'aspect visuel du chatbot.

Personnaliser les icônes

En tant qu'utilisateur de Dydubox, vous pouvez personnaliser les icônes par défaut utilisées dans la chatbox web en surchargeant du code CSS dans l'éditeur CSS.

Vous avez 2 options :

  • changer la couleur d'une icône par défaut.

  • utiliser une icône personnalisée (en format d'image hébergée sur un site Web).

1. Changer la couleur d'une icône par défaut

Etapes à suivre :

  1. Ouvrez une configuration de chatbox web ("Multiplateforme") existante dans Dydubox ou créez en une nouvelle.

  2. Allez dans l'éditeur CSS de votre chatbox web.

  3. Collez les lignes de code suivantes dans votre éditeur :

    .NomIcone {
    color: CodeHexOuNomDeCouleurEnAnglais;
}
  • "NomIcône": ici, spécifiez le nom de l'icône que vous souhaitez personnaliser. Pour obtenir le nom, utilisez l'outil d'inspection de votre navigateur Web. Les noms d'icônes commencent toujours par "icon-chatbox_".

  • "color": vous pouvez soit spécifier le code HEX de la couleur souhaitée soit le nom de la couleur en anglais (rouge, bleu…).

Exemple :

  1. Cliquez sur « Appliquer » pour confirmer les modifications. Vous devriez pouvoir visualiser immédiatement les changements dans le bot de prévisualisation à droit de l'écran.

  2. Publiez vos modifications et voilà.

2. Utiliser une icône personnalisée

Etapes à suivre :

  1. Ouvrez une configuration de chatbox web ("Multiplateforme") existante dans Dydubox ou créez en une nouvelle.

  2. Allez dans l'éditeur CSS de votre chatbox web.

  3. Collez les lignes de code suivantes dans votre éditeur :

.NomIcône {
 background-position: center center;
 background-size: contain;
 content: url(UrlDeLaNouvelleIcône);
 width: 24px;
}
.NomIcône::before{
 display:none;
}
  • "NomIcône" : spécifiez le nom de l'icône que vous souhaitez personnaliser. Pour obtenir le nom, utilisez l'outil d'inspection de votre navigateur Web. Les noms des icônes commencent toujours par "icon-chatbox_"

  • "content : url(UrlDeLaNouvelleIcône)": collez entre parenthèses le lien de votre icône personnalisée en format d'image. (Nous recommandons le format png pour les sites Web.)

  1. Cliquez sur « Appliquer » pour confirmer les modifications. Vous devriez pouvoir visualiser immédiatement les changements dans le bot de prévisualisation à droit de l'écran.

  2. Publiez vos modifications et voilà.

Afficher un onglet contact

Si vous avez besoin d'afficher moins que les trois sections de l'onglet contact :

PrécédentCustomisation avancéeSuivantTeaser

Dernière mise à jour il y a 3 mois

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