Integrate WhatsApp on your website with a Chat Button

Now you can integrate WhatsApp on your Website with a FREE chat button from 360dialog. You can also customize it to your liking and add as many chat applications as you like.

WhatsApp on your website, WhatsApp chat button for website
WhatsApp on website, chat widget creator to create a WhastsApp chat Button

More than just integrating WhatsApp on your website

Improve the user journey of your visitors and allow them to contact you through their favorite messaging solution. The widget creator from 360dialog allows you to add up to 7 messaging solutions to your chat button including:

whatsapp 360dialog
meta messenger 1 360dialog
instagram 360dialog
telegram 360dialog
viber 360dialog
line 360dialog
sms 360dialog

The live chat widget will help you generate more leads and it’s compatible with content management systems like WordPress, Webflow, Shopify, and Prestashop.

Generate More Leads and Sales in 3 Simple Steps

Step 1 - Choose as much messaging apps you want


Step 2 - Customize your widget

Position

Step 3 - Add the code to your website

We will send the code to your email.

Please note: By clicking "Get Code" you agree to this website's Privacy Policy.

Please enter a valid email.
Please fill in your messaging app ID's.

Copy and paste this code before the </body> tag on every page of your website.

Preview

 

Need help adding chat button on website?

Read our guides for installing the widget on HTML, WordPress and E-Commerce websites

HTML Website

After creating your Chat Widget input your email in the corresponding field under Step 3 and click “Get Code”. After you receive the code, copy and paste it before the </body> tag on every page of your website.

WordPress Website

Recommended  plugin:

Install the plugin “Head, Footer and Post Injections” and activate it. Go to Settings > Header and Footer. Paste your code under the section titled “BEFORE THE </BODY> CLOSING TAG (FOOTER)”.

Manual installation:

Got to Appearance > Theme file editor. Look for footer.php in the theme files. Paste your code right before the closing </body> tag.

Shopify Store

In your Shopify dashboard, go to Online store > Themes > Current theme. Click on “Actions” and then “Edit Code”. Look for theme.liquid on the list. Paste your code right before the closing </body> tag.

Webflow Website

To add the widget to a site created with Webflow, open your site in the Designer > open Page Settings and add your code before the </body> tag under custom code.

How to add WhatsApp

In Step 1, click on WhatsApp Icon if not highlighted by default. Type the WhatsApp number that you use for your Business. The pre-filled message is the text that is displayed on the WhatsApp website under the “Continue to Chat” button.

To display a popup message next to the WhatsApp Icon, you may want to add it in the Greeting message section under step 2. You can also display your logo next to the Greeting message by adding your logo URL, 48x48px PNG image.

How to add Meta Messenger

In Step 1, click on Facebook Messenger to add it. Then all you have to do is add your Facebook page ID which can be found by going to your Facebook page > clicking More in the menu below your Page name > About. Under More info, navigate to Page ID.

To display a popup message next to the Facebook Messenger Icon, you may want to add it in the Greeting message section under step 2. You can also display your logo next to the Greeting message by adding your logo URL, 48x48px PNG image.

How to add Instagram Direct Messenger

To add Instagram DM, click on Instagram Icon in Step 1. Then all you have to do is add your Instagram username.

To display a popup message next to the Instagram Icon, you may want to add it in the Greeting message section under step 2. You can also display your logo next to the Greeting message by adding your logo URL, 48x48px PNG image.

How to add Telegram

To add Telegram, click on Telegram Icon in step 1. Then all you have to do is add your Telegram username without the “@”. You can get your Telegram username by going to the Application > Settings > Username.

To display a popup message next to the Telegram Icon, you may want to add it in the Greeting message section under step 2. You can also display your logo next to the Greeting message by adding your logo URL, 48x48px PNG image.

How to add Viber and SMS

In Step 1, click on the corresponding Icon for SMS or Viber then add your business phone number.

To display a popup message next to the SMS or Viber Icon, you may want to add it in the Greeting message section under step 2. You can also display your logo next to the Greeting message by adding your logo URL, 48x48px PNG image.

Reordering Messenger Icons in the Widget

If multiple messengers added to the chat widget, you can change the order of the apps displayed in the widget by simply holding on the section of a specific app in Step 1 and dragging and dropping it up or down for reordering.