Customizing Your Chatbot's Appearance with Flowforge

Customizing the appearance of your chatbot can greatly enhance the user experience and align the chat interface with your brand. Flowforge allows you to 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 Flowforge'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

Before we dive into the customization, it's essential 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 located at the screen's bottom left corner.
Main Chat Widget: The window that opens when you click on the bot icon.

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

Customizing the Greet Me Banner

The greet me banner uses the .greetMe__banner ID. You can change the appearance of this banner by modifying the CSS. For example, you can change the positioning of the banner by modifying the right property.

Default Code

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

Modified Code

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

Customizing the Open/Close Widget

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

Default Code

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

Modified Code

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

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

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

Modified Code

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

Conclusion

Customizing your Flowforge 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@flowforge.com.