This article details step by step instructions to create a Slide Sync Experience
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
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.
- 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
Congratulations! You’ve just created a Slide Sync Experience!
Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.