Use the widget generator below to create your WhatsApp Chat widget or button in just 5 minutes or less. Select a template and click the “Continue with this template” button to get started.
How to use the WhatsApp Chat widget Generator
- Choose a template from 10 WhatsApp chat widget designs. These are responsive, and you can customize the widget without coding. Once you have selected a preferred design, click the “Continue with this template” button.
- Add your WhatsApp phone number (Make sure to remove [+] or [00] before your phone number and add your country code) or the shortlink (if you use a WhatsApp Business Account)
- You can customize the WhatsApp Chat widget for your website by editing the chat bubble, chat header, and welcome message (you can add links and custom styles).
- You can set the WhatsApp Live Chat widget’s display conditions and open chat triggers. You can also set the chat widget’s schedule (open and closed days and hours).
- You can specify whether you want a WhatsApp button for your website or display the WhatsApp chat widget as a floating widget. It is under the ‘Position’ section of Settings. Select Embed Bubble for the WhatsApp chat button, which is embedded inline, and floating bubble for a floating WhatsApp chat widget.
- Under the ‘ Appearance ‘ section, you can change the appearance of your WhatsApp chat widget to align with your website’s theme and color palette.
- Once you have finished designing the WhatsApp Chat widget, click on the “Add to website for free” button and sign up on the following page to save your widget.
- Get the embed code and use it on your website.
How to add WhatsApp Chat widget to your website
You can easily embed the HTML code for your WhatsApp chat widget on your website. The steps vary depending on the type of widget.
- If you have created a WhatsApp Chat button, embed the HTML code for the button in the source code editor of your website where you want it to appear.
- To add a floating WhatsApp Chat widget to your website, insert the HTML code just before the closing body tag (
</body>) in your website’s template, theme, or source code editor. If you want the widget to appear on every page of your site, make sure to embed the code on each page. In the ‘Chat Display Settings’ of the WhatsApp widget generator, you can manage the widget’s visibility, specifying which pages, times, and devices the HTML WhatsApp widget should appear on your website.
How to Manage Your WhatsApp Chat Widget
Once you have created your embeddable WhatsApp Chat button for websites, you can easily manage it on your account. In your dashboard, search for “WhatsApp Chat” app under list of apps. As you can see from the following screenshot, you can create more WhatsApp Chat widgets, edit existing ones, and get HTML embed code.
