WhatsApp Chat Button Integration

Jair García Updated by Jair García

Adding a WhatsApp Chat Button to your website

You can easily add a WhatsApp Chat Button which is powered by WATI.io and connect it to your personal WhatsApp number. Also, have the chat widget all over your website with your brand name and logo.

Step By Step

  1. Click or paste this link in your browser. (https://www.wati.io/whatsapp-chat-button/)
  1. You can then see options on the right to customise, start with the background colour. You can choose from the palette or could also write the Hex Code of the colour.
  1. Next, you can type in your CTA (Call to action) Text which will be displayed on the chat button.
  1. Next, you can customise the dimensions of your button and also if you want to position it at the Bottom-Left of your website or Bottom-Right
  2. Continue to Chat Widget Settings.

Chat Widget Settings:

In the chat widget, it is all about the chat window. You can start by typing in your Brand Name. You can also review all changes in the chat button preview at the bottom of the page.

Once you fill everything which includes: (Refer to the image below)

  • Brand Name
  • Brand Sub Title
  • Phone Number With Country Code
  • Welcome Text
  • Default User Message
  • Brand Image URL
  • Background Color and CTA Text
  • Border Radius
  1.  Click the Generate Widget Code.
  1. You will see a code snippet, you need to copy the whole code by clicking the copy to the clipboard.
  1. Go to the main page of your website and open its HTML code.
  1. Now find the </body> tag and paste the code above it
  1. Run and check if you have your WhatsApp Chat Button!

Thanks

How did we do?

Zoho CRM Integration

Shopify Integration for TRIAL user

Contact