Using JavaScript code in theme files

If you want to add a custom JavaScript code to your mini-site or merchant/affiliate panel, it can be added to the theme files of your custom theme. JavaScript code can be added only in the files with the extension .stpl.

As the theme files utilize the Smarty engine, curly brackets are considered a Smarty code, so if they are used in your JavaScript code, it must be either enclosed within the literal tags, or each { and } needs to be replaced by {ldelim} and {rdelim}. See our guide on how to add a FlowHunt chatbot as an example.

{literal}
<script type="text/javascript">
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.defer=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://mycompany.ladesk.com/scripts/track.js',
function(e){ LiveAgent.createButton('1234abcd', e); });
</script>
{/literal}
<script type="text/javascript">
(function(d, src, c) {ldelim} var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.defer=true;s.src=src;s.onload=s.onreadystatechange=function(){ldelim}var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){ldelim}return;{rdelim}c(this);{rdelim};t.parentElement.insertBefore(s,t.nextSibling);{rdelim})(document,
'https://mycompany.ladesk.com/scripts/track.js',
function(e){ldelim} LiveAgent.createButton('1234abcd', e); {rdelim});
</script>

Usage of a JavaScript code in .tpl theme files is not allowed, although if you need to execute a script even in a .tpl file, e.g. if you want to execute your JavaScript only after a specific part of the panel is loaded, you can add your script via a hidden HTML image with an onload attribute, calling a JavaScript function defined e.g. in main_aff_html_doc.stpl.

Hiddem image added to selected .tpl file:

<img style="display:none" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4//8/AAX+Av4D4zgwAAAAAElFTkSuQmCC" onload="myFunction()">

Script added to .stpl file:

{literal}
<script>    function myFunction() {        console.log("Execute my code when image is loaded");    } </script>
{/literal}
×