How to add a popup WhatsApp Form

by

Below is an updated step-by-step tutorial tailored to your specific WhatsApp widget script: <script defer src=”https://widget.tochat.be/bundle.js?key=YOURKEY”></script>. This guide explains how to use the button code to trigger your custom WhatsApp widget and capture leads on your website.

<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>

Test it here:

Step-by-Step Tutorial: Adding a Button to Open Your WhatsApp Widget

Step 1: Understand the Purpose

The objective is to engage website visitors quickly and capture leads using your custom WhatsApp widget. By adding a button with the code, you can trigger the widget popup from anywhere on your page, making it easy for users to contact you via WhatsApp within seconds of arriving on your site.

Step 2: Install Your WhatsApp Widget on Your Website

Your widget script must be installed on the website for the button to work. Here’s how to add it:

  1. Use Your Widget Script: You’ve provided the script:html<script defer src="https://widget.tochat.be/bundle.js?key=YOURKEY"></script>This script connects to your WhatsApp widget hosted at tochat.be with a unique key.
  2. Add the Script to Your Website:
    • Open your website’s HTML file or the platform editor (e.g., WordPress, Shopify, etc.).Paste the script just before the closing </body> tag in your HTML code.Save your changes.
    Example:html<body> <!-- Your website content --> <script defer src="https://widget.tochat.be/bundle.js?key=YOURKEY"></script> </body>
  3. Verify Installation:
    • Refresh your website in a browser.
    • Look for the WhatsApp widget (typically a floating icon) to appear, often in the bottom-right corner.
    • If it doesn’t show, ensure the script URL and key are correct, and check your browser’s console for errors.

Step 3: Add the Button Code to Your Page

With your widget installed, you can now add the button to trigger the WhatsApp popup.

  1. Insert the Button Code:
    • Use the provided code: <button data-chatwith=”cw-open”>Booking</button>.Place it anywhere in your HTML where you want the button to appear (e.g., header, content section, or footer).
    Example:html<body> <h1>Welcome to Our Site</h1> <p>Need help? Chat with us on WhatsApp!</p> <button data-chatwith="cw-open">Booking</button> </body>
  2. How It Works:
    • The data-chatwith=”cw-open” attribute is recognized by your widget script (bundle.js) and triggers the WhatsApp popup when the button is clicked.
    • The text “Booking” inside the button is customizable to fit your call-to-action.

Step 4: Customize the Button (Optional)

You can modify the button’s appearance and text to align with your website’s design.

  1. Change the Button Text:
    • Update the text inside the <button> tags.
    • Example: <button data-chatwith=”cw-open”>Chat Now</button>.
  2. Add CSS Styling:
    • Assign a class or id to the button and style it with CSS.
    • Example:html<button data-chatwith="cw-open" class="whatsapp-btn">Booking</button>css.whatsapp-btn { background-color: #25D366; /* WhatsApp green */ color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .whatsapp-btn:hover { background-color: #20b356; }
    • Add the CSS to your website’s <style> tags or external stylesheet.

Step 5: Test the Button

  1. Preview Your Website: Load your site in a browser.
  2. Click the Button: Click the “Booking” button and confirm that your WhatsApp widget popup opens.
  3. Check Functionality: Ensure the popup connects to your WhatsApp number and allows users to initiate a chat.
  • Troubleshooting:
    • If the popup doesn’t appear, verify:
      • The widget script is loaded correctly (no 404 errors in the browser console).
      • The data-chatwith=”cw-open” attribute matches the expected trigger in your bundle.js script. If your widget uses a different attribute (e.g., data-tochat=”open”), consult your tochat.be documentation and adjust accordingly.

Step 6: Use with Elementor (Optional)

If you’re building your site with Elementor on WordPress, here’s how to integrate the button:

  1. Edit Your Page in Elementor:
    • Open the page in Elementor’s editor.
  2. Add an HTML Widget:
    • Drag the “HTML” widget from the Elementor sidebar to your desired section.
  3. Paste the Button Code:
    • In the HTML widget’s code field, enter:html<button data-chatwith="cw-open">Booking</button>
    • Save and update the page.
  4. Test It: View the live page, click the button, and ensure the WhatsApp popup appears.
  • Note: Ensure the widget script is already added to your WordPress site (e.g., via a header/footer plugin or theme settings) for the button to work.

Step 7: Explore Additional Options (If Available)

Your tochat.be widget might offer customization options like automatic popups, banners, or delays. To configure these:

  1. Visit Your Dashboard: Log in to your tochat.be account (or wherever you manage the widget with the key b56c9d7d-b14f-41fc-bafa-32c90a8efefd).
  2. Adjust Settings:
    • Check for options to enable the popup by default, add a delay (e.g., 3 seconds), or include a form.
    • Save any changes and test on your site.
  3. Button as a Manual Trigger: The button method described here gives you manual control, complementing any automatic settings.

Step 8: Deploy and Monitor

  • Deploy Across Pages: Place the button on key pages (e.g., homepage, contact page) to maximize lead capture.
  • Monitor Performance: If your tochat.be widget provides analytics, track how many users click the button and start WhatsApp conversations.

Notes

  • Your Script Specifics: The script <script defer src=”https://widget.tochat.be/bundle.js?key=b56c9d7d-b14f-41fc-bafa-32c90a8efefd”></script> uses defer, meaning it loads after the HTML is parsed, ensuring the button works as long as it’s placed before the script in the DOM or the widget is fully initialized.
  • Cross-Platform: This setup works on any platform (HTML, WordPress, Shopify, etc.) where you can add the script and button code.
  • Support: If the button doesn’t trigger the popup, confirm with tochat.be support that data-chatwith=”cw-open” is the correct attribute for your widget version.

With these steps, you can successfully use <button data-chatwith=”cw-open”>Booking</button> with your custom WhatsApp widget to engage visitors and capture leads effectively! Let me know if you need further assistance.

Leave a comment