How to add interactive overlays and calls-to-action to your video player

VIXY has a very user-friendly setup so that interactions can be added easily and quickly with just a few clicks. The button plugin allows you to personally add time-based call-to-actions and images to the video player.

Easily add interactions in the VIXY video player studio

The button plugin allows you to personally add time-based call-to-actions and images to the video player. Determine the time, position and image yourself. In addition, add a tracking URL to track directly the result of your interactive video player or link the player with Google Analytics for advanced event tracking.

Connect videos, link out to additional content, create calls to action, and more. With interactive overlays, the interactive elements are layered on top of the video. This type of interaction works particularly well for existing video content, for example, creating a ‘buy now’ button or asking a viewer for feedback. Depending on your objectives there are different types of interaction that can be triggered by the interactive overlay:

• Opening an external website or app
• Opening an in-video player contact form
• Opening an in-video player menu (with links to other video's)
• Playing an other video
• Downloading documents straight from the video
• Directly adding or linking to items in a shopping environment
• Jumping to a specific time (chapter) in the video
• Triggering an event on the page where the video is featured (via java script, for example)

Start creating an interactive video player

1. Go to the tab video player and click on the video player on which you want to add interactions.

2. Mind the aspect ratio of the video player. Because the video player is responsive the buttons will scale (larger of smaller) depending the place where the video is embedded.

   

   
   
3. Now go to the look and feel tab (the one with the eye icon). There are a lot of options to customize your videoplayer. In the subtab custom styles you can change te colours of the video player, but in this article we focus on the button plugin.

4. Activate the button plugin by checking the box. And click on "Add new button"

   

   
   
5. The Basics

First decide where you want to position the button. In this example we are going to show you how we added the Gamma logo as an interactive button in the video player.

• Position: is starting postion of the image. In this example we decided to position the button "Top left".
• Link: The link where the button will send a viewer when clicking the button.
• Width & Height: The displayed width and height of the image on the video player. In this example 150x80 pixels.  
• Analytics Label: this will be passed on to Google Analytics for tracking.

6. A button can have a normal and a mouse-over state. Press the "select" button to upload your image or logo. In this case we used the Gamma logo.

   

   You now have three options in our case we went for option b

   a. Existing entry:  You can select an image that you have uploaden

   b. Upload: Select an image from you desktop 

   c. Url: fill in the url if you have your image somewhere else online

   

   
   

7. Press on Upload & Select

   Now that the image is uploaded we go to the advanced button options

8. Advanced: for pixel perfect placement of the image in the video player you can use margins to move the image around. In the logo example we gave it some extra spacing from the top and left side of the video player

   

   
   

9. Timing: You want a button to appear and disappear at a certain time? Just fill in the time in the from and to fields. You can also use percentages. Without values the image will be visible from the start till the end of the video. 

   In our example we added that the logo has to disappear at 95% of the video.

   

   
   

10. Actions: This is a very powerful option. In our example we just linked to another url, but you can also use the plugin to:

    a. Play an other video (every video that is in the OVP)

    b. Open contact form (the contact form plugin)

    c. Open menu (the menu plugin)

    d. Pause the video

    e. A custom action

    

    
    
11. When you are done configuring the button, press save to store the button and your video player.