Skip to content
English - United States
  • There are no suggestions because the search field is empty.

Launch a chatbot using Start a Chat button action

If you already use one of our supported chat services or chatbots, you can set any Flow button to start a new chat conversation.

The Start a Chat Step Action is helpful when you already have an existing chat tool you wish to direct website visitors to, from a ReelFlow Player button e.g. Hubspot Chatflows or Intercom.

When clicked by a website visitor, the button will launch the chat experience and hide the ReelFlow Eye-catcher, clearing the way for the visitor's conversation.

Start a Chat currently connects to:

  • Hubspot Chatflows

  • Chatbase

  • Zapier chatbots

  • Intercom

However, if we don't already natively support a chatbot you wish to use yet, you can create and configure your own Custom chatbot integration using our Player API to achieve the same effect. Please reach out if you need assistance.

How to use

  1. Open the Flow from your dashboard, and choose Edit to open the Flow Builder

  2. Create or select an Action Button from a Step, the Step Settings flyover menu will open

  3. From Actions, choose Start a Chat, and select the correct Chat Service from the list. For more information about integrating with the specific chat services, read below.

Requirements and other things to note

  • The third-party chat service you select from the list must already be live and working on the page you intend to use the Flow on for this action for this to work.
  • The ReelFlow Flow must already be previewable on the page.
  • The action button will automatically connect and integrate with the selected chatbot if everything is setup correctly. You can check for any errors by opening the Console in your web browser, we add status messages there.
  • When using Overlay Flows, you have the options to set the ReelFlow Player to hide when the chat starts, and show again once the chat finishes; the options can be found in Step settings. For Inline Flows, these options are not shown.
  • You will likely need to go into settings of your third-party chat service and set the chatbot "launcher" to be hidden on page load to avoid it showing up and clashing with the ReelFlow eye-catcher. This is often a setting inside the third-party chat tool configuration, rather than something we control.

Using the Custom chat service option - launch any other chatbot or tool

In order to launch a chat service we don't natively support, you will need to add a custom javascript code block to the webpage (example follows below). It must be added after the ReelFlow Install Code and the install code of the other third-party tool you wish to use, within the <head> of the HTML .

You must configure the button name to match the one you set in the Flow Builder. 

LLM Prompt

An LLM like ChatGPT or Claude maybe the able to prepare the code from the sample below.

I'm wiring up ReelFlow so that clicking a button inside a ReelFlow Flow opens my chat widget instead of the widget's own launcher button.

Below is a template script with  sections. Fill in every
placeholder with working code for [YOUR CHAT PROVIDER NAME]'s JavaScript
API, and leave everything else in the script exactly as written.

Here are my chat provider's JS API docs: [paste a link, e.g.
https://developer.zendesk.com/api-reference/widget-messaging/web/core/]

Look up how to do these four things and use them to fill in the
placeholders:
- Hide the default launcher button
- Open the chat window in JS
- Close the chat window in JS
- Detect when the visitor closes the chat window (if the API supports it —
  if not, just delete that placeholder block)

If I haven't given you a link, or the docs don't cover something, ask me
rather than guessing.

Return the complete script, ready to paste into my site, with no
 tokens left in it.

[paste the template script here]

Example Custom integration script

The sample script to modify or supply to an LLM with the prompt:

<script type="text/javascript">
(function() {
    'use strict';
    console.log('ReelFlow <>  enabled');

    // IMPORTANT: Match the exact action button text in 
    // the Step Settings in Flow Builder 
    const ACTION_BUTTON_TEXT = "Start chat";

    // Hide your chat widget's default launcher button.
    // Use whatever your provider's docs give you for this — a settings
    // flag, a config object, or an API call. Delete this line if your
    // widget has no launcher to hide.
    

    var targetFlow;

    // Wrapper for your chat widget's show/hide calls, gated on ReelFlow being ready
    const chatWidget = {
      show: function() {
        if (!targetFlow) {
          console.warn('ReelFlow not initialized - cannot show  chat');
          return;
        }
        

        // If your provider has an event for when the visitor closes the chat
        // window, use it here to bring back the ReelFlow eyeCatcher.
        // Delete this block if your provider doesn't offer one.
        
      },
      hide: function() {
        
      }
    };

    window.addEventListener('reelflow:ready', () => {
        console.log('ReelFlow ready!');

      // Get all flows available on the page and use the first one
      const pageFlows = window.ReelFlow.getAvailableFlows();

      if (!pageFlows.length) {
        console.warn('No ReelFlow Flow available for this page');
        return;
      }

      // Locate the Flow; you could otherwise hardcode a value here
      const REELFLOW_FLOW_ID = pageFlows[0].code;
      targetFlow = ReelFlow.getFlow(REELFLOW_FLOW_ID);

      // Listen for a button click within the Flow, prevent default action, and show the chat widget
      targetFlow.player.on('actionButton:click', (action) => {
        if (action.label === ACTION_BUTTON_TEXT) {
          targetFlow.eyeCatcher.hide();
          targetFlow.player.hide();
          chatWidget.show();
        }
      });
    });
})();
</script>

For detailed information about getting the most out your integration, please read our Player API documentation, , or you can reach out to our support team.

Looking for more general information on building Flows and setting up button actions? Read our article on getting started with the Flow Builder.