En esta guía encontrarás una opción para que tus chatbots Widgets (Normal y de WhatsApp) funcionen y se desplieguen en tus páginas creadas con WordPress con Plugins de rendimiento, tendrás que personalizar un poco el script que te genera Clientify, es un proceso fácil si sigues correctamente los pasos que te mostraremos a continuación:
Primero vas a necesitar el código que genera el chatbot al momento de ser publicado, vas a seleccionar el contenido del src del
scripty le vas a dar click derecho de esta manera:
Le das click en ir:
Ahora copia todo el código que te aparece en la nueva pestaña:
En este punto necesitarás un editar de código, puedes usar el de tus preferencias como Sublime Text, Visual Studio Code, Notepad++, o uno online.
Ahora entraras en el IDE, crearas un nuevo archivo y pegaras el código del chatbot:
Código Original con `document.write()`:
document.write('<script async>(function (w, d) {var iapp = d.createElement("chatbot-root");d.getElementsByTagName("body")[0].appendChild(iapp);w.Clientify_botId = "000000";w.Clientify_botUserId = "24";var h = d.head || d.getElementsByTagName("head")[0];var s = d.createElement("script");s.setAttribute("type", "text/javascript");s.setAttribute("src", "https://api.clientify.net/static/js/chatbot/launcher/launcher.js");h.appendChild(s);})(window, document);</script>')
1. Uso de `document.write()`: Este código utiliza `document.write()` para escribir un nuevo script en el documento actual de forma síncrona.
Código Transformado:
Deberás copiar el código desde (function (w, d) hasta (window, document); luego lo remplazaras el contenido del script.innerHTML del siguiente código:
Deberás tener este código en tu IDE para pegar el código que se te menciona anteriormente:
// Crear un nuevo script element
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
// Contenido del script
script.innerHTML = `(function (w, d) {var iapp = d.createElement("chatbot-root");d.getElementsByTagName("body")[0].appendChild(iapp);w.Clientify_botId = "000000";w.Clientify_botUserId = "24";var h = d.head || d.getElementsByTagName("head")[0];var s = d.createElement("script");s.setAttribute("type", "text/javascript");s.setAttribute("src", "https://api.clientify.net/static/js/chatbot/launcher/launcher.js");h.appendChild(s);})(window, document);
`;
// Agregar el script al elemento body
document.body.appendChild(script);
Explicación de la Transformación:
1. En lugar de utilizar `document.write()` para escribir en el documento, creamos un nuevo elemento de script utilizando `document.createElement('script')`.
2. Configuramos el tipo de script como 'text/javascript' y lo marcamos como asíncrono.
3. En lugar de crear un nuevo script dinámicamente dentro del script cargado, el código transformado carga el script externo del chatbot directamente dentro de la función anónima, después de un retraso de 1000 ms.
Luego deberás copiar el código que has personalizado y pegarlo dentro de un elemento script de esta manera:
<script>
// Crear un nuevo elemento script
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
// Definir el contenido del script
script.innerHTML = `(function (w, d) {var iapp = d.createElement("chatbot-root");d.getElementsByTagName("body")[0].appendChild(iapp);w.Clientify_botId = "000000";w.Clientify_botUserId = "24";var h = d.head || d.getElementsByTagName("head")[0];var s = d.createElement("script");s.setAttribute("type", "text/javascript");s.setAttribute("src", "https://api.clientify.net/static/js/chatbot/launcher/launcher.js");h.appendChild(s);})(window, document);`;
// Agregar el elemento script al cuerpo del documento
document.body.appendChild(script);
</script>
Ahora pega este código en tu sitio web, y ya te funcionará sin inconvenientes.
Recuerda que si tienes alguna duda comunícate con el chat de soporte para mayor información y asesoramiento técnico.