Integración de Tawk.to con GatsbyJs

Esta semana me asignaron la tarea de integrar Tawk.to, un live chat (Gratis) para conectar con posibles clientes en tiempo real.

La comunidad de Gatsby es muy grande y al buscar en su lista de plugins encontré gatsby-plugin-tawk pero desafortunadamente en la actualidad no funciona.

Así que buscando encontré una forma de agregarlo bastante simple.

Lo primero que debemos hacer es ir tawk.to y crear tu widget.

Luego ir a gatsby-browser.js y utilizar una de sus APIs onInitialClientRender. Si no tienes este archivo puedes crearlo en tu directorio base.

Agregamos el siguiente código:

export const onInitialClientRender = () => {}

y dentro del mismo agregamos nuestro código del widget que nos suministra tawk.to de la siguiente forma, eliminando el tag script y los comments.

export const onInitialClientRender = () => {
  var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
  (function(){
  var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
  s1.async=true;
  s1.src='https://embed.tawk.to/{TU-KEY}/{TU-ID}';
  s1.charset='UTF-8';
  s1.setAttribute('crossorigin','*');
  s0.parentNode.insertBefore(s1,s0);
  })();
  }

gatsby develop y listo!

Con eso te debería de funcionar correctamente.