> For the complete documentation index, see [llms.txt](https://help.botpenguin.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.botpenguin.com/ai-agents/creating-ai-agents-in-botpenguin/customizing-the-launcher-icon.md).

# 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”**.

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FuP5YNSqfEM2uxrvClLu0%2Fimage.png?alt=media&amp;token=1f32917c-227c-464e-9bd9-14be621d660c" alt=""><figcaption></figcaption></figure>

3. Open the **“Advance”** section.

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FqXGrMfsDdsvXdg16RnRH%2Fimage.png?alt=media&amp;token=faee952c-5d9a-45d8-b390-2abc8ea2a808" alt=""><figcaption></figcaption></figure>

4. Scroll down to locate **“Launcher Icon Custom CSS”**.

***

#### Identifying Launcher Icon Selectors

5. Install the AI Agent chatbot on a test website (for example, using **W3Schools**).
6. Right-click on the launcher icon and select **“Inspect”**.
7. Identify the launcher element’s:
   1. **Class name** (use `.`)
   2. **ID name** (use `#`)

***

#### Writing Launcher Icon CSS

8. Copy the class or ID from the Inspect panel.
9. Paste it into **Launcher Icon Custom CSS**.
10. Define the desired styling properties.

**Example: Changing Launcher Icon Background Color**

```css
.botpenguin-launcher {
  background: black;
}
```

11. Click **“Save Changes”** to apply the styling.

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2F9tS1feZGCISCrm79MK6N%2Fimage.png?alt=media&amp;token=b02bcb29-0ecf-4ab8-b839-f47e6d2cd9ac" alt=""><figcaption></figcaption></figure>

***

#### Testing the Launcher Icon

12. Reload the website where the chatbot is installed.
13. 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

<details>

<summary>What elements can I customize using Launcher Icon Custom CSS?</summary>

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

</details>

<details>

<summary>Does Launcher Icon Custom CSS affect the chat window?</summary>

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

</details>

<details>

<summary>Can I hide the launcher icon using CSS?</summary>

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

</details>

<details>

<summary>Do I need to reinstall the chatbot after making changes?</summary>

No. A simple page refresh is sufficient.

</details>

<details>

<summary>Can I reuse the same launcher CSS across multiple AI Agents?</summary>

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

</details>

***

### Support Prompt

If you still have questions for our team, write to us at [**support@botpenguin.com**](mailto:support@botpenguin.com). We’ll get back to you within 48 hours.