How to add a WhatsApp Widget to your Website

With Donut.cx, you can add a WhatsApp Widget to your website that directs users to your WhatsApp API phone number. Initiate warm conversations with prospects and hesitant users by directly interacting with them on WhatsApp. 

To create a WhatsApp Widget, go to Settings → WhatsApp Widget.

First, select a widget style. You can choose to display the widget in one of two ways: 

1. WhatsApp Logo followed by text

2. Just the WhatsApp Logo

Note: If you go with style 1, edit the widget text using the "Text on widget" option. It is recommended to say something short and crisp here, such as "Talk to us" or "Chat with us". 

Select where you want to place your widget on your website using the "Widget Position" option. 

You can choose to place it either at the left bottom or the right bottom.  

You can see a preview of what your widget will look like on the right hand side. The preview will change dynamically as and when you make changes. 

WhatsApp lets you add a pre-filled message to the widget. This will automatically populate the message on the WhatsApp mobile app of the user when they click on the widget. Adding a pre-filled message nudges users to send a message to you immediately and helps avoid user drop off. For example, your pre-filled message on your homepage could say “Hi! Tell me more about <brand name>.” 

Once you are done, hit “Generate Code”.  This will generate a HTML code that you can copy and paste on to your website. 

Hit "Copy Code". 

Go to the homepage of your website and open the HTML code. Find the </body> tag and paste the code right above it. 

Note: If you make changes to your widget settings after it's live on your website, remember to copy and paste the updated code to reflect the changes you have made.