Can you trigger a video from a button click?

How do you make a button open a video?

Any clickable element on a page – a button, a text link, even an image – can be turned into a video trigger. Set its link destination to one of two reserved values:

• Open the player: #reelflow-player-open
• Close the player: #reelflow-player-close

Clicking it behaves exactly like clicking the eye-catcher – it launches the Overlay Player. No script needs to be written and no developer ticket needs to be raised.

How do you set it up in your CMS?

• Find the element. Locate the button or link you want to use in your website builder or CMS.
• Set the link. Enter #reelflow-player-open (or #reelflow-player-close) in the URL/link/href field.
• Publish the page.
• Confirm a Flow is live. An Overlay Flow needs to be published on the page – you can turn off its eye-catcher entirely in the Flow Builder's activation settings if the button should be the only way to launch it.
• Test the click. The Overlay Player should open or close accordingly.

This works the same way regardless of CMS – WordPress, Webflow, or otherwise – as long as you can set a link destination on an element. A CSS class works identically for builders that don't expose a link field: .reelflow-player-open or .reelflow-player-close.

What if you need more advanced control?

For setups beyond a simple open/close button, the ReelFlow Player API gives developers direct programmatic access once the install code is verified on the page:

window.addEventListener('reelflow:ready', () => {
  var targetFlow = ReelFlow.getFlow("F-123456ABCD");
  targetFlow.player.show();
});

• Target a specific Flow by ID with ReelFlow.getFlow().
• Discover Flows on the page dynamically with ReelFlow.getAvailableFlows(), without hardcoding an ID.
• Listen for interactions, like actionButton:click, to fire custom events in third-party tools such as a CRM or analytics platform.

Does this work with multiple videos on the same page?

The link/class method is built for the common case of one Overlay Flow per page. If a page publishes more than one Overlay Flow at once, the simple reserved link can't tell them apart – that's when the Player API's getFlow() and getAvailableFlows() methods are the right tool, since they let a button target one specific Flow by ID.

Why trigger a video from a custom button instead of relying on the eye-catcher?

The eye-catcher is ReelFlow's default launch point, but plenty of layouts call for the video to open from somewhere more intentional – a "Watch how it works" link in a pricing table, a CTA inside a blog post, or a nav bar item. Wiring a button directly to the player keeps the video available exactly where a visitor's question already is, without waiting for them to notice a floating preview.

FAQ

Can I use this on multiple buttons?

Yes – the same reserved value can be added to as many links or buttons as needed on a page.

Will clicking the button navigate away or scroll the page?

No. It only controls the player; the page itself doesn't move.

What if my button isn't doing anything?

Check that the href is set exactly as #reelflow-player-open or #reelflow-player-close (including the #), with no extra spaces, and that the ReelFlow install code is verified on the page.

Does this require a developer?

No – most CMS platforms let you set a link destination without touching code. Developers only need to get involved for Player API use cases like multi-Flow pages or custom event tracking.