20min

Javascript Integration

Create a video template

1.Create a template using a custom variable.

Create video template
Create video template

2. Fill all the template details and publish the template.

Create an image thumbnail

1.Go to the "My Thumbnails" tab to create new image thumbnails.

2. Click on the "Create New Template" button.

Create image thumbnail
Create image thumbnail

3. Create an Image thumbnail using a custom variable and save the changes.

Create a campaign

1.Go to the "Campaign" tab to create a new campaign.

2. Fill the campaign name and description.

3. Select a template name from the "Video Template for Experience" dropdown.

4. Also select an Image thumbnail from the next dropdown, which you have created for the given template.

5. Personalize your landing page URL with ID and link ALIAS. eg. https://www.landing-page.com/?nexid=[ID]&alias=[ALIAS]

6. Click on "Save and Proceed".

Document image

7. On the "Connect Source" tab click on the "Choose source" button ( A modal will appear with the "Download template" button and "Upload file" ).

8. Click on the "Download template" button. ( This will download a sample CSV file with your template variables as headers ).

9. Fill the CSV file for bulk link generation.

10. Upload a filled sheet in the modal.

Upload CSV
Upload CSV

11. On upload success, go to the "Campaign" tab.

12. Search for the campaign you have created and launch the campaign.

13. Click on the refresh button and then download your sheet in CSV format.

HTML Setup

Personalized Video Experience

Here's the code for a basic HTML web page to render Nexweave video experience on your page.

Eg.

HTML
|

service-id is a platform key that defines on which platform you want to run SDK. Let's assume you want to run Nexweave SDK on Nexweave beta environment, so service-id will be "2" and for Nexweave App it will be "3"

Personalized Image

Personalized images can be embedded on any landing page using Nexweave SDK.

STEPS

  • Create a Campaign. (Quick/Bulk/URL Override any campaign will work)
  • Copy the default experience-id,
Note: default experience-id will be a Nexweave experience with the default values that were used while creating a Campaign. The below image displays how to get the default-experience-id.
Default-Experience-id
Default-Experience-id



  • Add the script tag in the head and replace the data-default-nexweave-experience value with the value copied in the previous step.
  • To add a personalized image, add an img tag (no need for src value), add an attribute data-default-nexweave-experience and set it's value with the copied value in the previous steps.

The script will look like below.

HTML
|

Personalized Text

On your webpage, you can personalized text with Nexweave variables.

Add data-nexweave-text-template data attribute in your HTML tag with text template as a value. Your HTML tag will look like this:

<span data-nexweave-text-template="Hello {{ [USERNAME] || User }}"></span>

In your data attribute, Hello {{ [USERNAME] || User }} = HTML template [USERNAME] = Nexweave Variable User = Fallback value

If Nexweave experience doesn't contain given Nexweave variable then fallback value will be used.

Eg.

HTML
|

Override variables

You can override default Nexweave variables with your custom variables.

Initialize experience

nexweave.init() function is used to initialize Nexweave experience. You can also override variables at the time initializing experience. Use the variable object as a parameter in the init function.

Eg.

HTML
|

Event perform

nexweave.setValues({var_1: 'some_value'}) function used to override Nexweave variables when specific event performed. Let's assume you want to override variables when the user clicks on a button. So in this scenario, you can call nexweave.setValues() function on button click

Eg.

HTML
|

( Note: if your landing page URL contains "nexid" as a parameter with value as shortid, generated from Nexweave platform then embed code will render a video experience corresponding to that shortid )

Note: On some platforms we can't directly add script tags, instead we can use custom javascript like below
JS
|





Updated 23 Nov 2021
Did this page help?
Yes
No