I am placing a script that gives the chat functionality in my application, if I place it inside the index.html in the header section, it is loaded correctly and the chat works fine, the problem is that I must show it dynamically through a parameter that decides if it is displayed or not inside a component, the script is like the following
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'XXX';
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;
c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>
I've tried taking the JavaScript code out and putting it inside a function in the component but it doesn't work.
Searching I found this code but it doesn't seem to work either
var loadJS = function(implementationCode, location){
//url is URL of external file, implementationCode is the code
//to be called from the file, location is the location to
//insert the <script> element
var scriptTag = document.createElement('script');
scriptTag.onload = implementationCode;
scriptTag.onreadystatechange = implementationCode;
location.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'XXX';
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;
c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
}
loadJS(yourCodeToBeCalled, document.body);
You can create a separate file with your script, example "loadChat.js", which would contain the code you mention
And in the component that you need to start it, you can use jquery to put it in your index like so:
This way the script is loaded dynamically when you need it.
The script creates a div with id
chat-application
. You can leave the script in the index.html and from the components modify the visibility of the div.If you want to hide:
If you want to show: