1. Log-in to Hippo Video using your existing credentials. 

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

  3. To record a video:

  4. Click on ‘Start recording’ to record your message.

  5. Click on ‘Finish Recording’ when done. 

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

       5. To personalize your video

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


    1. Now click on ‘+Merge Fields’ and then choose ‘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 : 

6. In the preview layout, click on ‘Publish Video’ on the tab to the right, and select ‘Inline Embed’ under the ‘Embed’ option. 

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

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

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

Embedding a personalized URL

10. In the preview layout, click on ‘Publish Video’ on the tab to the right, and select ‘Inline Embed’ under the ‘Embed’ option. 

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>