Add the Chat Widget to Your Website

The Website Chat Widget lets you add live chat to your website, so visitors can reach your team while they browse.

After you install the widget, all conversations arrive in Flovoo, and you manage them with your other channels in one place.

Before You Start

Make sure of the following:

• You can edit your website code, because the code goes before the closing body tag or into your tag manager.
• The widget works on any platform, such as WordPress, Shopify, Webflow, and custom sites.

Step 1: Create the Widget

To create the widget:

1. Click Channels & Apps in the sidebar, then Apps.
2. On the Website Chat Widget card, click Connect.
3. On the Connect account page, click Connect.
4. Enter a Display name, which is the widget’s internal name in Flovoo (up to 65 characters), such as Main Website Chat.
5. Choose the Primary Color used in the widget interface.
6. Click Create Website Widget.

The widget is created, and you’re taken to the Channels page automatically.

Step 2: Open the Widget Settings

To open the settings:

1. Go to the Channels page.
2. Click your chat widget.

The settings page opens, with a live preview of any change you make.

Step 3: Set Up the Content

Open the Content tab, where you can edit:

• Display name: the name visitors see at the top of the chat window.
• Initial messages: the first message visitors see when they open the chat, such as: Hi there, how can we help you today?
• Suggested messages: up to 4 ready-made messages visitors can click to start the chat, which disappear after their first message.
• Language: the widget interface language (English, Arabic, or Turkish), and the text direction changes with the language.

When you’re done, click Save Changes.

Step 4: Customize the Style

Open the Style tab, where you can edit:

• Primary Color: used in the chat header, chat button, and messages.
• Logo: a JPG, PNG, or SVG image up to 1 MB, shown in the chat window header.
• Widget Position: Bottom Right, which suits Arabic websites, or Bottom Left, which suits English websites.

When you’re done, click Save Changes.

Step 5: Install the Widget on Your Website

Open the Embed Code tab, then:

1. Click Copy Code.
2. Open your website’s HTML file or template.
3. Paste the code just before the closing body tag.
4. Save and deploy your changes.

The chat widget appears on your website, and visitors can start a conversation right away.

How Do Conversations Reach Flovoo?

• Visitor messages arrive in Chats in Flovoo, and you reply in real time.
• If a visitor isn’t identified, they appear as an anonymous contact, such as Website Visitor #1234, and you can update their details later.
• You can edit the widget settings at any time without reinstalling the code.

To learn more about the widget, see Website Chat Widget Overview. To manage your channels, see Manage Channels.