Skip to main content

Custom Widget Triggers: How to Open a Widget from a Custom Page Button

This guide explains how to trigger a Flametree chat widget from a custom page button using JavaScript. The widget is assumed to be embedded in the HTML of the page and is identified by a specific id (e.g., chat-widget). The goal is to simulate a click event on a specific button within the widget when a user clicks a custom button or link on the page.

Prerequisites​

  • Flametree widget is embedded in the page with a known id (e.g., chat-widget)
  • A custom button or link on the page that should trigger the widget
  • Basic understanding of JavaScript and DOM manipulation
  • Access to website's JavaScript/HTML editing capabilities

Requirements​

  • Flametree widget is embedded in the page with a known id (e.g., chat-widget)
  • A custom button or link on the page that should trigger the widget

Implementation Process​

Step 1: Identify the Widget Element​

The widget is embedded in the page using an id attribute. For example:

<div id="chat-widget">
<!-- widget content -->
</div>

Step 2: Locate the Button Within the Widget​

To trigger the widget, we need to locate and simulate a click on the last button in the widget. This is often the "Open" or "Start Chat" button.

const widget = document.getElementById('chat-widget');
const buttons = widget.querySelectorAll('button[type=button]');
const lastButton = buttons[buttons.length - 1];
lastButton?.click();

Step 3: Add a Click Listener to the Custom Button​

We can attach a click event listener to a specific button or link on the page. This is often done using document.querySelectorAll() to find the element and then attaching the event listener.

const links = document.querySelectorAll('a');
links.forEach(link => {
  if (link.textContent.trim().toLowerCase().includes('schedule a call')) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      // Trigger widget
    });
  }
});

Step 4: Trigger the Widget​

Inside the event listener, we find the widget and simulate a click on the last button:

try {
  const widget = document.getElementById('chat-widget');
  const buttons = widget.querySelectorAll('button[type=button]');
  const lastButton = buttons[buttons.length - 1];
  lastButton?.click();
} catch (err) {
  console.error('Failed to open chat widget:', err);
}

Complete Implementation Example​

Here's the full JavaScript code that combines all the steps:

<script>
window.addEventListener('DOMContentLoaded', function () {
  const links = document.querySelectorAll('a');
  links.forEach(link => {
    if (link.textContent.trim().toLowerCase().includes('schedule a call')) {
      link.addEventListener('click', function (e) {
        e.preventDefault();
        try {
          const widget = document.getElementById('chat-widget');
          const buttons = widget.querySelectorAll('button[type=button]');
          
          const lastButton = buttons[buttons.length - 1];
          lastButton?.click();
        } catch (err) {
          console.error('Failed to open chat widget:', err);
        }
      });
    }
  });
});
</script>

Advanced Customizations​

Targeting Specific Buttons​

Instead of using the last button, you can target specific buttons by their attributes:

// Find button by specific text content
const openButton = widget.querySelector('button[title="Open Chat"]');

// Find button by class name
const chatButton = widget.querySelector('button.chat-open-btn');

// Find button by data attribute
const triggerButton = widget.querySelector('button[data-action="open-chat"]');

Multiple Trigger Elements​

You can set up multiple elements to trigger the widget:

// Target multiple elements by class
const triggerElements = document.querySelectorAll('.open-chat-trigger');
triggerElements.forEach(element => {
  element.addEventListener('click', function(e) {
    e.preventDefault();
    openChatWidget();
  });
});

// Reusable function to open widget
function openChatWidget() {
  try {
    const widget = document.getElementById('chat-widget');
    const buttons = widget.querySelectorAll('button[type=button]');
    const lastButton = buttons[buttons.length - 1];
    lastButton?.click();
  } catch (err) {
    console.error('Failed to open chat widget:', err);
  }
}

Conditional Widget Opening​

Open the widget based on specific conditions:

function openChatIfAvailable() {
  // Check if widget is loaded and agent is online
  const widget = document.getElementById('chat-widget');
  if (!widget) {
    console.warn('Chat widget not found');
    return;
  }
  
  // Check if widget indicates agent is available
  const statusIndicator = widget.querySelector('.agent-status');
  if (statusIndicator && statusIndicator.textContent.includes('offline')) {
    alert('Chat agent is currently offline. Please try again later.');
    return;
  }
  
  // Proceed to open widget
  const buttons = widget.querySelectorAll('button[type=button]');
  const lastButton = buttons[buttons.length - 1];
  lastButton?.click();
}

Implementation Notes​

Important Considerations​

• e.preventDefault(); is used to prevent the default link behavior (e.g., navigating to a new page)

• lastButton?.click(); ensures that the click is only triggered if the button exists (optional chaining)

• Error handling is added using a try...catch block to log any issues that may occur during widget triggering

Browser Compatibility​

This solution works in all modern browsers that support:

  • document.getElementById()
  • querySelectorAll()
  • addEventListener()
  • Optional chaining (?.) - for older browsers, use regular null checks