Adding Custom CSS to Chat Window

This section contains essential information and usage guidelines for applying advanced custom CSS to the AI Agent chat window inside BotPenguin.

What is Custom CSS?

Custom CSS allows you to apply advanced visual customizations to the chat window interface of your AI Agent. It enables precise control over layout, colors, spacing, and other UI elements beyond standard theme settings, helping align the chat experience with your website’s design system.

---

Benefits of Custom CSS

• 🎨 Enables advanced styling beyond default theme controls

• 🧩 Helps align chat UI with existing website branding

• 🔧 Offers granular control over chat window components

• 🚀 Supports enterprise-level UI customization needs

• 💡 Ideal for teams with frontend or design expertise

---

How to Use Custom CSS

Accessing Custom CSS Settings

1. Log in to your BotPenguin account and select the desired AI Agent.

2. Navigate to “Agent Settings”.

1. Open the “Advance” card.

2. Scroll down to locate “Custom CSS for Advanced Designs”.

---

Identifying Chat Window Selectors

1. Install the AI Agent chatbot on a test website (for example, using W3Schools).

2. Right-click on the chat window and select “Inspect”.

3. Use the element selector to identify:

   1. Relevant class selectors (.)

   2. Relevant ID selectors (#)

These selectors represent the chat window components you want to customize.

---

Writing Custom CSS for the Chat Window

1. Copy the required class or ID from the Inspect panel.

2. Paste it into Custom CSS for Advanced Designs.

3. Add your desired CSS properties inside curly braces { }.

Example:

#bp-chat-window {
  background-color: #f5f5f5;
}

If you want to reduce the extra whitespace that appears between the right side of the bot message box and the right edge of the chat window (especially on mobile screens), you can use the following CSS. This helps shorten the distance and makes the chat layout look more compact.

Add this CSS to your custom CSS or website stylesheet:

@media screen and (max-width: 600px) {
  #chatWindow {
    min-width: fit-content;
  }
}

This CSS ensures that on smaller screens (max-width: 600px), the chat window adjusts its width automatically and removes unnecessary empty space on the right side of bot messages.

1. Click “Save Changes” to apply the customization.

---

Verifying the Changes

1. Refresh the website where the chatbot is installed.

2. Confirm that the chat window reflects the applied styling changes.

🎉 Congratulations, you have successfully completed this section! You're one step closer to mastering BotPenguin.

---

Custom CSS FAQs

What parts of the chatbot can be styled using Custom CSS?

Custom CSS can be used to style chat window containers, message areas, headers, footers, and other internal UI elements.

Do I need coding knowledge to use Custom CSS?

Basic CSS knowledge is recommended. For complex designs, a frontend developer should assist.

Will Custom CSS affect the launcher icon?

No. Launcher icon styling is handled separately using Launcher Icon Custom CSS.

Can incorrect CSS break the chat window?

Yes. Invalid or conflicting CSS can impact layout or visibility. Always test changes first.

Is Custom CSS applied globally?

No. It applies only to the specific AI Agent where it is configured.

---

If you still have questions for our team, write to us at [email protected]. We’ll get back to you within 48 hours.