É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 :

5. 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.

6. 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;
 background-image: 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_"

• "background-image: 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.)

Exemple:

4. 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.

5. Publiez vos modifications et voilà.

Afficher un onglet contact

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