How do you sync on-page content with a video in real time?
Syncing content to a video comes down to one event: actionButton:click. Using the Player API, you get a Flow instance, listen for that event, and write custom JavaScript that runs whenever a specific button is clicked, updating text, images, or any other element on the page at that moment. The sync happens at each click, in step with wherever the visitor is in the Flow.
What are you actually syncing to?
Not the raw video timeline - the Action Buttons inside each Step of the Flow. Each button corresponds to a specific point in the script, so listening for its click event effectively syncs your page to what's being covered in the video at that moment.
Step-by-step: wiring up the sync
The pattern looks like this:
window.addEventListener('reelflow:ready', () => {
const targetFlow = ReelFlow.getFlow('F-123456ABCD');
targetFlow.player.on('actionButton:click', (action) => {
if (action.label === 'Show pricing') {
document.querySelector('#price-callout').style.display = 'block';
}
});
});- Wait for the Player to be ready using the
reelflow:readyevent before calling any API methods. - Get the Flow with
ReelFlow.getFlow(), or useReelFlow.getAvailableFlows()if you don't want to hardcode an ID. - Listen for clicks with
player.on('actionButton:click', ...). - Match the action using
action.labeloraction.idto work out which button fired. - Update the page inside that callback - text, images, visibility, anything in the DOM.
What if there's more than one Flow on the page?
getAvailableFlows() returns every Flow's ID and type, so you can attach a listener to each one individually rather than assuming there's only one.
Does this work for Inline Flows too?
Yes - the same player.on('actionButton:click', ...) pattern applies whether the Flow is Inline or Overlay.
FAQ
Do I need to poll the video's playback time to do this?
No. The sync is event-driven, triggered by the button click itself, not by tracking video timestamps.
Can I sync more than one page element to the same click?
Yes - the callback can update as many elements as you like in a single function.
Will this slow down my page?
No meaningfully - it's a standard JavaScript event listener, the same overhead as any other click handler.
Where do I find the Flow ID to hardcode?
Flow IDs are visible in the Flow Builder, formatted like F-123456ABCD.
Related questions
Yes. ReelFlow's own documentation showcases this exact pattern - the video Player and the surrounding page reacting to each other in real time. The mechanism runs through the Player API: as a visitor clicks an Action Button inside a Flow, an actionButton:click event fires that your page's JavaScript can listen for, and that event can trigger any content change - swapping text, revealing a stat, changing an image, or more. It's driven by the visitor's interaction with buttons timed to specific moments in the video, not automatic real-time speech detection.
Yes - with a caveat on how automatic it is. Text and images can update at specific moments during a video, triggered by a visitor clicking an Action Button inside the Flow. That click fires an actionButton:click event through the Player API, and custom JavaScript listening for it can swap text, change an image, or reveal new content the instant it happens. It isn't a continuous, frame-by-frame read of the video - the update points are tied to wherever Action Buttons are placed in the Flow.
The interaction runs in both directions. A button, link, or image on the page can open, close, or switch the video using ReelFlow's reserved link values or the Player API. Going the other way, clicking an Action Button inside the video can fire a JavaScript event your page listens for, letting it update text, images, or other content in response. Together, these two directions let the page and the video genuinely react to each other.
Yes - with an important detail on how it works. The trigger isn't ReelFlow listening to the audio itself; it's an Action Button placed at the moment something specific is being said, which the visitor clicks. That click fires an actionButton:click event through the Player API, and custom JavaScript listening for it can reveal a stat, quote, or callout anywhere on the page the instant it happens.
The more interesting uses go beyond a single video playing once. Branching Flows let a visitor choose their own path through short reels rather than watch one long video. The page and video can react to each other in real time, revealing stats or swapping content as a visitor clicks through. Several Flows can run as a spotlight across different sections of one page, video interactions can launch a chat tool directly, and engagement data can flow into a CRM via UTM attribution. Together, these turn video from a passive asset into a working part of the page.
Keep your page in step with your video
Use the ReelFlow Player API to sync page content to what visitors click through inside a Flow, in real time.