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.

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.

Add a WhatsApp chat button on your website

Q: 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.

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.

Create your 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:

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

Whatsapp

WhatsApp

Please enter a valid number.

Example: +4912345678960

WhatsApp pre-filled message (optional)

A message that will automatically appear in the text field of a whatsapp chat

WhatsApp QR code URL (optional)

The default URL will be used if not filled
Messenger

Facebook Page ID

Example: 460293400343848
How to get Facebook page ID
Instagram

Instagram

Example: user_name
Viber

Viber

Please enter a valid number.

Example: +4912345678960

Viber QR code URL (optional)

The default URL will be used if not filled
Line

Line

Example: http://line.me/ti/p/??????

Line QR code URL (optional)

The default URL will be used if not filled
Telegram

Telegram

Example: nytimes
SMS

SMS (only mobile)

Please enter a valid number.

Only for mobile! Example: +49123456789160

Step 2 - Customize your widget

Company logo

Insert your logo url (size 48px x 48px)

Greeting message

Greeting message color

#000

Green
Blue
Red
Grey
Purple
Pink
Custom

Position

Left

Right

Google Analytics

Track clicks in Google Analytics

Chat bubble size

Normal

Medium

Big

Display chat bubble

Everywhere

Only desktop

Only mobile

Choose standard chat bubble color

Choose chat bubble

Choose chat bubble
icon color

#FFF

Green
Blue
Red
Grey
Purple
Pink
Custom

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.

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

Solutions

WhatsApp Business API

WhatsApp Newsletter Software

Ads that click to WhatsApp / Lead Gen

WhatsApp Analytics, Tracking & Retargeting

WhatsApp Team Inbox

Integrations

WhatsApp for CRM

Free Chat Button

Resources

WhatsApp API

User Documentation

FAQ

Partner Documentation

Contact us

Partner Updates

Deutsch

Français

Italiano

Português

Español

Nederlands

Русский

简体中文

Indonesia

العربية