# Customize chatbot appearance

Chizy lets you fully customize the look and feel of your chatbot so it matches your store’s branding. You can adjust colors, fonts, chat icons, messages, product drawers, and even add custom code for advanced personalization.

You can find the settings in **Chizy Admin > Settings > Appearance**

This section walks you through the five customization tabs: **General, Chat Icon, Chat Window, Quick View Drawer, and Custom Code**.

***

{% stepper %}
{% step %}

### General settings

Here you can set your chatbot’s overall style.

1. Go to **General** tab.
2. Choose a **color** for the chat button, header, and messages.
3. Adjust **font settings**:
   * Font for normal text (this includes text in chat message, product description)
   * Font for product name, price, and button labels.
4. Click **Save** to apply changes.

<figure><img src="/files/15B39bZ1h3pS1r2G32Jg" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Chat icon

This tab controls how your chat launcher looks on your storefront.

1. Go to **Chat Icon** tab.
2. Choose **Style** (icon only or icon + label). If you choose "Icon + Label" then the Label text field will show
3. Edit the **Label text** (e.g., “Support”).
4. Add an **Invitation Message** to encourage chats (e.g., “Need help? Ask me anything!”).
5. Select a **desktop and mobile position** (bottom-right or bottom-left), make change to side and bottom spacing if needed.

<figure><img src="/files/zKRlvlMYjebR9bhuXVJl" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Chat window

Customize what customers see inside the chatbox.

1. Go to **Chat Window** tab.

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

2. Set an **Agent name** (e.g., “Chizy Bot”). You may want to set an Agent name that relates to your brand.
3. Add a **Welcome message** (e.g., “How can I help you today?”).
4. Upload your **logo or icon** (JPG, PNG, GIF, WebP up to 2MB).
5. (Optional) Enable Pre-chat survey to ask visitor for their personal information (Email/name/phone)\
   \&#xNAN;*Note: The visitor can't skip the survey and if the customer is logged in, their information will be filled in automatically*

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

6. (Optional) Enable **Preset Questions** to suggest quick actions like “Track Order” or “View Shipping Policy.”
   {% endstep %}

{% step %}

### Add-to-cart mode

This tab controls how shoppers add AI-recommended products to cart — either via side panel or directly in chat. &#x20;

<figure><img src="/files/6Dl4YaKntRCEJTp6w7uO" alt=""><figcaption></figcaption></figure>

* Go to **Add-to-cart mode** tab.
* (Optional) Enable or disable the "Add to Cart" button for products recommended in chat.
* Choose **product recommendations style:**
  * In-chat shopping: Shoppers pick variants and quantity directly inside chat, continuing the conversation naturally.
  * Side-panel shopping: Shoppers view product details and select variants in a side panel instantly.
* Settings for the product recommendation style you chose:
  * For in-chat shopping: choose product options type:&#x20;
    * Button
    * Dropdown
  * For side-panel shopping:
    * Choose **Image Slider Type**:
      * *Slider + Thumbnails* (shows all product previews below main image).
      * Slider only (show images in a slider, saves space for product details in quick view.)
    * Choose **Product Options Type**:
      * *Swatches*
      * *Dropdown*
      * *Radio button*

<figure><img src="/files/4xHuXruklVHe09Gc4iy9" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Advanced

The **Advanced** tab allows you to control when and where the chatbot appears on your store, as well as apply custom styling or functionality.

#### *Hide Chat Bubble on Specific Pages*

You can choose to **hide the chat bubble** on selected pages of your store, based on device type (desktop or mobile).

**Steps:**

1. Under **Hide Chat Bubble on Specific Pages**, select either:
   * **Desktop Devices**, or
   * **Mobile Devices**.
2. Click **Add URL** and choose one of the following options:

* **Exact Address:**\
  Choose this option if you want to hide the chat bubble **only on a specific page**.\
  For example, enter the **full URL** starting with `https://` — the chat bubble will be hidden only on that exact page.
* **Address Contains:**\
  Choose this option if you want to hide the chat bubble on **multiple pages that share a similar URL pattern**.\
  For example, type `/collections` to hide the chat bubble on **all collection pages** across your store.

<figure><img src="/files/5EOFwfFGIBSLAXQv1bRx" alt=""><figcaption></figcaption></figure>

#### *Custom Code*&#x20;

Use this section to apply **Custom CSS** or **Custom JavaScript (JS)** to personalize the chatbot’s appearance and behavior.

**Custom CSS**

You can modify styles like colors, fonts, or layout.

**Steps:**

1. Go to **Custom Code** tab.
2. Under **Custom CSS**, paste your styling rules (e.g., change button color).

   ```css
   .chizy-product-btn-primary {
       background-color: red;
   }
   ```
3. Under **Custom JS**, paste scripts to add functionality. Example:

   ```javascript
   document.addEventListener('click', () => {
       console.log('Click test successfully');
   })
   ```

**Note:** Only use this **if you’re comfortable with coding**. For help, **contact us** via our live chat or email us at <support@chizy.io>.

<figure><img src="/files/WVDrv7moPJnhMyqONRm2" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# 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://docs.chizy.io/quick-setup-guide/customizing-chat-widget-appearance.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.