Roadmap

WhatsApp Widget

WhatsApp Widget Integration

Add a floating WhatsApp chat button to your website with this simple guide.

Installation

  1. Open your website's HTML file in a text editor.

  2. Locate the </body> tag (usually at the end of your HTML file).

  3. Paste the following script right before the </body> tag:

<script src="https://api.dmchamp.com/v1/whatsapp-widget/NUMBER"></script>

  1. In the code above, replace:

    • NUMBER with your WhatsApp number

    • For example: for the number +1 555 123 4567, simply use: 15551234567

Adding a Custom Message

If you want a pre-filled message to appear when someone clicks the button:

  1. Use this code instead:

<script src="https://api.dmchamp.com/v1/whatsapp-widget/NUMBER/Your message here"></script>

  1. Example with a real number and message:

<script src="https://api.dmchamp.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

What You Get

After installation, you'll automatically see:

  • A green WhatsApp button in the bottom right of your website

  • The button stays visible while scrolling

  • The button works seamlessly on mobile devices

  • A subtle animation appears when hovering over the button

Additional Information

  • Your phone number can be written with or without:

    • Plus sign (+)

    • Spaces

    • Hyphens (-)

    • These will be automatically processed correctly

  • The message can contain spaces naturally

  • No additional files or installations needed

  • The button automatically adapts to mobile screens

Complete Webpage Example

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.dmchamp.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>
PreviousChat WidgetNextDashboard

Last updated

Was this helpful?