Skip to content

Embed WhatsApp Widget

Turn your website visitors into WhatsApp conversations — right from your site. The Formware WhatsApp Widget lets you embed your form as a small popup widget that opens when users click the familiar WhatsApp chat icon.

Get the Embed Code Snippet

Open up a form and click Share to navigate to the Share tab. Here, in the Embed Your Form, click on the Chat Widget tab. You will see a code snippet that creates a floating chat-style button which opens your form in an iframe popup.

Copy WhatsApp embed code
Copy WhatsApp embed code

Add WhatsApp Widget to Your Website

Depending on your website platform:

  • Webflow / Framer / Wix: Paste this snippet inside a “Custom Code” or “Embed” block — usually before the closing </body> tag.

  • WordPress: Use a Custom HTML block (in Gutenberg or Elementor), or add it under Appearance → Widgets → Custom HTML.

  • Next.js / React / Vue: Add the snippet dynamically with dangerouslySetInnerHTML, or include the logic in a script tag inside your layout file.

You only need to add it once — the widget will appear automatically across all pages.

Add a custom script to handle Whatsapp integration

After adding the widget, Add this additional script tag in your document body

<script src="https://media.formware.io/widgets/formware-whatsapp-redirect.min.js">

This code snippet handles JavaScript events sent from the Whatsapp Widget to your website container that are required for smooth functioning of the Formware WhatsApp integration. The script is necessary because Formware and your website will be hosted on different domains, and thus most modern browsers otherwise block such events unless handled via JavaScript.

Test Your Widget

  1. Open your website.
  2. You should see the green WhatsApp-style button in the bottom-right corner.
  3. Click it — your form should appear as a popup chat window.
  4. Fill it out to test submissions in your Formware dashboard (and WhatsApp if linked).

Here's how the WhatsApp widget looks on the homepage of Formware:

WhatsApp Widget on Formware
WhatsApp Widget on Formware

Customize It (Optional)

You can personalize:

  • Button color → change background-color: #25D366
  • Position → adjust bottom or right values
  • Size → modify widget width/height

For example, to move the widget to the bottom-left, update:

bottom: 20px;
right: auto;
left: 20px;

That’s It!

Your WhatsApp Form Widget is now live 🎉

Start collecting leads, bookings, or inquiries — directly from your website visitors, with all responses synced to Formware and WhatsApp.