Comment modifier le CSS de la bulle de Chat?

Grâce au champ "CSS personnalisé" au bas de la section de configuration de l'application, vous pouvez saisir du code CSS. Copiez et collez simplement votre code CSS.

Comment changer la position de la bulle?

Vous pouvez modifier la valeur 60px par une autre valeur afin d'ajuster la position de la bulle.

#OJIAJ978617_coco-body { bottom:60px !important;} 
#OJIAJ978617_notification-bubble { bottom:130px !important;} 
#OJIAJ978617_chat-widget-container { bottom:130px !important;}

Comment changer la police de la bulle?

#OJIAJ978617_coco-body {
font-family: 'Arial' !important;
}

#OJIAJ978617_chat-widget-content button  {
font-family: 'Arial' !important;
}

Comment changer la taille de la bulle?

La largeur et la hauteur vont modifier la taille de l'icône WhatsApp.

#OJIAJ978617_whatsapp-icon { transform: scale(0.85);}
#OJIAJ978617_notification-bubble { transform: scale(0.85);}

Et un autre :

#OJIAJ978617_whatsapp-icon { width:42px !important; height:42px !important;} 
#OJIAJ978617_notification-bubble { transform: scale(0.85); margin-bottom: -10px !important; margin-right: -5px !important!}

Si l'en-tête de CoCo est toujours vide

#OJIAJ978617_coco-body {
z-index:1000 !important;
}
#OJIAJ978617_notification-bubble {
z-index:1000 !important;
}
#OJIAJ978617_chat-widget-container {
z-index:1000 !important;
}
#OJIAJ978617_chat-widget-header{
z-index:1000 !important;
transform: none !important;
overflow: visible !important;
}

Que faire si ma bulle CoCo est au-dessus d'un menu ?

Dans ce cas, vous devez ajuster le Z-index, qui détermine la profondeur de votre élément par rapport aux autres éléments du site web.

Je recommande d'essayer progressivement un Z-index de 1 puis de 2 pour voir si cela résout le problème.

Plus votre valeur de Z-index est élevée, plus l'élément apparaîtra devant les autres éléments. À l'inverse, si vous voulez afficher la bulle au-dessus de tous les éléments, vous pouvez définir un Z-index de 1000.

#OJIAJ978617_coco-body {
  z-index: 2 !important;
}

Mis à jour le : 02/04/2025