Developer functions in website widget

WhatsForm exposes a set of JavaScript functions that let you programmatically control the widget. Use these to build custom interactions, trigger the widget based on user behavior, or integrate it into your existing UI.

Available Functions

whatsform.open()

Opens the WhatsForm widget. If the widget is already open, calling this again has no effect.

whatsform.open();

Example: Open the widget when a user clicks a button.

<button onclick="whatsform.open()">Chat with us</button>

whatsform.close()

Closes the WhatsForm widget. If the widget is already closed, calling this again has no effect.

whatsform.close();

Example: Close the widget after a form submission or when navigating away from a section.

<button onclick="whatsform.close()">Close Chat</button>

whatsform.toggle()

Toggles the widget between open and closed states. If the widget is currently open, it closes. If closed, it opens.

whatsform.toggle();

Example: Use a single button to open and close the widget.

<button onclick="whatsform.toggle()">💬 WhatsApp</button>

Usage Examples

Open on scroll

Trigger the widget when a user scrolls past a certain point on the page.

window.addEventListener('scroll', function () {
  if (window.scrollY > 1500) {
    whatsform.open();
  }
});

Open after a delay

Show the widget automatically after the user has been on the page for a while.

setTimeout(() => {
  whatsform.open();
}, 15000); // Opens after 15 seconds

Close after inactivity

let inactivityTimer;

function resetTimer() {
  clearTimeout(inactivityTimer);
  inactivityTimer = setTimeout(() => {
    whatsform.close();
  }, 30000); // Close after 30 seconds of inactivity
}

window.addEventListener('mousemove', resetTimer);
window.addEventListener('keydown', resetTimer);

Toggle with a custom floating button

Hide the default launcher and use your own styled button.

<script async src="https://whatsform.com/launcher.js" id="wf-widget" data-id="demo" data-message="Message on WhatsApp"></script>
<script>window.whatsformHideButton = true;</script>

<button class="my-custom-chat-btn" onclick="whatsform.toggle()">
  Need help?
</button>

Important Notes

• These functions are available only after the WhatsForm script has fully loaded. If you call them immediately on page load, they may not be ready yet. Wrap early calls in a timeout or listen for the load event.

• Pair these functions with window.whatsformHideButton = true if you want to fully replace the default launcher with your own UI.

• All three functions work with every WhatsForm widget type.