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 add the script code.
Important: If you list allowed websites, the widget will only appear on those domains. Ensure you type the domain names correctly before copying the code.
How to create a website widget
- Log in to your Flownally workspace.
- Go to the Settings tab.
- Go to the Website widgets section.
- Click on the Create widget button.
- The New widget page will open. On the right side, you'll see the Widget preview, which updates as you edit.
- In the General section:
- Provide a Name for the widget.
- Keep Show widget on chosen website turned on to display the widget on your website.
- Choose the Position on page.
- Choose the Button color that will be displayed when more than one channel is added.
- In the Origins section, provide Allowed websites where the widget can appear, one address per line. Leave the field empty to allow the widget anywhere the code is installed.
- In the Channels section, click on the connected channels that visitors can use in the widget. Use the arrow icons to change their order, or the x icon to remove a channel.
- Click on the Create widget button in the top-right corner. The page will refresh with the saved widget.
- In the Install code section under the preview, click on the Copy code button and paste the code before the closing
</body>tag on your website.
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. Also make sure Show widget on chosen website is turned on.