How to Add Clickable Buttons to Proactive Messages in Voiceflow: A Handy Workaround

Voiceflow is an awesome tool for engaging users with proactive messages. But here’s the thing—right now, it doesn’t offer a built-in way to make these messages clickable or to trigger specific flows directly within the platform. If you’re looking to add clickable buttons to your proactive messages, you’ll need to think outside the box a bit.

In this guide, I’ll walk you through a simple workaround. We’ll tweak the DOM (Document Object Model) to create clickable proactive buttons that can launch specific flows or actions. While this isn’t a permanent solution, it should help you out until Voiceflow adds this feature natively.

Step-by-Step Guide to Creating Clickable Proactive Messages with Clickable Buttons

 

Step 1: Clear Any Existing Proactive Messages

Before you add a new proactive message, it’s a good idea to clear out any old ones. This helps keep things tidy and prevents any confusion. You can do this with the following code:

				
					// Clear all previous proactive messages and push the new message
window.voiceflow.chat.proactive.clear();

This line ensures that any old messages are removed, giving you a fresh start for your new interaction.

Step 2: Create a Proactive Message

Next, let’s use Voiceflow’s default feature to push a simple text-based proactive message. This step is important because it sets up the DOM structure that we’ll modify later.

				
					setTimeout(() => {
  window.voiceflow.chat.proactive.push({
      type: 'text',
      payload: { message: 'Hi, We are running a Buy2Get1 offer.' }
  });
}, 400); // Delay of 400ms

In this example, the message “Hi, We are running a Buy2Get1 offer” will appear proactively. This prepares the interface for the custom buttons we’ll add in the next step.

Step 3: Add Clickable Buttons to Your Proactive Message

Now for the fun part! We’ll directly modify the DOM to insert clickable buttons into the proactive message. Here’s the JavaScript code to add an “ADD” button and a “NO” button for user interaction:

				
					setTimeout(() => {
window.voiceflow.chat.proactive.push({
    type: 'text',
    payload: { message: 'This is a proactive message with clickable buttons.' }
});
}, 400); // Delay of 1000ms (1 second)

// Run the following code after a delay of 1 second
setTimeout(() => {
  // Select the parent element inside the shadow DOM
  const parentElement = document.querySelector("#voiceflow-chat").shadowRoot.querySelector("div > div.vfrc-widget--launcher.c-PJLV > div > div.c-iHqEPT");

  // Create a new div element
  const newElement = document.createElement('div');

  // Add classes to the new div
  newElement.classList.add('vfrc-proactive-message', 'c-fbwYwp');

  // Set the inner HTML content with Yes and No buttons, including inline onClick functions
  newElement.innerHTML = `
    Do you think it's cool?<br><br>
    <a href="#">
    <button style="background-color: #5f3100; color: white; border: none; padding: 6px 24px; border-radius: 5px; cursor: pointer;">
      Yup!
    </button></a>
    <button style="background-color: transparent; color: #5f3100; border: 2px solid #5f3100; padding: 6px 24px; border-radius: 5px; cursor: pointer;" 
      onClick="window.voiceflow.chat.proactive.clear();">
      Naah
    </button>
  `;

  // Remove all previous elements inside the parent before adding the new one
  if (parentElement) {
    //parentElement.innerHTML = ''; // Clear all previous child elements
    parentElement.appendChild(newElement); // Append the new element
  } else {
    console.error('Parent element not found.');
  }
}, 1000); // Delay of 1000ms (1 second)

Here’s what this script does:

  1. Finds the Right DOM Element: It targets the container within Voiceflow’s shadow DOM where the proactive message is displayed.
  2. Creates a New Div: This new div will hold our custom buttons.
  3. Inserts Clickable Buttons: The “ADD” button links to a specific URL, while the “NO” button clears the proactive message when clicked.

When I first tried this method, I encountered some timing issues with the DOM updates. Tweaking the setTimeout delays helped everything sync up perfectly.

Wrapping Up

Even though Voiceflow doesn’t currently support clickable buttons in proactive messages out of the box, this workaround lets you create engaging, clickable interactions by tweaking the DOM. With this method, you can showcase special offers, CTAs, or even launch specific flows when users interact with your proactive messages.

Ever wondered how you can make your proactive messages more interactive? This simple solution might be just what you need. Plus, it’s perfect for limited-time offers or guiding users through a specific sales funnel.

I hope this guide makes your Voiceflow projects even more interactive and user-friendly. Keep an eye on Voiceflow’s updates—they might add this feature natively soon!