How to add Olark Live Chat to a video

hapyak1.jpg

Today's post comes from Diego Torres-Palma at HapYak. HapYak has developed a technique for adding the Olark chat box to videos, so you can chat with customers inside of any video: 

(^press play) 

Here's how you do it...

Firstgo here and grab you embed code. If you're already using Olark, you'll recognize this as the code you previously posted above the </body> tag on your site. (If this is your first time installing Olark, follow the helpful instructions in this video.

olarkcode2.png

Next, you'll need to head over to HapYak, login to the portal, and open your project.

(If you're not a current HapYak user you can sign up for free (no credit card required).

Once you have your project open, you'll create an iframe annotation. You can paste in the code as you see in this image: hapyakinsert.png

Finally, you'll want to position the iframe at the bottom of the video, then set the start time and duration. Typically the start time is 0 ("zero") and the duration is "entire video." 

starttime.png

A few things to keep in mind:

An Olark chat box in a video is helpful, but it functions slightly different than a normal chat box. Here's how:

  • Customers will appear to be viewing a page URL that starts with https://hapyak_uploads... rather than a page on your site.
  • If the customer navigates to a new page, the chat will not follow them to the new page. They will have to come back to the video to continue the conversation, or open a new chat tab on your site.
  • Your operator will not have the ability to see that the customer has navigated to a new page, and they will not be able to see what page they've gone to.

With live chat in video, as with any changes to your site or your chat box functionality, be sure to brief your support, service and/or sales team first. You may get visitors who want to chat specifically about what's in the video, but might not specifically say they are currently looking at the video.

Hope that helps, and leave any questions you might have in the comments section!

Diego Torres-Palma

Read more posts by Diego Torres-Palma