ReelFlow Player API Overview

We want you to be able to integrate the ReelFlow Player experience into your existing websites easily, and incorporate it into any experience you wish to imagine. You can extend how the Player works using this – our ReelFlow Player API.

By using the API you can benefit from extended functionality – for example you can setup your website to open the Player when clicking a link somewhere on the page, or starting an action on the page when a visitor clicks a button in a Flow.

Basic Player Concepts

The ReelFlow Player can be added to a page in two ways:

• Overlay - hovering in the corner of the screen over existing content
• Inline - inline, embedded in the flow of the page content

The ReelFlow embedded Player consists of two components:

• Eye-catcher: A compact floating video preview on a loop (Overlay only)
• Player: The main video player with full controls and action buttons

Here are some ways you can use the API to extend the ReelFlow Player experience:

• Opening the Player by clicking a hyperlink or button elsewhere on a page
• Navigating to play a specific video in the Player
• Opening Intercom or a chat tool by clicking on button in the Flow

And some practical code examples…

Example: Visitor clicks on a specific button in a Flow, and opens a chat tool, such as Intercom (could be a Hubspot chat, AI chatbot or similar)

<script type="text/javascript">
  
  // IMPORTANT: Match the exact action button text in the Flow Step
  const ACTION_BUTTON_TEXT = "Live Chat"; 

  // Hide the Intercom launcher
  window.intercomSettings = window.intercomSettings || {};
  window.intercomSettings.hide_default_launcher = true;

  var targetFlow;

  // Create a wrapper for intercom chat functions that checks ReelFlow is ready
  const intercomChat = {
    show: function() {
      if (!targetFlow) {
        console.warn('ReelFlow not initialized - cannot show Intercom chat');
        return;
      }
      Intercom('show');
      Intercom('onHide', function() {
        if (targetFlow) {
          targetFlow.eyeCatcher.show();
        }
      });
    },
    hide: function() {
      Intercom('hide');
    }
  };

  window.addEventListener('reelflow:ready', () => {
    // Get all flows available on the page and find the first overlay type
    const pageFlows = window.ReelFlow.getAvailableFlows();
    const overlayFlow = pageFlows.find(flow => flow.type === 'overlay');

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

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

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

		// Bonus
    // If you have a link on the page to show the ReelFlow player, you can add this code...
    // Just add the class "open-ReelFlow" to the button you want to use to show the Player
    document.querySelector('.open-ReelFlow').addEventListener('click', (event) => {
      targetFlow.player.show();
      intercomChat.hide();
    });
    
  });
</script>

You can view the full ReelFlow Player API Reference here.