> 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

### 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="/files/vUWlrub3CxMThfqbZGaf" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/sHn6Kwpa89UQsg7RLb5b" 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="/files/0IP1DVRiWUIZz8pCYtIO" 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.