Configuring Companion Components for an In-Page Experience

Product(s)
Gallery
Role(s)
Studio User
Task(s)
Create an In-Page Experience

In this topic you will learn how to configure companion components on an in-page experience.

All in-page experience templates provide the ability to have companion components. Companion components include:

  • Custom HTML
  • Images
  • Text

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 card and link interactions, the difference being, cards and links display over the video player itself. Companion components will display to the right of the video player when the video is in the PLAYING state.

This topic contains the following sections:

Note: For information on adding link and card interactions, see Adding Interactions to an In-Page Experience.

Note: After making any changes to an experience, make sure you republish the experience so the changes appear on sites that display the experience.

Viewing companion components

To view the companion components that have been configured, edit the experience and then click VIDEOS in the left navigation. Videos that have been configured with interactions will display an icon in the Interactivity column indicating the type of interaction(s).

Companion components include HTML (), images () and text ().

Note: Link () and card () icons may appear indicating that the video has links and cards configured. For information on links and cards, see Adding Interactions to an In-Page Experience.

Configuring a companion HTML component

To configure a companion HTML component, follow these steps:

  1. Edit the experience and then click VIDEOS in the left navigation.
  2. Click on a video to select it.
  3. Click Add Interactivity > Companion HTML or click on the HTML () icon in the Actions column. The Interactivity editor will open.
  4. Enter a Name for the HTML component.
  5. Paste in your HTML code.
  6. To configure the start time and duration for the component, click the Configure link.
  7. Select a Start Time and Duration:
    • Show for the entire video - The component will appear for the entire video
    • Select a start time and duration - You will manually set the start time and duration for the component
  8. Set the Duration for the component.

    Note: The duration can also be set using the slider under the player. Drag the left arrow to when the component should appear and then drag the right arrow to when the component should disappear.

  9. Check Until the video ends if you want to set a start time only and have the component appear until the video ends.
  10. Check Apply this interaction to all videos in the layout if you want this component to appear on all the videos in the experience.
  11. Click Save to save the changes.

Note: To assign the interaction to another video, select another video using the video selector dropdown list above the player.

Configuring a companion image component

To configure a companion image component, follow these steps:

  1. Edit the experience and then click VIDEOS in the left navigation.
  2. Click on a video to select it.
  3. Click Add Interactivity > Companion Image or click on the image () icon in the Actions column. The Interactivity editor will open.
  4. Enter a Name for the image component.
  5. To specify an image, you can:
    • Drag an image from the file system 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 file
  6. Set the image Size.
    • Image will resize to container - Images that are larger in size than the container they are in will be scaled down to fit. Smaller images will not be upscaled.
    • Width and Height - Manually enter a width and height for the image
  7. Set the image Alignment.
  8. Enter a Clickthrough URL. This is the URL to go to when the image is clicked. You can also Open link in a new window.
  9. To configure the start time and duration for the component, click the Configure link.
  10. Select a Start Time and Duration:
    • Show for the entire video - The component will appear for the entire video
    • Select a start time and duration - You will manually set the start time and duration for the component
  11. Set the Duration for the component.

    Note: The duration can also be set using the slider under the player. Drag the left arrow to when the component should appear and then drag the right arrow to when the component should disappear.

  12. Check Until the video ends if you want to set a start time only and have the component appear until the video ends.
  13. Check Apply this interaction to all videos in the layout if you want this component to appear on all the videos in the experience.
  14. Click Save to save the changes.

Note: To assign the interaction to another video, select another video using the video selector dropdown list above the player.

Configuring a companion text component

To configure a companion text component, follow these steps:

  1. Edit the experience and then click VIDEOS in the left navigation.
  2. Click on a video to select it.
  3. Click Add Interactivity > Companion Text or click on the text () icon in the Actions column. The Interactivity editor will open.
  4. Enter a Name for the text component.
  5. Enter the text to add to the experience. The toolbar can be used to format the text.
  6. To configure the start time and duration for the component, click the Configure link.
  7. Select a Start Time and Duration:
    • Show for the entire video - The component will appear for the entire video
    • Select a start time and duration - You will manually set the start time and duration for the component
  8. Set the Duration for the component.

    Note: The duration can also be set using the slider under the player. Drag the left arrow to when the component should appear and then drag the right arrow to when the component should disappear.

  9. Check Until the video ends if you want to set a start time only and have the component appear until the video ends.
  10. Check Apply this interaction to all videos in the layout if you want this component to appear on all the videos in the experience.
  11. Click Save to save the changes.

Note: To assign the interaction to another video, select another video using the video selector dropdown list above the player.

Editing/Deleting companion components

Hovering over an icon in the Interactivity column will display all the interactions of that type. In this example, an image component has been configured.

To edit a component, hover over an icon in the Interactivity column and click on the edit () icon next to the component or click the video title. The Interactivity editor will open. Edit the component and then Save the changes.

To delete a component, hover over an icon in the Interactivity column and click on the delete () icon next to the component.

Components can also be edited/deleted by clicking the edit icon () in Actions column. This will display a list of all the interactions for the video.

Click the edit icon to edit the component or delete icon to delete the interaction.

Companion components can also be accessed from the LAYOUT menu. Select the PLAYING state and companion icons will be displayed on the experience.