Dynamic Text Code for Publishers

If your content is organized into many tags (or categories), you don’t need to make a new lightbox for each tag. Our dynamic text code allows you to automatically insert text into a lightbox based on how the post it appears on is tagged.

First, write the Custom JS to grab the topic (or category) tag. The tag does not have to be visible to the user, it can be a hidden topic tag in the source code of the website. Then write the Custom JS to map the correct text in the lightbox based on the tag.

Here’s what this code might look like:

//topic tag
window.DIGIOH_API.topicTag_var = null;

try {
var Meta_Arr = document.getElementsByClassName("meta");
if (typeof Meta_Arr !== "undefined" &amp;&amp; Meta_Arr !== null &amp;&amp; Meta_Arr.length) {
var Parent_Element = Meta_Arr[0];
if (typeof Parent_Element !== "undefined" &amp;&amp; Parent_Element !== null) {
var aElements = Parent_Element.getElementsByTagName("a");
var topicElement = aElements[aElements.length - 1];
if (typeof topicElement !== "undefined" &amp;&amp; topicElement !== null) {
window.DIGIOH_API.topicTag_var = topicElement.innerText;
console.log('DIGIOH: CUSTOM JS ==&gt; topicTag_var: success: ' + window.DIGIOH_API.topicTag_var);
}
else {
console.log('DIGIOH: CUSTOM JS ==&gt; topicTag_var: topicElement');
}
}
else {
console.log('DIGIOH: CUSTOM JS ==&gt; topicTag_var: Parent_Element');
}
} else {
console.log('DIGIOH: CUSTOM JS ==&gt; topicTag_var: Meta_Arr');
}
}
catch (err) {
console.log('DIGIOH: CUSTOM JS ==&gt; topicTag_var: error - ' + err.message);
}

window.DIGIOH_API.topicTag_InegrationMap = [];

//Integration Map
var topicTagMap = [];
topicTagMap.push(["Cloud","Subscribe to our Cloud newsletter","Cloud","51670"]);
topicTagMap.push(["Storage","Subscribe to our Cloud newsletter","Cloud","51670"]);
topicTagMap.push(["Virtualization","Subscribe to our Cloud newsletter","Cloud","51670"]);
topicTagMap.push(["Big Data Analytics","Subscribe to our Big Data newsletter","Big Data ","51671"]);
topicTagMap.push(["Data Management","Subscribe to our Big Data newsletter","Big Data ","51671"]);
//insert-more-here
window.DIGIOH_API.topicTag_InegrationMap = topicTagMap;

Finally, add code to the Custom HTML section of the lightbox that will make sure correct text is displayed based on the tag. Make sure the HTML block in question is set to “on”.

Here’s a sample of what that code might look like:

<div id="dynamic_text" style="font-weight: bold; font-family: raleway; font-style: normal; text-decoration: none; text-align: left; font-size: 23px; color: #ffffff;">Here is the dynamic Newsletter</div>
<script>
//*************************************
//Custom HTML #1 - inside child lightboxes
//*************************************

function EditText(text) {
text = text.toLowerCase();
text = text.split(' ').join('');
return text;
}

$(document).ready(function() {
try {
var topicTag = parent.DIGIOH_API.topicTag_var;
var DynamicElement = document.getElementById('dynamic_text');
var TopicTag_Text = '';
var TopicTag_IntegrationID = '';
if (topicTag !== null) {
logger('Test:::: ' + 'DIGIOH CUSTOM HTML: ' + 'found topic tag::  ' + topicTag);
logger('Test::::  ' + 'DIGIOH CUSTOM HTML: ' + 'Integration map loaded succefully and it contains ' + parent.DIGIOH_API.topicTag_InegrationMap.length + ' elements');
for (var i = 0; i &lt; parent.DIGIOH_API.topicTag_InegrationMap.length; i++) { if (EditText(parent.DIGIOH_API.topicTag_InegrationMap[i][0]).indexOf(EditText(topicTag)) &gt;= 0) {
TopicTag_Text = parent.DIGIOH_API.topicTag_InegrationMap[i][1];
TopicTag_IntegrationID = parent.DIGIOH_API.topicTag_InegrationMap[i][3];
logger('Test:::: ' + 'DIGIOH CUSTOM HTML: ' + 'Found the topic tag in the map:::: ' + TopicTag_IntegrationID + ' :::: ' + TopicTag_Text);
break;
}
}
}

if (TopicTag_Text == '') {
TopicTag_Text = 'Subscribe to our Innovations Weekly newsletter';
}
if (TopicTag_IntegrationID == '') {
TopicTag_IntegrationID = '51676';
}
//set the lightbox dynamictext
DynamicElement.innerText = TopicTag_Text;

//set the integration
if (TopicTag_IntegrationID &amp;&amp; parent.DIGIOH_API.LIGHTBOX.hasOwnProperty('INTEGRATION_MAP') &amp;&amp; typeof parent.DIGIOH_API.LIGHTBOX.INTEGRATION_MAP === 'object') {
parent.DIGIOH_API.LIGHTBOX.INTEGRATION_MAP[LIGHTBOX_GUID] = TopicTag_IntegrationID;
logger('Test:::: ' + 'DIGIOH CUSTOM HTML: ' + 'successfully set custom integration map in api: ' + TopicTag_Text);
logger(parent.DIGIOH_API.LIGHTBOX.INTEGRATION_MAP);
}
else {
logger('Test:::: ' + 'DIGIOH CUSTOM HTML: ' + 'could not set custom integration map in api');
}

}
catch (err) {
logger('DIGIOH CUSTOM HTML: ' + 'error - ' + err.message);
}
});
</script>

If you need help setting up the dynamic text code, we’re here to help! Send us an email and we’ll get you up and running in no time.

Knowledge Base

Dynamic Text Code for Publishers