Print
Embed Media In Wordpress

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


Create a Landing Page on Wordpress

1. Create a new page, or select an existing page on your wordpress site. 

2. Both image and video templates can be embedded within an 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 :

http://3.138.125.71/embed-media-demo/


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 Wordpress

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 block within your Wordpress page

5. Click on Update to confirm the changes. 




Embed Video in Wordpress

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 component within Wordpress

3. Click on Update to confirm the changes. 



This is how the preview of the landing page currently looks:




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:

http://3.138.125.71/embed-media-demo/

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:

http://3.138.125.71/embed-media-demo/?type=it&VAR_USERNAME=Inder&VAR_DOMAIN=indusved.com



Your custom landing page is ready to be shared with your prospects!

Was this article helpful?
Nexweave Knowledge Base | 2021