Call to Action Plugin

Overview

Call to action (mp4e:cta, an official plugin) shows a timed button or banner: “Visit the shop”, “Get the recipe”, “Book a call”. It opens its link in a new tab and tells your rules it was tapped, so you can react to it too. One action shows at a time. Viewers can tap it while the video plays.

Call to action is a family plugin: it has the family's five themes, its common style settings, its minimum readable size and its keyboard and TV-remote navigation.

Adding a call to action to a video

1. Install Call to action from the marketplace.
2. Add one Call to action overlay covering the whole timeline. It covers the whole frame and places its own button, so do not resize it: pick Bottom, Top or a bottom corner in position instead.
3. Enter the actions.
4. Pick a style, a theme and a size. Lean-back is for a TV across the room.

The actions

actions is a list of calls to action in seconds of the video. It can also be JSON text, so a single {{listVariable}} can supply the whole list, and any field can be a {{variable}} (a link per viewer, for example).

[
  { "text": "Get the recipe", "subtext": "Free, with the shopping list", "url": "https://cook.example/pancakes", "start": 30, "icon": "download" },
  { "text": "Visit the shop", "url": "https://shop.example", "start": 210, "end": 230, "icon": "cart" },
  { "text": "Call us", "url": "tel:+15551234567", "start": 250 }
]

Entries without text or a start are left out, and the rest are ordered by start. When two actions' times overlap, the one that starts later is shown; once it ends, an earlier action still inside its own time shows again. The actions come from the settings only.

Settings

Call to action's own settings, plus the family's common style settings (theme, accent, size, surface, textColor, font, radius, motion):

How it behaves

• Tappable while the video plays. The button is the only part of the frame that takes the pointer (through clickable regions): every tap anywhere else goes through to the video, your hotspots, other overlays and the player's controls.
• A tap opens the action's link in a new tab, through the player, so the host's rules for opening links apply, and fires ctaClicked either way. Do not add a click handler to the overlay: the overlay covers the whole frame, so it would fire on a click anywhere.
• On a player that cannot route taps to a plugin's button, the button can be tapped once the viewer pauses; a tap beside it, Escape or Back, or playing again gives the frame back to the video.
• A keyboard or TV remote reaches the button with Tab at any time; Enter or OK presses it. Space presses it only while the viewer is moving by keys, so the player's play and pause key never re-opens a link the viewer just tapped.
• A screen reader hears each action as it appears, with the line under it.
• On a phone-sized player the subtext keeps to one line and the button gets tighter. It always stays clear of the player's controls bar.

Actions and events

Actions, through pluginAction from rules, other plugins and input shortcuts:

{ "type": "pluginAction", "pluginId": "mp4e:cta", "actionId": "show", "config": { "index": 0 } }

Call to action emits two events:

• ctaShown { index, number, text, start } — the video brought an action on screen, by playing into it or by a seek. It follows the player's own time, so it never fires when the video loads, when the settings or a variable change, or for an action the show action put up.
• ctaClicked { index, number, text, url? } — the viewer tapped the action; url is there only when it has a link (which opened in a new tab).

index is the action's place in time order, from 0 (number from 1). Rules hear the events as plugin:mp4e:cta:ctaShown and plugin:mp4e:cta:ctaClicked:

Trigger:    plugin:mp4e:cta:ctaClicked
Action:     pause

Your page hears them through onEvent (see Player Events):

<MP4EPlayer
  src="/video.mp4"
  onEvent={(event, data) => {
    if (event === 'plugin:emit' && data.event === 'ctaClicked') {
      // { index, number, text, url? }
      analytics.track('cta_click', data.data);
    }
  }}
/>