Free WhatsApp Chat Widget for Website

Hey, if you are looking for a free WhatsApp chat widget for your website that opens the direct WhatsApp chat and includes the page URL/title from which the user is messaging, you are in the right place.

Our tool is here to help you. You can Generate a WhatsApp Chat Widget and button code For Free to add to your website. You can generate a completely Free WhatsApp Chat Widget for any Website. This code is compatible with any kind of website made with any CMS which allows you to insert HTML code inside the website’s header.

It’s just 3 step process taking a few minutes only. Step 1 is to Customize the WhatsApp Chat Button (WhatsApp icon that opens up the chat widget) — and Step 2 is to Customize the Widget (containing your chat agent/brand image, reply time, and direct chat button with pre-filled page title/URL to let you know which page the user is messaging from) to align with your branding. After customizing, you generate the code in Step 3. You must copy and paste/place that generated code inside the website’s header.

3 Steps to Generate WhatsApp Chat Widget

Step 3: Generate Chat Widget Code

Before pressing this button, please ensure you have filled in all your details above.

Features of Free WhatsApp Chat Widget

• Custom Branding: Add your business or brand name and logo.
• Direct Chat Integration: Open WhatsApp chat with a predefined message when users click the widget.
• Custom Status: Set a custom status below the chat button (e.g., “Replies within 24 Hours”, “Available”, or “Away”).
• Dynamic Page URL & Title: Automatically pass the current page URL, TITLE into the chat message.
• Widget and Button Colors: Customize background and text colors to match your website’s theme.
• Responsive Design: The widget is optimized for both desktop and mobile views.

Explanation of all 3 Steps

If you are facing any problem with any step, here is the explanation of every field for your help. Here I am explaining every field that should you fill in and how will it show up in the chat button or widget. Let’s understand each detail step-by-step or you can jump to any part using the content table below.

Step 1: Chat Button Settings

Let’s understand and design your WhatsApp Chat button with your customized settings. Have a look at the below button and keep in mind for a while, we’ll customize it now…

i) Button Background Color

The default button colour is WhatsApp’s brand colour #4DC247 (Shade of green), but you can choose any of your colours for the button. Choose any colour from the colour picker or enter any custom HEX code.

For your convenience, we have added 10 palettes you can also choose one.

ii) Button Text

The Button Text will be visible with the WhatsApp icon. (e.g. WhatsApp Us)

iii) Border Radius

Border Radius is the roundness of the corners in px. 25 is the default setting. You can use your own if you want.

iv) Margin Settings & Position-Bottom

Choose Margin Settings accordingly for the Position-Bottom Left or Right Position of the button and how far it should be from the bottom.

Keep the left margin blank if you want to use the button on the right bottom
and the right margin blank if you want to use the button on the left bottom of your website.

25-30 is enough spacing for most of the cases but in case you have other elements like any other chat widget or go-to-top button, you can adjust with more bottom margin and test it on your website. e.g. I am using another chat widget so I made the bottom margin 100px to make the WhatsApp widget above the other widget.

Step 2: Chat Widget settings

Now Change your brand name/Chat agent name, brand subtitle, Brand/Chat agent Image URL and more…

Have a look at the below widget and keep in mind to relate with the elements we’ll learn to make changes.

Some fields are self-explanatory e.g. so we can cover them in short:

• Brand Name: Enter your website name or Chat agent name in this field (Here I am using my name ‘Munendra Singh”)
• Brand Subtitle: In this field, you can display the Agent role or reply time, online/offline status or anything
• Brand Image URL: Your website logo or agent profile picture. (Upload an image to your website media/hosting get the public URL and enter this field)

Now let’s understand further fields…

i) Welcome Message

Will be shown in the chat widget as a message from your brand/agent. You can see it in the above image (in the above widget image it is: Hi there! How can we help you?).

ii) Message Text (Pre-filled/Auto-written)

This Message text will be auto-written in WhatsApp chat by clicking the CTA Text / Start Chat button. (Further explained next…)

Additionally, you can use Page Link or Page Title parameters to include in the Message Text to recognize which page the user is messaging from.

iii) Background Color:

The background colour of the container box of Brand Color, Brand Subtitle, and brand Image. Enter the hex color code of you choice or choose from the 10 color palettes.

iv) CTA Text (Start Chat)

CTA (Call to Action) Text is the button text. Clicking on it starts the chatting box on WhatsApp instantly. You can further name it as per your landing page, or website need. e.g. Book a Demo, Request a Quote, Schedule a Call, or whatever suits you.

Border Radius: This border radius (corners roundness) is for the CTA Text button, 25 is the default value (as shown in the image) you can increase or decrease it as needed.

v) Auto Show/Hide

Check the Auto Show if you want the chat widget to remain open by default.

If unchecked, the user will see only the Chat Button (Customized in Step: 1), and when clicked on it, it will open the chat widget.

v) Phone Number

Enter your/business WhatsApp number Including your country code without (+).

If your business WhatsApp number is +91-123-456-7890

Correct Format: 911234567890

Incorrect Format: +911234567890

Incorrect Format: 1234567890

Step 3: Generate Code

This is the final step to generating a custom code of WhatsApp Chat Widget for your website. Click the button after entering all your brand details in the forms in Step 1 and Step 2.

Insert Chat Widget Code into your website

Now, you have successfully generated a customized WhatsApp chat widget for your website with your brand guidelines/colour scheme. It’s time to add it to your website. let me show you where to place this code on your website.

You need to Place the copied code inside the header of your website. If you are using WordPress CMS, there are many plugins to insert header/footer code. Almost all CMS provides an option to insert custom code into the header of the websites.

If you are using WordPress, you can use a plugin or add it manually to your theme’s header file (It is recommended only if you have some experience working with WordPress).

Need help to add Code in the Header of Your Website?

Check out the step-by-step guide on How to Add Header and Footer Code in WordPress

or you can contact us for any kind of assistance or website development/designing or maintenance-related work

Version History