Requirements
Hippo Video Account. Sign-up here if you are a new user. 

To embed a personalized video 

  1. Login to Hippo Video with your existing credentials.

  2. Add a video by either recording a new video or choose an existing video from the Library, and personalize it.

To record a video 

  1. Click on Start Recording to record your message.

  2. Click on Finish Recording when done

To choose an existing video 

  1. Click on the Choose from library button located on the bottom right tab

  2. All your pre-recorded videos shall be sorted by categories and displayed here. Select a video and click on Continue.
    Note: Irrespective of whether it’s a newly recorded video or an existing video, it can be personalized in the edit step.

To personalize your video 

  1. Click on Edit video and click on the “T” text icon.

  2. Now click on +Merge Fields and then choose the First Name from the list. Enter the name you wish to personalize and hit Save
    Note: You can personalize the video with more than one merge field like recipient’s last name, company name, email, etc. as per your requirement and video content.

 

There are 2 ways to personalize a video

  1. Generating the code 

  2. Embedding a personalized URL

Generating the code  

  1. In the preview layout, click on Publish Video > Inline Embed > Embed option on the tab to the right. 

  2. Click on Copy Code and paste the code to your website. Now you can see the video without personalization. 

  3. If you want to see the personalization in the video, you need to send the parameter which you have already personalized in Quick Edit.

  1. Once you pass the value, your video shall display the personalized name. 

Embedding a personalized URL

In the preview layout, click on Publish Video > Inline Embed > Embed option on the tab to the right. 

Example code without personalization

<iframe class="hippo-embed-frame" width='1080' height='612' scrolling='no' frameborder=0 marginwidth=0 marginheight=0 src='https://support-watch.hippovideo.io/video/embed/TAonzVxn6UMGe6iyqRsxkw?autoplay=false' allowfullscreen ></iframe><script>window.hippoEmbedSeo = "";</script><script src="https://hippo-embed-scripts.s3.amazonaws.com/video-delivery-embed.js" async></script>

Example code with personalization

<iframe class="hippo-embed-frame" width='1080' height='612' scrolling='no' frameborder=0 marginwidth=0 marginheight=0 src='https://support-watch.hippovideo.io/video/embed/TAonzVxn6UMGe6iyqRsxkw?First Name=John?autoplay=false' allowfullscreen ></iframe><script>window.hippoEmbedSeo = "";</script><script src="https://hippo-embed-scripts.s3.amazonaws.com/video-delivery-embed.js" async></script> 

Use Case Example :

Check out the website given below on how to personalize inside a video.

Website URL : https://www.hippovideo.io/video-personalization.html

Text box code :

<input class="form-control" id="heroInput" placeholder="Enter your name and get ready to be surprised" />

  <button class="btn btn-primary vp-head-btn" type="button" aria-label="Get user name" onclick="getHeroName()">SUBMIT</button>

Iframe code :

<iframe class="hippo-embed-frame" id="pvIframe" width='1080' height='612' scrolling='no' frameborder=0 marginwidth=0 marginheight=0 src='https://support-watch.hippovideo.io/video/embed/TAonzVxn6UMGe6iyqRsxkw?autoplay=false' allowfullscreen ></iframe><script>window.hippoEmbedSeo = "";</script><script src="https://hippo-embed-scripts.s3.amazonaws.com/video-delivery-embed.js" async></script>

Script code :

<script>

  function getHeroName() {

    var x = document.getElementById('heroInput').value;

    if (!x) {

      $('.error-text').css('display', 'inline-block');

      setTimeout(function() {

        $('.error-text').css('display', 'none');

      }, 3000);

    } else {

      var src = $('#pvIframe').attr('data-src');

      var index1 = src.indexOf('?');

      if (index1 != -1) {

        src = src + "&first_name=" + x;

      } else {

        src = src + "?first_name=" + x;

      }

      $('#pvIframe').attr('src', src);

      var offset = $('#pvIframe').outerWidth() / 1.777;

      $('#pvIframe').height(offset + 'px');

    }

  }

</script>