1

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);
1

2 respuestas 2

2

Puedes crear un archivo independiente con tu script, ejemplo "cargarChat.js", que contendría el código que mencionas

<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>

Y en el componente que necesitas iniciarlo, puedes utilizar jquery para ponerlo en tu index asi:

$.getScript(nameScript, function (data, estado) {
      if (estado == 'success') {
        console.log("Cargado script");
      }
      else {
        alert("Error al cargar la librería autocomplete");
      }
    });

De esta manera el script se carga dinámicamente cuando lo necesites.

1

El script crea un div con id chat-application. Puedes dejar el script en el index.html y desde los componentes modificar la visibilidad del div.

Si se quiere ocultar:

document.getElementById('chat-application').style.display = "none";

Si se quiere mostrar:

document.getElementById('chat-application').style.display = "block";
1
  • Gracias me diste la idea para solucionar el problema
    – Alejandro
    Commented el 27 oct. 2020 a las 13:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.