In this section, you'll learn how to personalize the look and feel of your chatbot widget. From adjusting colors and fonts to modifying layout options, you’ll be able to ensure your widget aligns perfectly with your brand and provides an engaging user experience.

The widget configuration in our app allows for significant customization. If you need to modify its appearance beyond the built-in options, you can override the CSS, though we do not recommend this. Our widget is not iframe-isolated, meaning CSS class names or behaviors may change unexpectedly, potentially breaking your customizations.

Instead, we suggest using your own graphics and the Widget JS API to create a custom widget that replicates the desired features.

Customizing the Chat Bubble

The Chat Bubble is the small icon at the bottom right of the screen that users click to open or close the widget. You can replace or hide it with custom CSS.

To hide the default chat bubble, use the following CSS:

#destygo_widget.your-custom-wrapper-class .cl-chatbox-toggler {
    display: none;
}

This will hide the default bubble, but the widget will remain available for interaction.

Creating a Custom Chat Bubble

1. Create the HTML Element:
   Add your own bubble anywhere on the page:

   ```html
   <div id="my-custom-toggler" class="my-custom-toggler-class"></div>
   
   ```
   

2. Link the Click Event:
   Use JavaScript to trigger the widget when the custom bubble is clicked:

   ```jsx
   document.getElementById('my-custom-toggler').addEventListener('click', () => {
       DestygoChat.ToggleChat();
   });
   
   ```
   

By following this approach, you can design and position your own chat bubble while maintaining control over its appearance and behavior.