API & SDK
Javascript Integration

13min
Create a video template
1.Create a template using a custom variable.
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
﻿
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".
﻿
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 ).
Friendship day-template.csv
﻿
9. Fill the CSV file for bulk link generation.
10. Upload a filled sheet in the modal.
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.
generated-5f2da63d8201e142e65fd247-1596829562894.csv
﻿
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
<!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>
<!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>
﻿
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
﻿
﻿
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
<!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>
<!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.
Eg.
HTML
<!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>
<!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.
HTML
<!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>
<!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
Eg.
HTML
<!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>
<!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 )﻿
Note: On some platforms we can't directly add script tags, instead we can use custom javascript like below
JS

  (function (d, s, id) {
    var f = d.getElementsByTagName(s)[0];
    var script = d.createElement(s);
    script.async = true;
    script.setAttribute('src', '//script.nxwv.io/embed-v1.0.1.js');
    script.setAttribute('data-default-nexweave-experience', id);
    script.setAttribute('service-id', '3');
    f.parentNode.insertBefore(script, f)
    script.onload = function () {
      nexweave.init()
    };
  })(document, 'script', 'y3AWj1sZN');

  (function (d, s, id) {
    var f = d.getElementsByTagName(s)[0];
    var script = d.createElement(s);
    script.async = true;
    script.setAttribute('src', '//script.nxwv.io/embed-v1.0.1.js');
    script.setAttribute('data-default-nexweave-experience', id);
    script.setAttribute('service-id', '3');
    f.parentNode.insertBefore(script, f)
    script.onload = function () {
      nexweave.init()
    };
  })(document, 'script', 'y3AWj1sZN');
﻿
﻿