Customizing the CSS: Styling Insighto.ai's Chat Widgets

Modified on Mon, 17 Jun at 12:11 PM

Customizing the appearance of your chatbot can greatly enhance user experience and align the chat interface with your brand.

Insighto.ai lets you personalize your chatbots so they reflect your brand’s identity. In this guide, we'll walk you through the process of customizing the CSS for Insighto.ai's chatbot widgets. You'll learn how to modify the Main Chat widget, the Open/Close widget, and the Greet Me Banner to create a cohesive and visually appealing chat interface.

Getting Started

1. Understanding the Components

Before we dive into the customization, it's important to understand the three main components of the chatbot that you can style:

Greet Me Banner: The initial bubble that appears at the start of the session to greet users.

Open/Close Widget: The bot icon is located at the screen's bottom left corner.
Main Chat Widget: The window that opens when you click on the bot icon.

2. Adding the Style Tag

To customize these components, you'll need to add a </style> tag in the HTML of your webpage where the chatbot is embedded. Here’s a basic example:

</style>
  /* CSS customizations will go here */

3. Customizing the Greet Me Banner

The greet me banner uses the .greetMe__banner ID. There are several ways in which you can change the appearance of this banner.

→Default Code

</style>
Description: Bubble which appears for some time at the start of the session on the webpage.  
.greetMe__banner {
  position: fixed;
  right: 1rem;
  bottom: 4rem;
  z-index: 200000;
  font-family: "Poppins", sans-serif !important;
  width: 250px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: 0.5rem;
  transition: all ease-in 300ms;
  background-color: #ffeb3b; /* Change to your preferred banner background color */
  color: #333; /* Change to your preferred text color */
  padding: 10px; /* Adjust padding as needed */
}

Look:

Now, let’s say you want to change the positioning of the greet me banner, moving it slightly towards the left. Below is the modified CSS for that:

→ Modified Code

</style>
Description: Bubble which appears for some time at the start of the session on the webpage.  
.greetMe__banner {
    position: fixed;
    right: 22rem;
    bottom: 4rem;
    z-index: 200000;
    font-family: "Poppins", sans-serif !important;
    width: 250px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 0.5rem;
    transition: all ease-in 300ms;
}

Look:

4. Customizing the Open/Close Widget

The open/close widget is represented by the #openCloseWidget ID. You can customize its appearance as well as change its positioning on the website w.r.t. the main chat widget.

→Default Code

</style>
Description: Bot icon at the bottom left corner of the screen. 
#openCloseWidget {
  position: fixed;
  z-index: 200000;
  right: 1rem;
  bottom: 1rem;
  border-radius: 34px;
  cursor: pointer;
  transition: all ease-in 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  background-color: #007bff; /* Change to your preferred icon background color */
  width: 50px; /* Change to your preferred width */
  height: 50px; /* Change to your preferred height */
}

Look:

Now, let's say you want to change the position of the open/close widget, bringing it towards the center of the screen. Below is the modified CSS for that:

→Modified Code

</style>
Description: The window that opens when you click on the bot icon.
#openCloseWidget {
  position: fixed;
  z-index: 200000;
  bottom: 1rem;
  border-radius: 34px;
  cursor: pointer;
  transition: all ease-in 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  right: 29rem;
}

Look:

5. Customizing the Main Chat Widget

The main chat widget can be styled using the #chatWidget ID. You can easily change the layout, background color, etc. to customize the chat widget as per your needs.

→Default Code

</style>
Description: The window that opens when you click on the bot icon.
#chatWidget {
  position: fixed;
  right: 1rem;
  bottom: 4.5rem;
  -webkit-box-shadow: 5px 0px 22px -5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 0px 22px -5px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 0px 22px -5px rgba(0, 0, 0, 0.75);
  border-radius: 0.8rem;
  z-index: 200000;
  background-color: #f5f5f5; /* Change to your preferred background color */
  border: 2px solid #333; /* Change to your preferred border color and width */
  color: #000; /* Change to your preferred text color */
}

Look:

Now, you want to change the layout of the main chat window. Below is the modified CSS that you can use to move your chat towards the left and add a border to it.

→Modified Code

</style>
Description: The window that opens when you click on the bot icon.
#chatWidget {
  position: fixed;
  bottom: 4.5rem;
  -webkit-box-shadow: 5px 0px 22px -5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 0px 22px -5px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 0px 22px -5px rgba(0, 0, 0, 0.75);
  border-radius: 0.8rem;
  z-index: 200000;
  right: 29rem;
  border: 5px solid;
}

Look:

Customizing your Insighto chatbot widgets with CSS is a straightforward way to ensure the chat interface matches your website’s look and feel. By following the steps outlined above, you can easily adjust the main chat widget, the open/close widget, and the greet me banner to create a seamless and engaging user experience.

For more advanced customizations or any additional queries, you can reach out to our support team at support@insighto.ai