Customizing the Launcher Icon

This section contains essential information and usage guidelines for customizing the launcher icon of an AI Agent using custom CSS inside BotPenguin.

What is Launcher Icon Custom CSS?

Launcher Icon Custom CSS allows you to modify the visual appearance of the chatbot launcher button displayed on your website. This includes background color, shape, size, borders, and other styling attributes to ensure the launcher blends seamlessly with your website’s UI.

---

Benefits of Launcher Icon Custom CSS

• 🎯 Enables branding consistency for the chatbot launcher

• 🎨 Allows precise visual control over the launcher icon

• 🧩 Helps match launcher design with website aesthetics

• 🔧 Supports advanced customization beyond default options

• 🚀 Improves overall first impression and discoverability

---

How to Use Launcher Icon Custom CSS

Accessing Launcher Icon Custom CSS

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

2. Navigate to “Agent Settings”.

1. Open the “Advance” section.

1. Scroll down to locate “Launcher Icon Custom CSS”.

---

Identifying Launcher Icon Selectors

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

2. Right-click on the launcher icon and select “Inspect”.

3. Identify the launcher element’s:

   1. Class name (use .)

   2. ID name (use #)

---

Writing Launcher Icon CSS

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

2. Paste it into Launcher Icon Custom CSS.

3. Define the desired styling properties.

Example: Changing Launcher Icon Background Color

.botpenguin-launcher {
  background: black;
}

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

---

Testing the Launcher Icon

1. Reload the website where the chatbot is installed.

2. Confirm that the launcher icon reflects the updated design.

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

---

Launcher Icon Custom CSS FAQs

What elements can I customize using Launcher Icon Custom CSS?

You can customize the launcher’s background color, border, shape, size, and other visual properties.

Does Launcher Icon Custom CSS affect the chat window?

No. It applies only to the launcher icon and does not impact the chat window UI.

Can I hide the launcher icon using CSS?

Yes, but it is not recommended as it may prevent users from accessing the chatbot.

Do I need to reinstall the chatbot after making changes?

No. A simple page refresh is sufficient.

Can I reuse the same launcher CSS across multiple AI Agents?

Yes, the same CSS rules can be reused across agents if the selectors remain consistent.

---

Support Prompt

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