# 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="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2Flzw7s0CZmfP0GlW4YK17%2Fimage.png?alt=media&#x26;token=59adef0c-c495-4b32-b379-d0d533579ddc" 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%2FGYIaOMYQeUiP8IVVbONB%2Fimage.png?alt=media&#x26;token=c0127a10-389e-491e-91fd-aaaddf4e6cd0" 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&#x26;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.