estoy colocando un script que da la funcionalidad de chat en mi aplicación, si lo coloco dentro del index.html en la sección del header este es cargado de forma correcta y el chat funciona bien, el problema es que debo mostrarlo de forma dinámica mediante un parámetro que decide si se muestra o no dentro de un componente, el script es como el siguiente
<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>
He intentado sacar el código JavaScript y colocarlo dentro de una función en el componente pero no funciona.
buscando encontre este codigo pero tampoco parece funcionar
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);