Triggering the Helply Widget via Custom Button

To allow custom buttons (e.g., "Contact Us" button) to trigger the Helply widget, follow these steps:

Step 1: Update the Embed Script (Optional)

If you want to hide the default Helply trigger button, include the following embed script with the data-settings attribute set to {"hideTriggerButton": true}. This will hide the trigger button, and you can control when the widget is shown via your custom button.

If you don’t want to hide the button by default, you can skip this step.

Here is the updated embed script:

<script async data-agent='YOUR_AGENT_ID'
src='https://helply.com/helply-agent.js'
data-settings='{"hideTriggerButton": true}'></script>

Replace YOUR_AGENT_ID with your actual Helply agent ID in the embed script.

Step 2: Add Custom Button on Your Page

Add a custom button (e.g., a "Contact Us" button) in your website’s HTML:

<button id="contact-us-button">Contact Us</button>

Step 3: Add JavaScript to Open the Widget

To trigger the Helply widget when the custom button is clicked, use the following JavaScript code. This script checks if the widget is available and opens it when the button is clicked:

document.getElementById('contact-us-button').addEventListener('click', function() {
    if (window.helplyAgentWidget) {
        window.helplyAgentWidget.open();
    }
});

Step 4: Add JavaScript to Close the Widget

To close the Helply widget when another custom button is clicked, use the following JavaScript code. This script checks if the widget is available and closes it when the button is clicked:

document.getElementById('close-contact-us-button').addEventListener('click', function() {
    if (window.helplyAgentWidget) {
        window.helplyAgentWidget.close();
    }
});

How It Works

1. The embed script with hideTriggerButton:true hides the Helply trigger button.

2. The custom button triggers the window.helplyAgentWidget.open() method when clicked, causing the widget to appear.