Skip to content

Web Integration

Requirements

This setup assumes you have already setup your App Key on the Dashboard.

Integration Steps

Install Contextual in your web project. Add this script into your index.html file. 
1
<script>!function(e,t){!function(){var e="https://sdk.contextu.al/web/",n=[e+"styles.css"],o=[e+"main.js"];n.forEach(function(e){var n=t.createElement("link");n.rel="stylesheet",n.href=e,(t.body||t.head).appendChild(n)}),o.forEach(function(e){var n=t.createElement("script");n.setAttribute("defer",!0),n.setAttribute("async",!1),n.src=e,(t.body||t.head).appendChild(n)})}(),e.Contextual=e.Contextual||{ready:function(t){var n=0,o=setInterval(function(){if(e.Contextual.register||1200==n)return clearInterval(o),void(1200==n?console.error("Time out! Contextual sdk not loaded."):"function"==typeof t&&t());n++},100)}}}(window,document);</script>
Put initial code to your main Javascript file, example:

For general website, put the code inside your main.js.

For Angular web app, you can register user right after they enter the app by putting the code into `root component`.

Don't worry about `USER_ID`, you can set it later by sending `user_id` tag. It is a string tag. More detailed angular instructions [here](/sdks/web/angular/) 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
Contextual.ready(function() {

    // USER_ID is optional.
    // You can set it later by sending user_id tag. It is string tag.
    Contextual.register( APP_KEY, USER_ID ).then(function() {
        // Send String Tag
        let key = "first_name";
        let value = "My First Name";
        Contextual.tag.string(key, value);
    });
});

Note

To get your APP_KEY, go to dashboard.contextu.al, where you can see it's name at the top left of the screen.
USER_ID is the name you want to give to your install-id.

This name is up to you. For more info visit the Tagging documentation.

When you call register method, USER_ID is optional, you can set it later by sending user_id tag, it is string tag.

User Tagging

You can tag users/devices from your SDK in one line of code.

The SDK looks after the details for the device, you just supply the tag key and value:

  • The tag name (key) is what you want to call it. In the example below "Plan-49" is how you will see this in the Contextual Dashboard.
  • Contextual supports tags of: string, numeric and datetime. In the example below, the value for "Plan-49" is "Trial-Period".

String Tags

1
2
3
let key = "Plan-49";
let value = "Trial-Period";
Contextual.tag.string(key, value);

Numeric Tags

1
2
3
let key = "BidValue";
let value = 549;
Contextual.tag.numeric(key, value);

Datetime Tags

1
2
3
4
5
6
7
8
9
// Tagging using predefined Contextual tag.
let key = "sh_registered";
let value = new Date();
Contextual.tag.datetime(key, value);

// Tagging using custom tag.
let key = "Birthday";
let value = new Date();
Contextual.tag.datetime(key, value);

Increment Tag Value

1
2
let key = "PageVisited";
Contextual.tag.increment(key);

Setup Content-Security-Policy(CSP) (Optional)

If your website ( web app ) uses CSP to restrict resource loading then you should add the below settings to the white list to allow your website to use resources ( JS, CSS, images, etc... ) from Contextual. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
*.contextu.al

*.streethawk.com

*.storjshare.io

cdn.filestackcontent.com

https://static.filestackapi.com/picker/1.24.1/picker.js

https://static.filestackapi.com/picker/1.23.0/main.css

Note

If you want to use external resources e.g. loading a image from facebook then you should add "*.facebook.com" to the white list.

Last update: 2024-01-14