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

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 */

HTML

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 */
}

HTML

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

HTML

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 */
}

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

</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 */
}

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