Help

Javascript

Nexweave recently updated its UI and got a new look! You will notice differences (especially in the colours) between the graphics and screenshots you see in this article and the corresponding sections within the Nexweave platform. Don’t worry though, because the steps and processes this article details remain the same. Moreover, we’re going to updating this article to reflect our platform changes very soon. Stay tuned and keep reading!

HTML Setup

Personalized Video Experience

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

^{<!DOCTYPE html>}

^{<html lang="en">}

^<head>

^{<title>Nexweave SDK</title>}

^{}

^{<script data-default-nexweave-experience='z0qCDvC6I' service-id='3' src="https://script.nxwv.io/embed-v1.0.1.js"></script>}

^</head>

^<body>

^{}

^{<div style="max-width: 40vw; margin: 0 auto;">}

^{}

^{<div id="nexweave"></div>}

^</div>

^</body>

^</html>

Personalized Image

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

STEPS

Create a Campaign. (Quick/CSV/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.

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.

<!DOCTYPE html>

<head>

<title>Nexweave SDK</title>

</head>

<body>

</body>

</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:

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.

Example.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Nexweave SDK</title>
        <!-- Replace the value of 'data-default-nexweave-experience' with your default experience-id -->
        <script data-default-nexweave-experience='z0qCDvC6I' service-id='3' src="https://script.nxwv.io/embed-v1.0.1.js"></script>
    </head>
    <body>
        <span data-nexweave-text-template="Hello {{ [USERNAME] || User }}"></span>
    </body>
</html>
Override variablesYou 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:
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Nexweave SDK</title>
    <!-- Replace the value of 'data-default-nexweave-experience' with your default experience-id -->
    <script data-default-nexweave-experience="kFmbjYL_M" service-id="3" src="https://script.nxwv.io/embed-v1.0.1.js"></script>
    <script>
        window.onload = function () {
            nexweave.init({
                NAME: 'Ashutosh',
                DISCOUNT: 'Upto 50% OFF',
                CTA: 'Check out our deal'
            })
        };
    </script>
</head>
<body>
    <div id="nexweave" style="max-width: 40vw; margin: 0 auto;"></div>
</body>
</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.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Nexweave SDK</title>
    <!-- Replace the value of 'data-default-nexweave-experience' with your default experience-id -->
    <script  data-default-nexweave-experience="kFmbjYL_M" service-id="3" src="https://script.nxwv.io/embed-v1.0.1.js"></script>
    <script>
        function overrideVariables(name) {
            nexweave.setValues({
                NAME: name,
            })
        }
    </script>
</head>

<body>
    <div id="nexweave" style="max-width: 40vw; margin: 0 auto;"></div>
    <button onclick="overrideVariables('John');">Create experience for John</button>
    <button onclick="overrideVariables('Mike');">Create experience for Mike</button>
</body>
</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 )

Was this article helpful?

How can we help you?

HTML Setup

Personalized Video Experience

Personalized Image

Personalized Text

Override variables