Table of Contents

Customize and embed your WhatsApp Widget

Introduction

One of the best ways to get your users to interact with your WhatsApp bot is by adding a WhatsApp chat widget on a Landing page of your choice (depending on who your target audience is).

How to do it? Landbot makes it super easy by providing a Livechat widget function!

1. Open the WhatsApp integration section

  1. Click on the WhatsApp logo on the left dashboard
  1. Select your WhatsApp Channel
  2. Click on Growth Tools
  3. Click on Widget to Chat
    Here you'll find the setup for your Widget!

2. Editing your widget

Header Customization

Avatar

This is the image that will appear in the header.

You can either upload it from your computer or by using a public URL.

Welcome message

Enter the text that you want the user to see when they open the widget

Theme color

You can change the color by typing the color in the field.

For example, if you want your snippet to be Dark Green, you can type "darkgreen".

If you want a more specific color pallet, the header color can also be changed using HEX color code.

If you're not sure about the color code to use, you can find it on this page.

CTA Text

This is the text that will be shown in the call to action button:

Brand Name

This is the text that will show in the header of the widget:

Button rounded corners (px)

You can make the CTA button corners more or less rounded

A higher number will make it more rounded, a lower number will make it more squared.

Button Settings

Widget Background color

You can change the color by typing the color in the field.

If you want a more specific color pallet, the header color can also be changed using HEX color code.

If you're not sure about the color code to use, you can find it on this page.

Widget Button Text

Here you can write the Call to action text for the button.

It has a limit of 20 characters.

Embed it into your site

Once you have set up all the options described previously, you're ready to add your WhatsApp livechat widget to your landing page.

Copy and paste the snippet into the backend of your website and your users will easily be able to contact you on WhatsApp.

And that's all! Enjoy sharing your bot with the WhatsApp Widget!

How did we do?

How to Detect Visitors Browser

Modifying Embed Size

Contact