# How to create a website widget

# How do I create a website widget?

This article explains how to **create a website widget** with connected channels. Follow these steps to choose positions, colors, and channels for the widget. This allows visitors to message you directly from your site.

### In this article, you will learn how to

- **Create a website widget** with connected channels.
- Configure positions, colors, and active channels for a widget.
- Generate and copy the integration code block.
- Fix basic display configuration errors.

## Before you start

Before creating a website widget, make sure you have:
- **Admin access to your Flownally workspace**.
- At least **one active communication channel connected** to Flownally.
- **Access to your website source files** to remove the script code.

> **Important:** The widget will only appear on domains listed in your allowed websites field. Ensure you type the domain names correctly before copying the code.

## How to create a website widget

1. Log in to your Flownally workspace.
2. Go to the **Settings** tab.
3. Go to the **Website widgets** section.

![](/help-center/09-settings/03-website-widget/01-01-widgets-list.png)

4. Click on **Create widget** button.
5. The widget creator page will open. On the right side, you'll see a preview of the widget.

![](/help-center/09-settings/03-website-widget/01-02-create-widget.png)

6. Provide a **name** for the widget.
7. Choose the **widget position** on the page.
8. Choose the **widget color** that will be displayed when more than one channel is added.

![](/help-center/09-settings/03-website-widget/01-03-widget-general.png)

9. Provide **allowed websites**, where the widget can appear.

![](/help-center/09-settings/03-website-widget/01-04-widget-origins.png)

10. Choose which of your **connected channels** can be visible in the widget.

![](/help-center/09-settings/03-website-widget/01-05-widget-channels.png)

11. Click on the **Create widget** button right under the preview. The creator page will refresh with saved widget.

![](/help-center/09-settings/03-website-widget/01-06-new-widget-preview.png)

12. Click on the **Copy code** button under the preview and add the code to your website.

![](/help-center/09-settings/03-website-widget/01-07-widget-preview.png)

## What happens after creating a website widget?

After creating a website widget, the system generates a custom embed code snippet. You can paste this code into your external website files. Visitors can then select your connected messaging channels to start conversations directly from your pages.

## Troubleshooting

### Widget color does not update in the preview layout

This occurs because you only added one messaging channel to the setup. You must select more than one channel to display the multi-channel button with the customized color.

### Widget does not appear on my website

This happens because the live site domain does not match your allowed websites field. You need to open the widget settings and check the allowed domains list for typos.

## Related articles

- [How to remove a website widget](/settings/website-widget/remove-website-widget)