# Customize Website Chatbot

The **Website Chatbot Customization** feature allows you to design, style, and configure your chatbot to match your brand and website aesthetics. You can control how it appears, behaves, and interacts with your visitors, ensuring a consistent and engaging user experience.

**How to Redirect to the screen:**

1. Click on Bots from left menu
2. Select any website bot.
3. Click on "Chatbot Design" option from the expanded side panel.

<figure><img src="/files/NXqtxeHAeV7VmQgC8aN2" alt=""><figcaption></figcaption></figure>

4. User will be redirected to website chatbot screen by default.

<figure><img src="/files/Ww1sjShfptP5irq9OjMf" alt=""><figcaption></figcaption></figure>

5. Automatically user will be on the Content tab.
6. To change the Theme and layout , user will need to switch the tabs.

### Content <a href="#theme" id="theme"></a>

1. Select the Content tab.
2. Enter your bot's name in "Bot Name" box.
3. Enter an inviting catch phrase that will make the user talk to bot in "Call to Action" box.
4. Toggle ON/OFF auto hide call to action. If ON select time in seconds after which it will hide.
5. Expand the more section.
6. Toggle ON/OFF to hide CTA Chat Bubble.
7. Select chat bubble background colour from the options.
8. Select chat bubble text colour from the given options.

<figure><img src="/files/rXCkYdGyFeA7aRIYtZhD" alt=""><figcaption></figcaption></figure>

### Theme <a href="#layout" id="layout"></a>

1. Select your chat window style from the given two options.
2. Select a bot icon from the options or upload from your device.
3. Select a chatbot window theme colour.
4. Select a chat background colour.
5. Select a font style for your chatbot.
6. Select Bot icon position.

<figure><img src="/files/DFUdeMqCL5JV2fAeRTeP" alt=""><figcaption></figcaption></figure>

7. Add the Custom CSS for Advance Designs and add the custom CSS for launcher icon.

{% content-ref url="/pages/h6yPb3rxKMXjBEdLq9xw" %}
[Adding Custom CSS to Chat Window](/ai-agents/creating-ai-agents-in-botpenguin/adding-custom-css-to-chat-window.md)
{% endcontent-ref %}

{% content-ref url="/pages/dEgPR0wDsMUHIY1f7UMm" %}
[Customizing the Launcher Icon](/ai-agents/creating-ai-agents-in-botpenguin/customizing-the-launcher-icon.md)
{% endcontent-ref %}

8. Click on save changes to upload the changes done.

<figure><img src="/files/RjOGzhMfZ6n3bbkrgVOd" alt=""><figcaption></figcaption></figure>

### Layout

1. You can select chat window positioning on web.
2. You can select chat window positioning on mobile.
3. You can select chat window size.
4. Click on "Save Changes" to save your customizations.

Here you can select the layout and positioning for your landing page

<figure><img src="/files/l0PIF4rFWXRvWl60qsxH" alt=""><figcaption></figcaption></figure>

***

### Need Assistance?

If everything is correct and you are still unable to move forward, write to us at <support@botpenguin.com>. We will respond back within 48 business 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/bots/website-mobile-app-bot/customize-your-bot-widget/customize-website-chatbot.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.