Whatsapp Widget HTML

by
Post Views: 94

Adding a WhatsApp widget to your website is one of the fastest ways to turn visitors into leads. Whether you built your site using plain HTML or generated a landing page with AI, adding a functional WhatsApp widget or embedded form takes less than two minutes.

In this guide, you’ll learn how to create and install both a floating WhatsApp widget and an inline WhatsApp form directly into your HTML website.

Why Use an HTML WhatsApp Widget?

  • Instant Lead Capture: Direct incoming inquiries straight to your WhatsApp and control panel.
  • No Framework Required: Works on pure HTML/CSS pages without needing WordPress, React, or complex frameworks.
  • Dual Display Options: Choose between a floating popup button or a dedicated inline form embedded on your page.
  • Automated Notifications: Get instant email and WhatsApp alerts whenever a customer fills out a form.

Option 1: Add a Floating Popup Widget

A floating widget stays visible at the corner of your page, making it easy for users to reach out from anywhere on the site.

Step 1: Copy Your Widget Script

Log in to your Chatwith dashboard, customize your agent or widget settings, and copy the provided script snippet.

Step 2: Open Your HTML File

Open your index.html file in your preferred code editor or hosting file manager.

Step 3: Paste the Code in the Header

Paste the widget script inside the <head> tag of your page:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    
    <!-- Paste your tochat.be Widget Code here -->

    <script defer src="https://widget.tochat.be/bundle.js?key=9eea9048-f347-4366-83a0-032875f14802"></script>

</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

Step 4: Save & Reload

Save your file and refresh your browser. The floating WhatsApp widget will now appear in the corner of your page.

Option 2: Embed an Inline WhatsApp Form

If you prefer an embedded contact form directly inside your page content rather than a floating button, follow these steps.

Step 1: Copy the Form Code

In your dashboard, select the Form option for your agent and copy the inline embed snippet.

Step 2: Paste the Code in the Body

Place the code inside the <body> tag, exactly where you want the form to appear on your page:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Us</title>
</head>
<body>
    <h2>Book Your Service</h2>
    <p>Fill out the form below to chat with us on WhatsApp:</p>

    <!-- Paste your Chatwith Form Code here -->

<script defer data-active  data-widget-type="group"
                        data-person="7eb1b34a-d1cf-4f10-b646-6da1acddf7d5" src="https://widget.tochat.be/bundle.js?key=9eea9048-f347-4366-83a0-032875f14802"></script><div data-active
                        id="whatapp-people-widget-7eb1b34a-d1cf-4f10-b646-6da1acddf7d5"></div>
                    
</body>
</html>

Step 3: Save & Preview

Save the file and refresh your page. The form will render directly within your layout, capturing user details before redirecting them to WhatsApp.

Pro Tip for Agencies

Managing multiple client sites? You can create unlimited widgets, manage all incoming leads inside a unified CRM, and white-label the dashboard under your agency brand to offer WhatsApp lead-generation as a service.

Leave a comment