How to Add a Button to Your Website That Opens a WhatsApp Form Popup

by

In this tutorial, we’ll walk you through a new feature we’ve developed—one that many of you have been asking for: a button that opens a popup with a WhatsApp form on your website. Whether you’re using plain HTML or a CMS like WordPress with Elementor, this guide will show you how to set it up step by step. Let’s dive in!

We are creating a new video to explain how a user created a new version of this button.

View this video: https://youtu.be/J7NE3SRZoRE

What You’ll Achieve

By the end of this guide, you’ll have a button on your website that, when clicked, opens a popup containing a customizable WhatsApp form. This popup is powered by a widget, and we’ll show you how to configure it to suit your needs—whether you want a banner, a countdown timer, or just a simple form.

Screenshot

Step 1: Set Up the Widget as a Popup

  1. Create or Access Your Widget: Start by preparing the widget you’ll use. This could be a pre-existing WhatsApp widget or a new one you create in your dashboard.
  2. Enable Popup Mode: Go to the Design section of your widget settings. Look for an option called “Widget Popup” and activate it. This setting transforms your widget into a popup that can be triggered by a button.
  3. Customize the Widget: Add elements like a banner (optional) or a form. For example:
    • Add a banner for new or returning visitors to grab attention.
    • Include a WhatsApp form for users to fill out.
    • Adjust settings like position (e.g., right side of the page) and visibility.
    Tip: If you don’t want the banner, you can disable it later. We’ll cover customization options as we go.
Screenshot

Step 2: Add the Button Code to Your Website

  1. Get the Button Code: The button relies on a simple piece of HTML code that triggers the widget popup. You’ll find this code in our accompanying article (linked below). It looks something like this: html

<button
data-chatwith=”cw-open”
style={{
position: ‘fixed’,
bottom: ’20px’,
left: ’20px’,
backgroundColor: ‘#25D366’,
color: ‘white’,
border: ‘none’,
borderRadius: ’50px’,
padding: ’15px 25px’,
fontSize: ’16px’,
cursor: ‘pointer’,
boxShadow: ‘0 4px 12px rgba(0,0,0,0.15)’,
zIndex: 999,
}}
>💬 Chat</button>

  1. This is a generic code that works with any widget on your page—no custom tweaks needed!
  2. Insert the Code:
    • For HTML Websites: Paste the code wherever you want the button to appear (e.g., header, footer, or mid-page).
    • For WordPress (Elementor): Add an HTML block in Elementor, then paste the button code inside.
  3. Style the Button: Customize the button’s appearance (color, size, text) using CSS or your page builder’s styling tools.
Screenshot

Step 3: Test the Popup

  1. Check the Functionality: Load your webpage, click the button, and ensure the popup appears. It should display your configured widget (e.g., with a WhatsApp form or banner).
  2. Adjust Settings: If the popup doesn’t behave as expected, tweak the widget settings:
    • Disable the banner if it’s not needed (go to widget settings and turn it off).
    • Enable the form to open directly (in the widget settings, activate Open First Agent with Form).
    • Remove countdown timers or other features (under Design > Countdown, disable as needed).

Step 4: Customize the Popup (Optional)

The widget popup is highly flexible. Here are some options to explore:

  • Banners: Use pre-made templates (e.g., Black Friday, Christmas) or upload your own. Banners can be horizontal or square—choose what fits your design.
  • Form Behavior: Decide if the form opens immediately or after the user interacts with the popup.
  • Positioning: Keep the widget discreet (e.g., a small icon in the corner) or make it more prominent.
  • Auto-Open: Want the popup to load when the page does? In the widget settings, enable Load Widget Open on Page Load under advanced options.

Step 5: Use Cases and Examples

  • Multiple Buttons: Add the button code in different spots (header, mid-page, footer) to trigger the same popup.
  • Embedded Form + Popup: Insert the WhatsApp form directly on the page (via shortcode or widget settings) while keeping the popup button separate. Both can coexist!
  • WordPress Widgets: Use the button as a trigger for a standard widget (not in popup mode) to open it on demand.

Step 6: Test Across Platforms

This solution works universally:

  • HTML Sites: Add the code directly.
  • WordPress, Wix, Shopify, etc.: Insert the code wherever your platform allows custom HTML.
  • Mobile: Ensure the button and popup look good on smaller screens—scrolling should remain smooth.

Why This Matters

Unlike popular plugins like Contact Form 7, this approach gives you:

  • A built-in CRM to track leads.
  • A customizable editor for forms and popups.
  • Design flexibility without extra plugins.
  • Unlimited options to experiment with—no plan upgrades or hidden costs.

Whether you’re running a campaign, promoting an offer, or capturing leads, this button-popup combo lets you place calls-to-action exactly where you need them.

Final Tips

  • Experiment: Test different setups (popup vs. button vs. auto-open) to see what works best for your audience.
  • Resources: Check the full code and example page in the article linked below.
  • Feedback: Let us know how it works for you—we’re here to help!