DEV Community

Alexei Garban
Alexei Garban

Posted on

2 2

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 = () => {}
Enter fullscreen mode Exit fullscreen mode

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);
  })();
  }
Enter fullscreen mode Exit fullscreen mode

gatsby develop y listo!

Con eso te debería de funcionar correctamente.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more