Customize and embed your WhatsApp Widget

Xandro Lopez Updated by Xandro Lopez

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 you WhatsApp integration section

  1. Click on the WhatsApp logo on the left dashboard
  1. Select your integration
  2. Click on LIVECHAT WIDGET
    Here you'll be able to edit various aspects of your widget

2.Editing your widget

Header Settings

Avatar Image

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 text

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

Header 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 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

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.

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.

How did we do?

2. WhatsApp Integration FAQ's

Contact