Embed personalized image and video templates created on Nexweave on your website, custom sales pages or landing pages. In just a few steps, you can create an unforgettable experience for your prospects!
In this article, we will walk you through embedding a personalized image and video in your landing page built on Landingi.
Create a Landing Page on Landingi
1. Create a new landing page, or choose an existing landing page to edit on Landingi
2. On Landingi, both image and video templates can be embedded within HTML component. Therefore, Add an HTML component to your landing page layout.
3. Once your landing page is designed, save and publish it, to generate a URL. In our demonstration, we have created a sample landing page with URL :
https://www.custream.com/2da20988-d347-11eb-88f0-b670ae41d1ef
In the next few steps we will be embedding a personalized image/video here
Run a Campaign on Nexweave
A Nexweave campaign will allow us to select the image or video we want to embed, and then generate the HTML code that we can paste into our landing page. The steps below detail how you can run a quick campaign to generate the required codes
1. Identify the template you want to use from within the Image or Video template libraries. If you don’t have a ready template, you can also create a new template
2. Once your template is identified, click on the menu against the template and select use
3. In this page, you can edit the variable values on the right, and click on Test to test the template for the variables.
4. To generate the embed codes, type in a campaign name, and click on Quick Campaign.
Please note: while we have used a quick campaign to generate the embed codes, you can also run a URL Override or Bulk Link Campaign to select your templates and generate the required HTML codes.
Embed Image in Landingi
1. The embed code and experience ID for the Image template will be generated once the quick campaign is launched
2. Before we proceed with adding this image to the landing page, add an attribute to the image embed code. Modify the image embed code, such that it takes the format:
<img src=”” data-nexweave-image=”experienceID” alt="Nexweave Image" style="width: 100%">
where the experience ID can be obtained from the Experience URL tab of the launched Quick Campaign
3. In our demonstration, our experience ID is txoqT0A9w
So our modified embed code becomes:
<img src="" data-nexweave-image="txoqT0A9w" alt="Nexweave Image" style="width: 100%">
4. Copy this modified image embed code and paste it into the HTML component within Landingi.
5. Click on Save to confirm the changes.
Embed Video in Landing Page
1. The embed codes for the video template will be generated, once the quick campaign is launched
2. Copy the video embed code from this page, and paste it into the HTML module within Landingi
3. Click on Save to confirm the changes.
This is a preview of how the landing page looks with the embedded media:
It currently displays the placeholder values. This is because we have not specified any values that the variables in the templates should take.
The next few steps will walk you through how you can replace the placeholder values with your audience information!
Overriding the placeholder values
Now that you have successfully embedded your video and image template into your custom landing page, let’s take a look at how you can override the placeholder values in the templates
As can be seen in the attached media above, our image template and video template have the same 2 variables:
USERNAME
DOMAIN
Please note: It is not necessary for the 2 templates to have the same variables.
We can use these image and video template variables and modify the landing page URL to personalize it! Here’s how:
1. As noted above, the landing page URL in our example is:
https://www.custream.com/2da20988-d347-11eb-88f0-b670ae41d1ef
2. Append this URL and modify it with the following syntax:
landingpageURL?type=it&VAR_VARIABLE1=value1&VAR_VARIABLE2=value2
And so on...
where VARIABLE1, VARIABLE2 etc are the variables used in your image and video templates. And value1, value2 etc are the respective values you would like the variables to take
3. Please Note the following:
The prefix “VAR_” before every variable is necessary to be able to override it
If you have used different variables in your image and video templates, you have to mention each to override them
If a variable is common to both templates, you only need to list it in the modified URL once
4. For example- If i want the variables to take the values:
USERNAME: Inder
DOMAIN: indusved.com
My URL becomes:
Your custom landing page is ready to be shared with your prospects!