# Design

### Interactive Guide

{% embed url="<https://app.arcade.software/share/pxV686p1MKb1gcsbN1od>" %}

***

### What is the Design Section

The **Design section** in Website Chatbot Settings allows you to fully customize the visual appearance and layout of your chatbot and its landing page.\
You can adjust chat window styles, colors, fonts, icons, and landing page content to match your brand identity and create a cohesive experience for your website visitors.

Whether it’s choosing a chat window layout, updating your bot’s theme, or customizing the landing page header and description, the Design section ensures your chatbot looks professional, engaging, and aligned with your brand.

***

### Benefits of the Design Section

* **Brand Consistency:** Ensure your chatbot and landing page reflect your brand’s colors, fonts, and style.
* **Enhanced User Experience:** A visually appealing chat window encourages users to interact with the bot.
* **Flexible Customization:** Update chat window layout, theme, icons, and landing page content easily without coding.
* **Improved Engagement:** Custom call-to-action text, chat bubble styling, and landing page content drive visitor interaction.
* **Quick Updates:** Make changes to the bot’s look and landing page in real-time and save instantly.

***

### Guidance Video

{% embed url="<https://youtu.be/tk33WWLmRVY>" %}

***

To Customize the Website and Landing Page Bot, Please visit these pages:

{% content-ref url="design/customize-website-chatbot" %}
[customize-website-chatbot](https://partners.botpenguin.com/customer-platform-guidelines/bot-settings/website-chatbot-settings/design/customize-website-chatbot)
{% endcontent-ref %}

{% content-ref url="design/customize-landing-page-bot" %}
[customize-landing-page-bot](https://partners.botpenguin.com/customer-platform-guidelines/bot-settings/website-chatbot-settings/design/customize-landing-page-bot)
{% endcontent-ref %}

### Design FAQs&#x20;

<details>

<summary>Can I customize the chat window layout without coding?</summary>

Yes, the Design section provides a visual editor that allows you to select chat window styles, positions, and layouts without any coding knowledge.

</details>

<details>

<summary>How can I change the chatbot theme colors?</summary>

You can update the chatbot window, chat background, and landing page theme colors directly in the Design section.

</details>

<details>

<summary>Can I upload a custom bot icon or logo?</summary>

Yes, you can choose from preloaded bot icons or upload your own image to personalize your chatbot.

</details>

<details>

<summary>How do I customize the landing page content?</summary>

In the Design section, you can update the landing page name, header, description, toggle visibility for logos or headers, and add social media links.

</details>

<details>

<summary>Can I change the chatbot font style?</summary>

Yes, the Design section allows you to select a font style for the chat window and landing page text to match your branding.

</details>

<details>

<summary>Do I need to save changes manually?</summary>

Yes, after making any customization, click on **Save Changes** to apply updates to the chat window and landing page.

</details>

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://partners.botpenguin.com/customer-platform-guidelines/bot-settings/website-chatbot-settings/design.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.