Welcome To Our Customer Service Portal


How to deploy Nanorep Widget via Tealium IQ?

The Tealium iQ tag management system puts you in control of third-party tag implementations, making it easy to deploy new vendor tags and make edits to existing ones in user friendly dashboard. It works similar to Google Tag Manager -  you need only to add Tealium tracking script on your website and all other tags will be inserted there by Tealium once the page loaded. 

You can read about this solution here: https://tealium.com/resources/tealium-iq/

 

How to setup Nanorep widget

You will need to create custom containers for Nanorep widgets in order to use them in Tealium.

1) When in Tealium dashboard => Tags section, click on  "+Add Tag" button in the top right corner:

2)  Add "Tealium Custom Container" there. In pop-up window you can keep the default setting, click on the Finish button.

3)  Now we need to Save/Publish created tag. Click on "Save/Publish" button in the top right corner of the dashboard:

4) Now, the crucial part - we will need to add Nanorep widget code to the Custom Container template. In order to do that click on the arrow near your Profile name in the top right corner and select "Manage Templates" option, in drop-down list choose Custom Container you created.

5)  In  the opened window, scroll down a bit till you see "Tag Library code" section. This is the place where widget code should be inserted. Press "Save Profile Template" button once it is done.

Code to be used

Important note: do not wrap code in <script> tags. 

For floating widget: 

//------------------Nanorep Widget--------------------------//

! function(t, e, o, c, n, a) {
    var s = this.nanorep = this.nanorep || {};
    s = s[e] = s[e] || {}, s.apiHost = a, s.host = n, s.path = c, s.account = t, s.protocol = "https:" === location.protocol ? "https:" : "http:", s.on = s.on || function() {
        s._calls = s._calls || [], s._calls.push([].slice.call(arguments))
    };
    var p = s.protocol + "//" + n + c + o + "?account=" + t,
        l = document.createElement("script");
    l.async = l.defer = !0, l.setAttribute("src", p), document.getElementsByTagName("head")[0].appendChild(l)
}("YOUR_ACCOUNT_NAME", "floatingWidget", "floating-widget.js", "/web/", "my.nanorep.com");

//------------------Nanorep Widget--------------------------//

Replace YOUR_ACCOUNT_NAME with your actual Nanorep account name

 

For embedded widget:

//------------------Nanorep Widget--------------------------//

var nanoRepEmbedContainer  = document.createElement("div");

nanoRepEmbedContainer.id  = 'nanorep-embedded-widget';

nanoRepEmbedContainer.setAttribute("aria-live", "polite");

TARGET-ELEMENT.appendChild(nanoRepEmbedContainer);

! function(t, e, o, c, n, a) {
    var s = this.nanorep = this.nanorep || {};
    s = s[e] = s[e] || {}, s.apiHost = a, s.host = n, s.path = c, s.account = t, s.protocol = "https:" === location.protocol ? "https:" : "http:", s.on = s.on || function() {
        s._calls = s._calls || [], s._calls.push([].slice.call(arguments))
    };
    var p = s.protocol + "//" + n + c + o + "?account=" + t,
        l = document.createElement("script");
    l.async = l.defer = !0, l.setAttribute("src", p), document.getElementsByTagName("head")[0].appendChild(l)
}("YOUR_ACCOUNT_NAME", "embeddedWidget", "embedded-widget.js", "/web/", "my.nanorep.com");

//------------------Nanorep Widget--------------------------//

Replace YOUR_ACCOUNT_NAME with your actual Nanorep account name and TARGET-ELEMENT with the reference of element which you want widget be embedded to. 

 

 

6) Repeat step 3  to reflect the changes you made. 

 

A detailed guide on how to create and publish custom container can also be found here: 

https://community.tealiumiq.com/t5/iQ-Tag-Management/Tealium-Custom-Container/ta-p/14015