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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.botpenguin.com/ai-agents/creating-ai-agents-in-botpenguin/customizing-the-launcher-icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.