Using Piano Content with a template but without an IFRAME
In cases where the target page already has a lot of CSS that you want to apply to the Cxense Content recommendations, using the "Template" but without an iFrame is an integration alternative, because the CSS styles of the parent page will automatically apply to the Content items.
Recommended for responsive layouts where the widget needs to adopt automatically to changes of size and orientation.
The Cxense Content widget configuration needs only a "Content" and "Template" for this approach:
Asynchronous version
The loading of the Cxense library "cx.js" is only needed for standalone testing in a HTML file for example.
In production the page must to be tracked by Cxense, which already has loaded the "cx.js" library. In that case you don't need this part
<!-- Async load cx.js -->
<!-- Cxense Content naming scheme
YOU NEED TO REPLACE *ALL* Widget ID occurrences with your Cxense Content Widget ID!
widget id : bd92baba25e188fbfc12a600de282d558e67cf
target id : "cx_<widget id>" : cx_bd92baba25e188fbfc12a600de282d558e67cf
template : "cx_temp_<widget id>" : cx_temp_bd92baba25e188fbfc12a600de282d558e67cf
-->
<!-- The recs items are rendered into this div -->
<div id="cx_bd92baba25e188fbfc12a600de282d558e67cf"></div>
<!-- The invisible template -->
<div id="cx_temp_bd92baba25e188fbfc12a600de282d558e67cf" style="display: none;"></div>
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
var cxwid = 'bd92baba25e188fbfc12a600de282d558e67cf';
// asynchronous cX function call
cX.callQueue.push(['insertWidget',{
widgetId: cxwid,
renderFunction: function(data, context) {
document.getElementById('cx_temp_'+context.widgetId).innerHTML = data.response.template;
cX.renderTemplate('cx_temp_'+context.widgetId, 'cx_'+context.widgetId, data, context);
}
}]);
</script>
<!-- Async load cx.js -->
<!-- ONLY needed if not loaded already! -->
<script type="text/javascript">
(function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async';
e.src='http'+('https:'===location.protocol?'s://s':'://')+'cdn.cxense.com/cx.js';
t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script');
</script>
Synchronous version
The asynchronous version is recommended.
Only use a synchronous approach, if you are aware of all side effects with regard to your page loading!
<!-- Cxense Content naming scheme
YOU NEED TO REPLACE *ALL* Widget ID occurrences with your Cxense Content Widget ID!
widget id : bd92baba25e188fbfc12a600de282d558e67cf
target id : "cx_<widget id>" : cx_bd92baba25e188fbfc12a600de282d558e67cf
template : "cx_temp_<widget id>" : cx_temp_bd92baba25e188fbfc12a600de282d558e67cf
-->
<!-- ONLY needed if not loaded synchronous already! -->
<script type="text/javascript" src="http://cdn.cxense.com/cx.js"></script>
<!-- The recs items are rendered into this div -->
<div id="cx_bd92baba25e188fbfc12a600de282d558e67cf"></div>
<!-- The invisible template -->
<div id="cx_temp_bd92baba25e188fbfc12a600de282d558e67cf" style="display: none;"></div>
<script type="text/javascript">
var cxwid = 'bd92baba25e188fbfc12a600de282d558e67cf';
// synchronous cX function call
cX.insertWidget({
widgetId: cxwid,
synchronous: true,
renderFunction: function(data, context) {
document.getElementById('cx_temp_'+context.widgetId).innerHTML = data.response.template;
cX.renderTemplate('cx_temp_'+context.widgetId, 'cx_'+context.widgetId, data, context);
}
});
</script>
</div>
