Adding Interactions to an In-Page Experience

In this topic you will learn how to add card and link interactions to videos in an In-Page Experience.

Videos can be configured with card and link interactions. As the video plays, interactions are displayed over the player. In the following example, a link is displayed in the bottom left of the player and a card is in the upper right. Cards will display an info icon () the user can click on to open the card.

Some In-Page Experiences also support companion components. With companion components, content outside the player can change based on which video is playing. For example, when a product video is played, there might be a clickable image to the right of the player that will open up more details about that product. Companion components are similar to interactions, the difference being, interactions display over the video player itself. For information on companion components, see Configuring Companion Components for an In-Page Experience.

To add interactions to a video, edit the experience and then click Videos in the left navigation. To add an interaction to a video, select a video, click Add Interactivity and then click on the type of interactivity to add or click on the link () or card () interactivity icon associated with a video.

This topic contains the following sections:

To add a link interaction to a video:

  1. Edit the experience.
  2. Click Videos in the left navigation.
  3. Click on a video to select it.
  4. Click Add Interactivity > Link or click on the link () icon in the Actions column. The Interactivity editor will open.
  5. Add the Link Text and Link URL. As values are entered, the link preview in the player will update. The slider below the player indicates the link start time and duration.
  6. Choose a Playback Behavior:
    • None - The video will continue to play when the link is clicked
    • Pause on click - The video will pause when the link is clicked
  7. To configure the link start time and duration, click the Configure link.
  8. Select a Start Time and Duration:
    • Show for the entire video - The link will appear for the entire video
    • Select a start time and duration - You will manually set the start time and duration for the link
  9. Set the Start Time and Duration for the link.
  10. Check Until the video ends if you want to set a start time only and have the link appear until the video ends.
  11. Check Apply this interaction to all videos in the layout if you want this link interaction to appear on all the videos in the experience.
  12. To configure the link placement, click the Design link.
  13. Click on a Placement to specify where the link should appear in the player.
  14. Click Save to save the changes.

Adding a card interaction

To add a card interaction to a video:

  1. Edit the experience.
  2. Click Videos in the left navigation.
  3. Click on a video to select it.
  4. Click Add Interactivity > Card or click on the card () icon in the Actions column. The Interactivity editor will open and a preview of the card will appear in the player.
  5. To add an image to the card, you can:
    • Drag an image and then drop it on the drop area
    • Click browse and select an image from the file system
    • Enter the URL to a remote image field in the text box
  6. Add a Card Title, Description, Link Text and Link URL. As values are entered, the card preview will update. The slider below the player indicates the card start time and duration.
  7. Choose a Playback Behavior:
    • None - The video will continue to play when the link in the card is clicked
    • Pause on open - The video will pause when the card is opened
    • Pause on link click - The video will pause when the link in the card is clicked
  8. Select Open card automatically to have the card displayed automatically.
  9. To configure the card start time and duration, click the Configure link.
  10. Select a Start Time and Duration:
    • Show for the entire video - The card will appear for the entire video
    • Select a start time and duration - You will manually set the start time and duration for the card
  11. Set the Start Time and Duration for the card.
  12. Check Until the video ends if you want to set a start time only and have the card appear until the video ends.
  13. Check Apply this interaction to all videos in the layout if you want this card interaction to appear on all the videos in the experience.
  14. Click Save to save the changes.

Editing interactions

Videos that have been configured with interactions will display an icon in the Interactivity column indicating the type of interaction(s).

Hovering over an icon in the Interactivity column will display all the interactions of that type. In this example, two links have been configured.

To edit an interaction on a video, follow these steps:

  1. Hover over an icon in the Interactivity column and click on the edit icon next to an interaction OR click the edit icon () in the Actions column or click the video title. The Interactivity editor will open.
  2. Edit the interaction as appropriate.
  3. Click Save to save the changes.

Deleting interactions

To delete an interaction, hover over an icon in the Interactivity column and click on the delete () icon.

You can also click the edit icon () in the Actions column to view the list of all the interactions and then click the appropriate delete () icon.