> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.bitbybit.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# How to add chat widget to your store

> Install the bitChat Chat Widget on Shopify or a non-Shopify site, then continue to the current widget setup pages for appearance and advanced settings.

Use this page to install the **Chat Widget** on your storefront or website.

If you need to configure widget behavior after installation, use the focused setup pages linked at the end of this article.

## Prerequisites

* You can open **bitChat > Chat Widget**.
* You have access to your storefront theme or website code.

## Step 1: Open Chat Widget

* Go to **bitChat**.
* Open [**Chat Widget**](https://app.bitbybit.studio/bitchat/chat-widget).

## Step 2: Install the widget on Shopify

* Click **Enable Now**.

  <img src="https://mintcdn.com/asmaraku/cHM4z2t-1XWdSut8/images/Screenshot2025-09-11135746.png?fit=max&auto=format&n=cHM4z2t-1XWdSut8&q=85&s=f122c43a16dd27ae8d64e8d17c074603" alt="Screenshot2025 09 11135746 Pn" width="984" height="366" data-path="images/Screenshot2025-09-11135746.png" />
* In the Shopify Theme Editor, search for **bitChat**.
* Enable **bitChat: Live Chat Widget app embed**.

  <img src="https://mintcdn.com/asmaraku/fCfppKrM9XhXXOBO/images/image-13.png?fit=max&auto=format&n=fCfppKrM9XhXXOBO&q=85&s=e82216bb05475126e44142aeddff99d0" alt="Image" width="2368" height="570" data-path="images/image-13.png" />
* Click **Save**.

  <img src="https://mintcdn.com/asmaraku/fCfppKrM9XhXXOBO/images/image-14.png?fit=max&auto=format&n=fCfppKrM9XhXXOBO&q=85&s=b3672457d20c7e4469e2894b2c001add" alt="Image" width="2364" height="1370" data-path="images/image-14.png" />

## Step 3: Choose the widget style

The current Chat Widget setup includes these styles:

* **Floating Widget**
* **Sidebar Panel**
* **Redirect Widget**

  <img src="https://mintcdn.com/asmaraku/fCfppKrM9XhXXOBO/images/image-23.png?fit=max&auto=format&n=fCfppKrM9XhXXOBO&q=85&s=5664c493688e2c1bb6d7fe3ff45b0b93" alt="Image" width="1464" height="550" data-path="images/image-23.png" />

After installation, continue with the focused setup pages for the style and settings you want to configure.

## Step 4: Install the widget on a non-Shopify site

* Add the widget script before the closing `</body>` tag of your website:

  ```text theme={null}
  <script
    src="https://storage.googleapis.com/bitbybit-main/widget/embed.js"
    data-widget-key="cmleotaz909qjl801m2gjqpy2"
  ></script>
  ```
* Save your site changes.

## Related articles

* [Chat Widget overview](/bitchat/chat-widget-overview)
* [How to set up chat widget appearance](/bitchat/how-to-set-up-chat-widget-appearance)
* [How to set up conversation starters in chat widget](/bitchat/how-to-set-up-conversation-starters-in-chat-widget)
* [How to set up automated handover in chat widget](/bitchat/how-to-set-up-automated-handover-in-chat-widget)
* [How to hide chat widget on specific pages](/bitchat/how-to-hide-chat-widget-on-specific-pages)