HELP FILE

How to deploy the Bold360 ai 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/

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

  1. In the Tealium dashboard go to the Tags section and click on +Add Tag in the top right corner.



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



  3. Click Save/Publish in the top right corner of the dashboard.

  4. Click on the arrow near your Profile name in the top right corner and select Manage Templates.
  5. From the drop-down list choose the custom container you created.

  6. In the opened window, scroll down till you see the Tag Library code section.

    This is the place where widget code should be inserted.



    Important: Do not wrap the code in <script> tags.

    Widget type Code to be used
    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 Bold360 ai account name.

    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 Bold360 ai account name and TARGET-ELEMENT with the reference of element which you want widget be embedded to.

  7. Press Save Profile Template.
  8. 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