Cómo instalar WhatChat en una aplicación Next.js: Guía paso a paso para integrar live-chat

Esto se puede hacer en dos sencillos pasos. A continuación, te mostramos un ejemplo que ilustra cómo hacerlo. Este ejemplo muestra un componente de React que carga el script de WhatChat de manera asíncrona.

Paso 1: ¡Copia y crea! #

Copia el siguiente código y crea un archivo en tu carpeta components con el nombre WhatChatWidget.js.

import React from 'react';

class WhatChatWidget extends React.Component {
  componentDidMount () {
    // Configuración de WhatChat
    window.whatChatSettings = {
      hideMessageBubble: false,
      position: 'right', // Esto puede ser izquierda o derecha
      locale: 'es', // Idioma a establecer
      type: 'standard', // [standard, expanded_bubble]
    };

    // Pega el script de la configuración de la bandeja excepto la etiqueta <script>
    (function(d,t) {
      var BASE_URL="<tu-url-de-instalación>";
      var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=BASE_URL+"/packs/js/sdk.js";
      s.parentNode.insertBefore(g,s);
      g.async=!0;
      g.onload=function(){
        window.whatChatSDK.run({
          websiteToken: '<tu-token-de-sitio>',
          baseUrl: BASE_URL
        })
      }
    })(document,"script");
  }

  render () {
    return null;
  }
}

export default WhatChatWidget

Paso 2: Importar​ #

Importa el componente en tus páginas o en el componente de diseño, como se muestra a continuación.

import React, { Fragment } from 'react'
// ...

import WhatChatWidget from '../components/WhatChatWidget'

const Page = () => (
  <Fragment>
    <WhatChatWidget />
    <Component {...}>
  </Fragment>
)

export default Page

Ahora podrás ver el widget de WhatChat en la página.