Website Chat Widget

Updated 1 year ago by Craig Cameron

Video Overview

The website widget is how you add chat to your website or landing page. It sits in the bottom right corner and there are several different options.

Once you click on the "Website Widget" from the list of options you will be presented with the following screen.

Here you will see a list of all your website chat widgets. You can have multiple widgets for different pages which really gives you the ability to personalize the experience for your users.

If you don't have any yet or you are ready to create a new one just click the blue button on the top right.

There are 4 steps that you can go through.

  1. Customize your chat widget icon

You can customize your chat widget a number of ways. You can change the color and if you can choose preview to see what the website widget looks like. You can also choose the shape, position and if you want a shadow or animation.

You also will choose on this page whether you want the OmniChat enabled. Clicking on this gives you the following options.

We recommend you keep the OmniChat enabled. This will automatically identify if a user is logged into Facebook or not and show them the appropriate chat widget. If you want to only show the Messenger icon or only the Webchat option then you can select those here as well.

  1. Set up Greeting

So there are three different types of greetings you can have.

  • Messenger Greeting
  • Webchat Greeting
  • Greeting Behavior

Messenger Greeting

The messenger greeting is when a user is logged into messenger. You can control what the message says when the user is logged in and when they are not.

Webchat Greeting

This is a preview of what your greetings will look like. Just click the option and the preview will show on the right side.

Greeting Behavior

You can choose if you want your greeting to always show always hide or pop up after so many seconds. We suggest trying each one to see which one your users respond to best.

  1. Choose a Dialogue for your website visitors

When a user actually clicks on the website chat widget the greeting they get will depend on what settings you have chosen here. You can choose a dialogue that you have already created or create a new one right from this screen. All the widgets you normally use to create a dialogue are available here.

  1. Choose when the chat icon will be displayed

Now that you have all the settings just about configured, it's time to choose where and when you want this chat widget to show. You can choose to have it show on the desktop or mobile and to first time visitors or returning visitors. Here is an example. Let's say you have a special offer you want to show only to first time visitors.You would could check that box and this would then only show to first time visitors. You would then have to create another chat widget and make that show to returning visitors.

You can also choose what pages this chat widget shows up on. This allows you to personalize the conversation based on where your users are at. You can even choose to turn off this chat widget during off hours. This is great for local businesses that don't want people messaging them during off hours.

  1. Install Customer Chat Widget

It's time to get this chat widget installed on your website.

There are a few steps you need to take to install your chat widget. You will need access to your websites code so if you aren't familiar with that you may need to talk to your web designer or email

The first thing you want to do is choose what type of website you have. Once you choose that you will see the button at the bottom where the arrow is change to the guide for installing the code on your specific website. You can share this with your web developer if you aren't able to do it yourself.

The next thing you want to do is type in your website address. Make sure you include the "https://" as it is required by Facebook.

Finally you want to copy the code and place it on your website or have your web developer do it.

If your chat widget is not showing up on your website after a few refreshes then use our Troubleshooting tool to see what might be wrong.

Troubleshoot your chat widget installation

This will give you some ideas about what may be wrong.

If all is working you can click the "Activate" button in the top right screen and users can start to interact with your new website chat widget.

Are you using Google Tag Manager on your site?

Google Tag Manager is the recommended (and easiest!) way to add the website chat widget to your website, no matter what content management system (CMS) or platform your website built with.

Learn how to install the code from the video above through Google Tag Manager.

NOTE: Some of the dashboard menu items have changed. Click here to view the video Menu Updates

Additional Installation guidelines

  • Installation for Shopify website here
  • Installation for Weebly Websites here
  • Installation for WiX websites here
  • Installation for LeadPages website here
  • Installation for Teachable website here

How did we do?