Open navigation

Embed a personalized video

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 and personalize it: 

  1. Click on Library icon from the left navbar > Videos and Documents All Assets > select the video you wish to personalize.

  2. Below the video preview, click on the Edit & Personalize button > Quick Edit. For more details on Quick Edit, click here.

  1. 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. On the right side of the video preview, click on the Share/Embed Code icon.

  1. Select Inline Embed from the Embed drop-down. 

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

  2. 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>


To check out other topics related to this topic. 


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.