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.