This article details step by step instructions to create a Slide Sync Experience
Don't have Slide Sync yet? Download an overview of the product here or inquire about adding Slide Sync to your HapYak plan by pressing the button below
Slide Sync Quick Start Guide
Creating New Experience
- Click Experience Tab in Portal
- Click New Experience
- Enter Title of Experience
- Select Layout Type (slidesync is auto-selected)
- Select Template Type (playlist under video or playlist fullscreen)
- Choose Video Source (3 options)
- Add Embed Code
- Click upload video and select video
note: Video must be an MP4
- Choose Existing Project
- Experience will load with video
- Add PDF slides to video by dragging into drop zone or clicking anywhere in drop zone
- Slides must be in PDF format
- First slide will appear and sync to 0 seconds
- Play video, skipping to each section that requires a slide and click the Sync button on the slide toolbar
- Adjust time if necessary with the time adjuster next to the sync button
- If chapter is present at same time as slide add chapter after syncing slide
- Click Chapter icon (bookmark) and edit chapter title and click done
- If you would like to change the size ratio of the video and the slides, add a zoom event using an On-Time Event annotation created by clicking the timer icon
- Fill in Addon Type field with “slider”
- Fill in Command field with “change”
- Under Command Data, click Add New
- Fill in key value pair with “newValue” and the value you would like the slider to be i.e. “42.5” (see conversion scale below for acceptable values)
Note: HapYak numbers correspond to percentage of the page the video will take up
- Click Done
- Repeat steps until all slides are synced for the video
Adding Chapter Menu
Click the Chapter Menu icon to automatically insert a chapter menu at 0 seconds
Adding Other Annotations
Continue to add annotations as you would with any other interactive video project.
Adding More Videos and Slides
- To add another video, click on the Add Video button in the playlist beneath the video and slide area.
- Enter a title for the video.
- Select video.
- Upload New Video (mp4) or
- Choose Existing Project
- Repeat steps until experience is complete
Configuring Settings Including Adding Custom Header and Footer
Click the Configure button at the top right of the experience
- Auto Progress will play the next video in the playlist after the previous video finishes.
- Auto Play will automatically play the video on landing page load.
- Default Slider Value sets the initial zoom level of the experience on the landing page.
- Social Sharing buttons toggle which buttons will be shown on the landing page.
Note: This also has a configurable message that will show up as default text in the share dialogs.
Adding Custom Header and Footer
- Also in the configuration settings are the custom header and footer HTML fields that allow for custom branding to be applied.
Sample header tag:
<img src="//hapyak_demos.s3.amazonaws.com/demos/hapyak/default-slidesync-header.png" width="100%"/>
- Replace the img src with the image for the experience.
Sample footer tag:
Setting up Registration Redirect/Access Gate (optional)
- Add an Access Gate
- Add the redirect url for the registration form
- Ensure your registration form or other validation form redirects the user back to the experience after completing registration/login
Note: We recommend using the referrer url
Generating Links to the Slide Sync Experience (optional/extra)
Note: Does not come with standard Slide Sync, inquire for availability
Click on the Link Button
Permalink to the experience is at the top
Create a custom link with attributes by filling out these custom fields:
- Video to start on (required)
- Time in video to seek to (optional)
- Downloadable/Viewable asset URL (optional)
- Modal Title (optional)
- Linked Text (optional)
- Button Text (defaults to “View”) (required)
- Modal Text (non-linked) (optional)
Click Generate to create link with custom parameters.
View Landing page and review experience.
You can view the landing page at anytime by clicking the View button in the top right corner