How to Create a Chat Widget for a Website

With SendPulse, you can create and add a signup widget to your website. This way, site visitors will be able to subscribe to your chatbots.

You can also pass custom variables and UTM tags when subscribing via a widget. Read more: How to pass custom variables when subscribing to a chatbot.

Create a Subscription Widget

Go to "Chatbots" in the "Signup widgets" tab and click Add widget.

Please note that you can only create a signup widget after creating at least one chatbot.

Add widget

Choose a Form Type

Select the form type: "Bar," "Floating," "Modal," "Embedded," "Button," "Chats," or "Checkbox." The right side of the screen shows what the selected type looks like

Please note that the "Chats" and "Checkbox" widgets are only available for Facebook Messenger.

Click Next.

Select a form type

Select Subscription Channels

With SendPulse, you can create a signup widget for Facebook, TelegramWhatsApp and Instagram, or individual platforms. To do so, enable the required subscription and select a chatbot from the drop-down list. Below the chatbot selection field, you can specify the flow that will be launched after someone subscribes.

Please note that the subscriber will be redirected to your Instagram page and not to private messages when clicking on the Instagram button.

Turned on subscription

Customize Your Widget Appearance

Widget setup parameters depend on the type of form you use. Forms such as "Bar," "Floating," and "Modal" allow you to specify text for the form header and request, background and text and color, button text and color, etc.

Settings for a floating form

You can also specify the display conditions for these form types. Specify the display and re-display delays of the widget. To hide the widget on mobile devices, activate the "Hide on mobile" option.

Settings for a floating form

For the "Button" type, you can specify the text, color and size of the button.

For Facebook buttons, you can select the text on the button from the options in the dropdown list, and also set the message for after someone subscribes.

Settings for a button widget

For the "Chats" type, you can specify the header, theme color of the chat and add the site address.

Settings for a chat widget


You will see all widget changes in real-time in the preview window to the right of the settings menu.

Widget preview

Save the Widget and Add the Code to Your Site

When everything is set up, click Save and get code. A window with code will open — click on the "Copy to clipboard" icon.

Copy widget code

Add the code to the desired place on your site.

The way you add the code may differ depending on the hosting service you use. Usually, you need to open the page block settings, where you need to insert the widget, add the HTML block, and paste the widget code into the code window. Then, save the settings and publish the web page.

    Rate this article about "How to Create a Chat Widget for a Website"

    User Rating: 4 / 5


    How to Сheck Your Сhatbot User Interaction Statistics


    How to Add Chatbot Subscription Widget Code to a Website Using Google Tag Manager

    Popular in Our Blog

    Try creating a chatbot for Facebook Messenger for free