Print
Javascript

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>

        <!-- 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>

        <!--Set width for the player, height will be auto wrt the video aspect ratio -->

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

            <!--The div element for the nexweave player -->

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

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

        <img src="" data-nexweave-image="y3AWj1sZN" alt="Nexweave Image" style="width: 40%">

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


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

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


<!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?
Nexweave Knowledge Base | 2021