You want your chatbot to feel like a natural part of your website. The Widget Style section lets you customize the appearance of your chatbot to perfectly match your brand’s look and feel.

From the main navigation menu, click on Widget Style to get started.

screenshot_here (The main navigation menu with “Widget Style” highlighted)

1. Color Settings

This is where you can change the colors of the chat widget.

  • Header Background: Sets the color of the top bar of your chat window.
  • Bot Message Color: The background color of the messages sent by the bot.
  • User Message Color: The background color of the messages sent by the user.

We recommend choosing colors that align with your brand’s primary and secondary colors for a seamless look.

screenshot_here (The Color Settings section of the Widget Style page)

2. Widget & Icon

These settings control the appearance of the chat launcher button on your website.

  • Widget Position: Choose whether the chat icon appears on the bottom left or bottom right of your screen.
  • Chat Icon: You can choose from our library of pre-made icons or upload your own!
    • Pro Tip: You can upload an animated GIF to make your chat icon stand out.
  • Show Notification Badge: A red dot will appear on the chat icon to grab the user’s attention.

screenshot_here (The Widget & Icon settings section)

3. Header & Text

Customize the text that appears in the header of the chat window.

  • Header Logo: Upload your company logo to be displayed in the chat header for a professional touch.
  • Chatbot Name: The name displayed at the top of the chat.
  • Chatbot Tagline: A short, welcoming message that appears below the name (e.g., “We reply in a few minutes”).

screenshot_here (The Header & Text settings section)

4. General

These settings control the overall behavior and branding of the widget.

  • Show “Powered By”: You can choose to show or hide the “Powered by Riin Agency” branding.
  • Widget Language: Set the default language for the widget’s system text (e.g., “Type a message…”).

screenshot_here (The General settings section)

After customizing the style, be sure to click Save at the bottom of the page. Your changes will automatically apply to all the chatbots installed on your website. 🎉