How to modify the CSS of the Chat bubble?

Thanks to the "custom CSS" field at the bottom of the application configuration section, you can enter CSS code. Just copy and paste your CSS code.

How to change the position of the bubble?

You can change the 60px to another value in order to adjust the position of the bubble.

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

How to change the font of the bubble?

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

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

How to change the size of the bubble?

Width and Height will change the size of the whatsapp icon.

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

And another one:

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

If the CoCo Header is still blank

#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;
}

What to do if my CoCo bubble is above a menu?

In this case, you need to adjust the Z-index, which determines the depth of your element relative to other elements on the website.

I recommend gradually trying a Z-index of 1 and then 2 to see if it resolves the issue. The higher your Z-index value, the more the element will appear in front of other elements. Conversely, if you want to display the bubble above all elements, you can set a Z-index of 1000.

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

Updated on: 24/03/2025