Website Chat Widget Quick Start

Overview

The Website Chat Widget allows you to add live chat to your website so visitors can contact your team directly.

Once installed, all conversations are received and managed in Flovoo alongside your other channels.

Step 1: Create a Website Chat Widget

1. Go to Channels & Apps → Apps
2. Click Connect on the Website Widget

A setup window will appear:

• Display Name
  This is the internal name used in Flovoo (e.g., “Main Website Chat”)
• Primary Color
  This color will be used in the widget interface

3. Click Create Website Widget

You will be redirected to the Channels page.

Step 2: Open Widget Settings

1. Go to the Channels page
2. Click your Website Chat Widget

This will open the widget settings where you can customize it.

Step 3: Configure Content

Open the Content tab.
A live preview will update as you make changes.

Display Name

The name shown to visitors at the top of the chat widget.

Initial Message

The first message visitors see when they open the chat.
Use it to greet users or guide them (e.g., “Hi! How can we help you?”).

Suggested Messages

Quick message options shown at the start of the conversation.

• You can add up to 4 messages
• Each message is clickable
• They disappear after the visitor sends a message

Language

Select the widget language from the dropdown.

The selected language controls text direction:

• RTL for Arabic
• LTR for English

Click Save Changes after updating your settings.

Step 4: Customize Style

Open the Style tab.

Primary Color

Choose the main color of the widget.
It is applied to:

• Header
• Chat button
• Message bubbles

Chat Icon (Logo)

Upload a custom icon for the widget.
It will appear in both the chat widget header.

Widget Position

Choose where the widget appears on your website:

• Bottom Right (recommended for RTL languages)
• Bottom Left (recommended for LTR languages)

Click Save Changes after making updates.

Step 5: Install the Widget

Open the Embed Code tab.

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

Once added, the widget will appear on your website.

After Setup

• Visitors can start conversations directly from your website
• Messages will appear in your Flovoo inbox
• You can reply in real time

How Conversations Work

• Each message creates a new conversation in Flovoo
• If the visitor is not identified, they will appear as an Anonymous Contact (e.g., Website Visitor #1234)
• You can update their details at any time