ReelFlow Player API Reference

Getting Started

As long as the Install Code is already added and verified working on your website (check from the Dashboard at Settings > Install Code), the Player API is available for you to use.

Initialising & accessing the ReelFlow Object

We use the defer attribute, which means the ReelFlow Player is loaded asynchronously.

You therefore should wait for the reelflow:ready event:

window.addEventListener('reelflow:ready', () => {
    // ReelFlow object is now available and initialized
    var targetFlow = ReelFlow.getFlow("F-123456ABCD");
    
    targetFlow.player.show();
});

Interacting with a specific flow

The Flow ID can be find in the Flow Builder in the Dashboard, and looks something like this: F-123456ABCD.

// Accessing "ReelFlow" instance, assigned to flow with "F-67632b91daf39" code
ReelFlow.getFlow('F-123456ABCD').eyeCatcher.show()
ReelFlow.getFlow('F-123456ABCD').eyeCatcher.on(/* ... */)
ReelFlow.getFlow('F-123456ABCD').player.play()
ReelFlow.getFlow('F-123456ABCD').player.on(/* ... */)

To identify which Flows and their types are available on the page, you can use the getAvailableFlows() function.

var pageFlows = window.ReelFlow.getAvailableFlows();

/* -- Returns the following structure --
[
    {
        "code": "F-6925bde53d273",
        "type": "overlay"
    },
    {
        "code": "F-6925bdee3e8d3",
        "type": "inline"
    }
]
*/

/* 
Using this you can locate and target a specific Flow 
by it's Flow code e.g. F-123456ABCD or isolate by type

*/
if (pageFlows.length > 0) {
	pageFlows[0].eyeCatcher.show();
	console.log(pageFlows[0].code); // Shows the code of the first Flow 
	console.log(pageFlows[0].type); // Shows the type e.g. inline or overlay
} 

Global Methods

remove()

Completely removes both eye-catcher and player components from the page.

// Removes all flows on the page from DOM
ReelFlow.removeAll();

// Remove a specific flow from DOM
ReelFlow.getFlow('F-123456ABCD').remove();

Components

Eye-catcher (ReelFlow.eyeCatcher)

Controls the floating video preview component. The property doesn’t exist for the inline player.

// Prints "undefined" for inline-type player
console.log(ReelFlow.getFlow("F-123456ABCD").eyeCatcher); 

Methods:

show()

Shows the eye-catcher if hidden.

Note: This only affects visibility; the component remains in the DOM even when hidden.

ReelFlow.getFlow("F-123456ABCD").eyeCatcher.show();

hide()

Hides the eye-catcher if visible.

Note: This only affects visibility; the component remains in the DOM even when hidden.

ReelFlow.getFlow("F-123456ABCD").eyeCatcher.hide();

disable()

Prevents eye catcher from appearing. Please note that it’s still going to be rendered (available in the DOM), but won’t be shown. Should be called before other statements.

ReelFlow.getFlow("F-123456ABCD").eyeCatcher.disable();

Player (ReelFlow.player)

Controls the main video player component.

Methods:

show()

Shows the player if hidden. Optionally starts playing from a specific video in the flow.

// Show player with current video
ReelFlow.getFlow("F-123456ABCD").player.show();

hide()

Hides the player if visible.

ReelFlow.getFlow("F-123456ABCD").player.hide();

play()

Starts or resumes video playback.

ReelFlow.getFlow("F-123456ABCD").player.play();

pause()

Pauses video playback.

ReelFlow.getFlow("F-123456ABCD").player.pause();

Events:

actionButton

Triggered when an action button is clicked. Call preventDefault() to prevent the default action behavior.

var targetFlow = ReelFlow.getFlow("F-123456ABCD");

var removeEventListener = targetFlow.player.on('actionButton:click', (action) => {
    console.log('Action clicked:', action);
    // action = {
    //   id: '9d0d9b93-7cff-4e2e-9acb-bc05181f63e8',
    //   label: 'Chat with us',
    //   index: 0
    // }
});