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 choosing an existing video from the Library, and personalize it.

To record a video: 

1. Click on the red Circle button to record your message.

2. Click on the red Square button when done. 

To choose an existing video and personalize it: 

1. Click on the Assets icon from the left navigation bar > All Assets > open 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.

3. Click on the “T” text icon.

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

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

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

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

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