How to create a Facebook chat widget for a website

Placing a chat widget on your website connects its visitors with the SendPulse chatbot.

A user must have at least one bot activated in their account to get access to chat widgets.

1. Log in to your SendPulse account and go to «Messengers» tab there.  Open «Signup widgets» menu in the left-hand panel and click «Add widget».

Add widget

2. Since you already have active bots there, pick the one you need to set-up the widget for in the drop-down list, and then pick a form type: fixed, button, floating, popup window, built-in, client chat.

Form type

In the right-hand side of the screen, you will see how the chosen form type looks like. 

Click «Next».

3. Edit the widget. Widget setup parameters depend on the form type.

Forms of such types as fixed, floating, pop-up window and built-in allow to specify text for the form header, text color, and its background color, as well as color and size of the button and its text: 

Form parameters

4. For «Button» forms users can set color and size of the button, as well as pick the button text in the drop-down list.

Button type

5. For «Chat» forms users specify header and add website address.

Chat type

Check the right-hand side of the screen to see how the form changes as you apply the settings:

Preview

Go to «Widget after subscribing» tab to set parameters of the button, which clients will see after they subscribe: button background color, text on the button and its color.

Widget after signup

When all is set to go, click «Save and get code» — a box with form code will open.

Click on «Copy to clipboard» icon to copy the widget HTML-code.

copy widget code

6. Place the widget where you want it to be on the web page. 

Ways to add the form on the page depend on the web hosting.  Usually, users go to the page settings, add an HTML block and insert the copied widget code there. After that confirm and save settings and publish the web page.

 

Rate this article about "How to create a Facebook chat widget for a website"

User Rating: 0 / 5 (0)

    Other useful articles

    Popular in Our Blog

    Try a free chatbot for Facebook Messenger