Interactive Manager - How to create a button to a video

The Interactive Manager is the feature that allows you to create interactive features and such as buttons, jump to time, hyperlinks, products etc to your videos.
With these functionalities you are to create simple interactive videos or more complex stories that branch out to bigger entities.

I'll show you first and foremost one of the most basic interactive feature which is the button! You can check out a few of our examples on our webpage. But up next, I will guide you how to create a button with a hyperlink in a video like in the following picture below.

1. After you have uploaded a media that you want to use in an interactive video, then you should navigate to Interactive Manager in the live media

2. You can see now the Interactive Manager interface. Choose the "Button" and drag it down to the timeline.

3. Now you can see that a button appears on the video preview window and that a  button element appears on the timeline. The button will appear at a chosen time and this can be adjusted on the timeline or in the right submenu.

Let's continue next with changing the appearance. Click on the "Untitled button" in the left submenu!

4. Start with changing the "Button id" and give it a suitable name. The id won't appear on the screen, but it acts as identificator for the element and it can be saved by pressing "Save as preset". If the element is saved, then it can be found in the element library so that it can be used for future projects.

Let's continue with changing the text on the button. This can be done by editing the "Button text" and I added the text "Press this!". Now you can see that the button text has been altered in the video preview.

6. Next let's change the position and size of the button. You manipulate the size of the button by dragging the handles on the video preview or by changing the position and size in the right submenu. 

7. I made the following changes in order to get a round big button. > Drag the button to the middle on the video preview > Set to Width "550" and Height to "550" and Radius to "360". 

Now we have a round button yeah! But I want it to be a red button with big text...

8. In the right submenu you go to appearance and click on typography and the text styling options will appear. You can test around the different options, but in this case only changed the font size to 70px.

You can also change the "color" and "hover color" of the button. Let's continue with adding a functionality to the button...

9. There are different option and I will present a "Go to url". Continue with clicking on "Go to url".

10. You can add any link you want and we recommend you to choose also the "New Tab" option, so that the link will open in a new tab, so that the stream can still continue. Now you have an functional button and it will appear and disappear on the set time, but...

11. If you navigate to Elements > Button you can adjust a few extra settings such as "fixed size and position" and "Pause video on entry". Pause video on entry can be a very practical setting, if you have a video with where you want to give the user options or if you are building a video with multiple a story that changes based on the users choice.

One common use is to add a button in the end of the video and enable the "pause video on entry", so that the user can download a document that is referred in the video.

There are tons of ways to use Interactive Manager, so I recommend to play around and learn. Be creative and have fun!