search
Roadmap

whatsappWhatsApp Widget

hashtag
WhatsApp Widget Integration

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

hashtag
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

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

hashtag
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

hashtag
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

hashtag
Complete Webpage Example

PreviousChat WidgetNextDashboard

Last updated

Was this helpful?