How to Trigger a Live Chat Popup with JavaScript

If you're looking to trigger a Live Chat popup from a custom link, image, or JavaScript event, this guide will walk you through the setup process. By leveraging our JavaScript API, you can have full control over when and where your chat popup appears, giving you the flexibility to match your website’s design and user experience.

Step 1: Use the JavaScript API to Open the Live Chat Popup

Social Intents provides a custom JavaScript API that allows you to trigger the chat popup with a single line of code. This can be called directly in your HTML or used in a script function. Here’s the code snippet to open the chat popup:  Here's a link to more about the  Developer API.

<script type="text/javascript">SI_API.showPopup();</script>

Step 2: Trigger the Popup from a Text Link or Image

To add the live chat popup functionality to a text link or image, you can use the following HTML structure:

For a text link:

<a href="#" onclick="SI_API.showPopup();">my live chat link</a>

For an image:

<a href="#" onclick="SI_API.showPopup();"> <img src="path/to/your-image.jpg" alt="Chat with us!"> </a>

When users click the link or image, the chat popup will automatically appear.

Step 3: Customize Chat Behavior by Hiding the Chat Tab

If you'd like to trigger the chat only through custom links or images (and not show the chat tab by default), you can easily adjust this setting in your app configuration:

  1. Go to your Social Intents app settings.
  2. Navigate to the Targeting tab.
  3. Set the following options:
    • Action: Select Always Show Tab, Show Popup on Match
    • After Time on Page: Set to Ignore

Trigger Live Chat Popup using Text Link

This setup will hide the default chat tab, so the chat is only activated through your custom link, image, or other JavaScript-triggered events.

Tip: You can keep the automatic popup enabled if you prefer. This setting works either way, allowing both manual and automatic chat triggers depending on your needs.This will hide the tab and the After Time on Page ignores any automatic popup.  You can keep the automatic popup if you like.  It works either way!

Learn More

For further customization and additional API options, you can explore our full Developer API documentation.

Related Articles