# Website Chat How to add a live chat widget to any website With the webchat widget, you will be able to add a chatbot to any website without the dependency of any other channel. This will help you unlock the power of conversational marketing without the downsides or restrictions other channels might have. ### Where to find it To discover the webchat widget you will need to open your [**Omnichannel**](https://help.flochat.ai/connect-to-channels#omni-bot) bot and select the Webchat widget tab {% hint style="success" %} Please note webchat is only available under Omni-Channel. {% endhint %}

Great, now that you have selected the webchat widget you will now see your main editing pages as shown below. This is where you can configure your branding and so much more.

### Content The first section of the widget will be the content tab. Here you will find the following options; * [Chat Bubble](#chat-bubble) * [Chat Header](#chat-header) * [Conversation button](#conversation-button) * [Welcome message](#undefined) * [Out of office message](#out-of-office-message) * [Pre Chat form](#pre-chat-form) * [Default start flow](#default-start-flow) ### **Chat Bubble** With the chat bubble, you are able to select your preferred bubble icon. You will see that reflecting directly on the preview in the bottom right corner

Let's go ahead and add our own branded logo, this example we're using the Monday.com logo. You will also see the changes to the icon in the lower right side of the screen too.

Adding text with your icon {% hint style="success" %} If adding text to your chat bubble, be sure to make it intriguing. Not just a boring quote like chat with me. Make your website visitor take action. {% endhint %}

And this is what the result will look like. {% hint style="info" %} Note: If you cannot see the text in the display, don't panic... You can set up the font colour shortly under the [**appearance**](#appearance) tab {% endhint %}

### Chat Header Add your logo or a personalised image with a greeting message.

{% hint style="info" %} By default it already has our chatbot app logo and a basic greeting text message. Let's go ahead and make it look better {% endhint %} There are multiple media types you can use for your chat header image. So if you don't want to use a logo, maybe try an animated GIF 🕺

Great we have added an image to our header. Below the image tab you will see another tab called Header name. You can name this anything you want. Maybe a business name or even a catchy slogan. {% hint style="info" %} Later on in the section we will show you how to add more greeting text. **Note:** If using **welcome** text it will replace the header name. "Just in case you see it disappear" {% endhint %}

### Conversation Button With the conversation button, you can create your own call to action (CTA’s) buttons to allow users to start, continue or start a new conversation. Any edits will be updated automatically. If left blank, the defaults text will be used.

### Welcome Message You can add a welcome headline and tagline to get people to press on your webchat widget. Remember we mentioned if you use the welcome message it [removes the chat header title](#chat-header).

### Out Of Office Message With the out of office message you will be able to add a notification to your widget and set the reply message too {% hint style="info" %} The out of office message will display when you are offline {% endhint %}

### Pre Chat Form With this setting, you can capture essential data before the chat even starts and save this to any [system](https://help.flochat.ai/flow-builder/field-variable) or custom user field available.

Let's take a look at all the pre chat form settings below First of all you will have the form Header where you can state the purpose of this form. After you will be able to insert a field form by pressing the button **+ Add Field**.

You will then be able to select any of the following field types:

Once you are editing any of the fields you will have several options to choose from. Let’s take an email type field as an example

First of all, you can select the [**system**](https://help.flochat.ai/flow-builder/field-variable#system-field) or [**custom user**](https://help.flochat.ai/flow-builder/field-variable#create-custom-field) field you want to save the value given by the user to. Then you will be able to set the name of the form field label. Inside the placeholder, you will be able to give an example of the format you would like to receive the email in. The hint section will allow you to give additional information about this field type. The last two options will allow you to determine if the field is required and what width you want the field to be. As a result, it will then look like this

Once you have fully edited the field to your liking you can press the button **done** at the top of this field to save the changes. Lastly below the fields you will have an additional option to allow the user to write a message prior to entering the chatbot

And finally, this is how the pre-chat form will display 😊 ### **Default Start Flow** If the [pre-chat form](#pre-chat-form) is **not** enabled then you will be able to set a default starting [**flow**](https://help.flochat.ai/flow-builder) of your own choosing

Once pressed you will be able to select any of the flows you have created beforehand

### Settings Tab

Inside the settings tab you will have the following options to customise: * [Language](#undefined) * [Notification Sound](#notification-sound) * [Features](#features) * [Whitelist Domain](#whitelist-domain) Let's dive a little deeper in the settings tab ### Language With the language setting you can change the display language of a few sections inside the widget. Just select the language on the left-hand side and you will see the changes reflected in the preview on the right instantly. Below we changed the language to display French. As you can see some of the text components have automatically updated.

### **Notification sound** With this option, you will be able to set up your sound for new message notifications your users will hear when in conversation with your webchat widget. You can also mute if required.

### **Features** You will have access to the following options; * **Allow Emoji Picker** -› let users pick from pre-set emojis * **Allow Upload Attachments** -› let users upload documents, images and or videos * **Allow users to end chat** -› this option will allow the user to close the chat conversation. * **Allow popup Chat Window** -› this allows users to change the chat widget into a pop up which results in a bigger display of the chat * **Allow to Continue Chat in Mobile** -› Users can scan a qr code to continue the conversation on their phone. Smooth experience if they start on a computer and want to continue the conversation with your business while being in the road

### **Whitelist domain** {% hint style="success" %} In order to display the widget on your website, you will need to whitelist your domain. You only have to add your root domain and all subdomains that you may have will automatically be recognised. {% endhint %} ### Channels

Channels enables you to take your website visitors to chat on their favourite messenger channel. Select your channels, add the styling components and you are done. {% hint style="success" %} Make sure you have already added your channels to your existing chatbot {% endhint %} ### Appearance With these options, you are able to customise your webchat to match your brand colours and preferences

You have the following options to choose from; * [Theme ](#theme) * [Font](#undefined) * [Colours](#colours) * [Start Chat Button](#undefined) * [Quick Reply Button](#undefined) ### Theme With themes you are able to customise the visual appearance of your webchat widget with pre-set values

The great thing about these themes is that they give a look and feel that users are already familiar with like when using Messenger of WhatsApp. These themes will create a similar chat experience directly with your visitors. ### Font With fonts you can totally change the appearance of the webchat widget by matching it to your own brand, or to create a really unique experience.

### Colours

Keep your chat widget on brand with multiple colour styling options to choose from.

### Start Chat Button With this option you can change the border radius of the button “start conversation” or choose the option custom to add your own radius instead. It will help you keep things in sync with your own website buttons.

### Quick Reply Button A great way to really show your brand off or even being a little quirky with your design. Is to style your quick reply buttons. If you are not sure what quick reply buttons are click [**here**](https://docs.sendly.co.uk/flow-builder/steps/steps#facebook-send-message) Quick reply buttons are designed to help your visitor navigate to what they want FAST!

### Display Style

The display style option will give you multiple ways of using the webchat on your website. Let’s take a look at the different options #### **Style** You have 4 different styles to choose from as to how you would like to use the webchat channel on your website. * Floating Modal -› which will give you the live chat icon on the bottom on your page * Full Page -› allowing you to embed the chat widget as a full page instead * Embed Chat Window -› allows you to display the chat window anywhere on your page * Popup Modal -› Allows you to pop up a window with the conversation with your chatbot. Anything on your page can be the trigger as long as you apply a class to it. The best part of it is that, for the same website, you can actually install different style of web chat on different pages. {% tabs %} {% tab title="Floating Modal" %}

{% endtab %} {% tab title="Full Page" %}

{% endtab %} {% tab title="Embed Chat Window" %}

{% endtab %} {% tab title="Popup Modal" %}

{% endtab %} {% endtabs %} #### Design With the design tab, you will be able to set the conversation widget settings of the style of widget that you selected. Below is an example of a floating Modal moved to the left side.

### Install Code The install code will generate your script of the desired style of chat widget you want to put live on your page it will look something like this 👇

### Advanced Chat Functions Trigger dedicated chatbot flows depending on what website page, landing page or even funnel steps that your web visitors are viewing. #### Simplified {% embed url="" %} #### Advanced {% embed url="" %}