How to deploy a Digital DX widget via GTM? (Arcade and Modern widget)

How to deploy a Digital DX widget via GTM? (Arcade and Modern widget)

Note: If you use Slim widget or newer, see How to deploy the Digital DX widget via GTM?.

To implement the widgets via GTM, you must use the following widget script in your GTM:

< script type = 'text/javascript' >
    var nanoProxyContainer = document.createElement("div");
nanoProxyContainer.id = 'NanorepProxyContainer';
nanoProxyContainer.setAttribute("aria-live", "polite");
nanoProxyContainer.style.position = "absolute";
nanoProxyContainer.style.top = "-500px";
nanoProxyContainer.left = "0px";
document.body.appendChild(nanoProxyContainer);
var _nRepData = _nRepData || [];
_nRepData['kb'] = '19583554';
_nRepData['float'] = {
    account: 'Nanorep',
    cdcVersion: 3,
    cdcFrame: '',
    scriptVersion: '3.6.1.13'
} /* API here */ ;
(function() {
    var windowLoadFunc = function() {
        var _nRepData = window._nRepData || [];
        _nRepData['windowLoaded'] = true;
        if (typeof(_nRepData['windowOnload']) === 'function') _nRepData['windowOnload']();
    };
    if (window.attachEvent) window.attachEvent('onload', windowLoadFunc);
    else if (window.addEventListener) window.addEventListener('load', windowLoadFunc, false);
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.async = true;
    sc.defer = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'my.Nanorep.com/widget/scripts/float.js';
    var _head = document.getElementsByTagName('head')[0];
    _head.appendChild(sc);
})(); < /script>

Figure 1. Floating Widget Script
<script>
    var NanorepEmbedContainer = document.createElement("div");
NanorepEmbedContainer.id = 'NanorepEmbedContainer';
NanorepEmbedContainer.setAttribute("aria-live", "polite");
[TARGET - ELEMENT].appendChild(NanorepEmbedContainer);
var _nRepData = _nRepData || [];
_nRepData['kb'] = '19583554'; /* API here */ ;
_nRepData['embed'] = {
    account: 'Nanorep',
    container: 'NanorepEmbedContainer',
    width: 400,
    maxHeight: 500,
    dynamicSize: true,
    cdcFrame: '',
    cdcVersion: 3,
    scriptVersion: '3.6.1.13'
};
(function() {
    var windowLoadFunc = function() {
        var _nRepData = window._nRepData || [];
        _nRepData['windowLoaded'] = true;
        if (typeof(_nRepData['windowOnload']) === 'function') _nRepData['windowOnload']();
    };
    if (window.attachEvent) window.attachEvent('onload', windowLoadFunc);
    else if (window.addEventListener) window.addEventListener('load', windowLoadFunc, false);
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.async = true;
    sc.defer = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'my.Nanorep.com/widget/scripts/embed.js?account=nanorep';
    var _head = document.getElementsByTagName('head')[0];
    _head.appendChild(sc);
})(); </script>

Figure 2. Embedded Widget Script
Note: Replace the sections in bold with the relevant values.