Make any video interactive in 15 minutes

Transcription

1 Make any video interactive in 15 minutes

2 THE HOTSPOT A call-to-interact that can stick to moving people & objects. COOL FACT: Sticky hotspots stick to your moving people or objects like glue.

3 HOTSPOT Tips Good interactive video is not whack-a-mole. Early bird catches the worm. I choo choo choose you. Hotspots should remain visible on screen for 3 seconds minimum to allow your viewer enough time to identify and interact. Say your video is interactive and try to have a tag inside the first 30 seconds. If you ve got lots of hotspots on screen at any time, you ll paralyse viewers with the paradox of choice. Get Inspired

4 THE OVERLAY What appears when someone interacts with a hotspot. NOTE: You decide how your overlay appears and functions.

5 OVERLAY Tips Keep it simple Mobile Relevant Don t overcrowd your overlay. Keep it focused and short. Bear in mind mobile users will be on smaller screens. Make your overlay content relevant. Give viewers what they want.

6 UPLOAD 1 You ve just got to push the button After signing-up at wirewax.app, just hit the Upload a File button to add your first video. You can upload an image, or video from Your Computer or paste URLs for any video from any popular video site like YouTube or Vimeo. You can even paste a Dropbox URL.

7 UPLOAD 2 Drag and drop your video on the cloud You can also drag and drop a video directly from your computer to your Home folder. TIP: Try uploading directly from your mobile or tablet too.

8 UPLOAD 3 Count to 100 After feeding the studio, the video card will appear on your Home folder. As it s uploading, our science stuff is detecting faces, places, people and soon, objects. TIP: You don t have to wait, you can start other uploads or browse other videos in your account. A progress indicator on the top right bar will keep you updated.

9 UPLOAD 4 Your video is up! Once your upload is complete, your video s Quickview Panel will change and display all the info generated. To make your video interactive, click Open Editor. This is where you can start adding hotspots. TIP: Try uploading directly from your mobile or tablet too.

10 INTERACTIONS Add interactivity to your video with Hotspots and Overlays

11 6 THE EDITOR 2 1 The Console Manage video interactions, publish options and more 1 2 Add a new hotspot Use this button to add a hotspot. 3 Timeline 5 Navigate scenes in your video 4 Suggested Hotspots 3 Suggested or recognized people may already be tagged 5 Preview Video Preview your video after adding hotspots and overlays 6 Publish Share & embed your video 4

12 HOTSPOT The visual call-to-action that indicates things are interactive in your video

13 HOTSPOT 1 Detections You ll notice faces have already been automatically detected - these are suggested hotspots. Just tap them to add them to your video. Ignore them if you prefer. NOTE: Use J, K, L on you keyboard to quickly navigate through the timeline.

14 HOTSPOT 2 Add a new hotspot Add tags to anything else. When you see anything you wish to tag just hit the + button on the top left side and choose a Sticky or a Static Hotspot. TIP: Use J, K, L on you keyboard to quickly navigate through the timeline.

15 HOTSPOT 3 You can draw After pressing the button, draw a box around whatever you want to tag. People, objects, anything.

16 HOTSPOT 4 What is it? Give your new tag a name - this will help you manage your hotspots later on. Whenever you wish to use the same hotspot on a different moment of the video, simply select from the dropdown list of hotspots.

17 HOTSPOT 5 Hotspot Behaviour Choose what you want to happen when a viewer clicks the hotspot. Display an overlay Choose a template or create your own Open URL / Click-out Instantly open another web page Jump to point in video / Branching Jump to another point in the video (BRANCHING)

18 HOTSPOT 6 Hotspot Designs Pick a hotspot design that suits your video and calls out to your audience to interact. Easily identify what s interactive. Pro Subscribers can have Custom Hotspots uploaded to their Studio account.

19 HOTSPOT 7 Hotspot Icon Position The bounding box will be the hit zone for your tagged object but you can drag the icon to a position that fits best. You can choose where our WIREWAX tags sit on the object you are tagging. Simply click and drag the icon on the video or use the x and y values in the settings panel to get nice and precise. NOTE: Not all tag icons can be repositioned.

20 OVERLAY Create beautifully crafted overlays from templated designs.

21 OVERLAY EDITOR 1 Overlay Settings Change the overall overlay options 2 Pick a template Use this button to pick a Standard template or to create a custom overlay 3 Edit Tools Add Text, Images, Buttons, Videos, Maps and iframes to your overlay 4 Layers Use this to distribute your layers however you d like 5 Save Save and go check it in action

22 OVERLAY 1 1 Overlay Settings Change your overlay default settings by changing the Background Colour, Style, Animation and Close Button settings.

23 OVERLAY 2 2 Create your overlay Choose from a gallery of pixel perfect overlay templates that work for your video. You can also start fresh with the Blank template and create an overlay from scratch.

24 OVERLAY 3 Edit Tools Add Text Highlight text to customize its appearance using the top Edit Settings bar. You know how to use this already. 3

25 OVERLAY 3 Edit Tools Add Image Select an image from Your Computer, or one that you have previously uploaded, using the top Edit Settings bar. You can also add a URL link to your image. 3

26 OVERLAY 3 Edit Tools Add Button Customize your button changing its original settings: Font Size Colour Weight Alignment Background-colour radius values URL link 3

27 OVERLAY 3 Edit Tools Add Video Copy and paste the URL link of any valid YouTube, Vimeo or WIREWAX video to add to your overlay. You can resize it as much as you like and also choose Autoplay or click-to-play. 3

28 OVERLAY 3 Edit Tools Add Map Add a map to your overlay by enter the address at the Edit Settings bar. You re able to define the Zoom, if it has a Marker and between using the Original or Monochrome colour versions. 3

29 OVERLAY 3 Edit Tools Add iframe Display web pages and their content within your overlay by adding the URL as an iframe. 3 NOTE: Some websites don t allow embedding by iframe.

30 OVERLAY 4 4 Layers With this new feature, you re able to reorder the elements added by sending it to back or front.

31 5 OVERLAY 5 Adjust and Save Reorder Duplicate Delete Save

32 PREVIEW VIDEO See how your video looks after adding hotspots and overlays

33 PREVIEW If you want to review how your final video will appear, toggle the Preview mode at the bottom left corner of your video. If you re happy, close the Preview mode, return to Edit mode and Publish your video. PREVIEW MODE EDIT MODE

34 CLICKOUT Take the viewer straight to another web page

35 OPEN URL Take your viewer out of the experience Allow your viewers to instantly jump out to another web page with the Open URL hotspot behavior. Type the web page URL in the input.

36 BRANCHING Jump to another point in the video

37 JUMP POINT Jump to another point in your video Choose the Jump to point in video interaction to allow your viewers to change the story. Change the time the selected Hotspot should point to in the same video by adjusting the Out point value. Create a Choose-Your-OwnAdventure videos in minutes! EXAMPLE: Check out an example of Choose-Your-Own-Adventure here.

38 PUBLISH Publish and share your video with everyone

39 1 PUBLISH 1 Details Change the details of your video 2 Share Preview and share your video to various social networks 3 Embed Copy the embed code or URL to embed the video on your website 4 Access Restrict access to your video with different parameters 2 3 4

40 1 PUBLISH 1 Details Choose a Title and Description to best represent your video. You can also upload a custom Poster Frame or choose from the current video frame.

41 PUBLISH 2 2 Share Share your video to main social networks such as Facebook, Twitter and Tumblr. You can also Preview your video here.

42 PUBLISH 3 3 Embed For embedding on your own site, choose from all of these options and generate your own embed code. You can use the Embed code or the Embed URL.

43 METRICS Access the real-time metrics of any video

44 METRICS Track video performance You can access the real-time metrics of any video you create. Gain insight into how your video is performing across all embedded locations. From number of views, interactions, dwell times, retention to devices, browsers, location and viewing times - all in one beautiful dashboard. TIP: You can export a copy of your video s metrics to crunch the numbers even closer.

45 SUPPORT We re here to help. Drop us a line at support@wirewax.com or chat with us anytime while working in the Studio.