Your AI Connector Docs

WhatsApp Widget

WhatsApp Widget Integration

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

Good to know. The WhatsApp Widget is a simple “click to chat” button — clicking it opens WhatsApp for your visitor so they can message you there. It does not bring messages into your Chats inbox or trigger the AI on its own. For an in-page AI chat experience embedded on your website, use the separate Chat Widget instead.

Just want a plain link or your own button? If you don’t want the floating widget and would rather link your own button (or a piece of text) straight to a WhatsApp chat, skip to Prefer a plain link or button? (wa.me) below. For an SMS equivalent, see Adding a Click-to-Text (SMS) Link.

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

The widget above gives you a ready-made floating button. But if you already have your own button (or a menu link, image, or piece of text) and just want it to open a WhatsApp chat with your number, you don’t need the widget at all — you simply link it to a wa.me URL.

The format is:

https://wa.me/NUMBER

Replace NUMBER with your full number in international format — digits only, no plus sign, spaces, or hyphens. For example, for +31 6 5801 5937 you’d use:

https://wa.me/31658015937

Pre-filling a message

To have a message already typed when the chat opens, add ?text= followed by your message:

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

Spaces in the message need to be written as %20 (this is just how links handle spaces).

Putting it on a button

Link any button to that URL — exactly the same way you’d link a button to any other web address. In raw HTML it looks like this:

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

In a website builder (Wix, Squarespace, WordPress, Webflow, etc.), add a button as usual and paste the wa.me URL into its “link” / “URL” field.

Want one short link that rotates across several numbers, remembers returning visitors, and tracks clicks? Use Short Links (under Settings → Channels) instead of a raw wa.me URL.