Your AI Connector Docs

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.example.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.example.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. Example with a real number and message:
<script src="https://api.example.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.example.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>