¿Cómo instalar un chat en vivo en una aplicación Next.js?

Si tienes una aplicación Next.js, puedes agregar el widget de chat en vivo de Super Chat y hablar con tus visitantes en tiempo real. Para integrar Super Chat con tu aplicación Next.js, necesitas un componente que cargue el script de Super Chat.

Puedes hacerlo en dos pasos rápidos. A continuación te lo ilustramos con un ejemplo. Este ejemplo muestra un componente de React que carga el script de Super Chat de forma asíncrona.

Paso 1. ¡Copia y crea!

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

import React from 'react';

class ChatwootWidget extends React.Component {
  componentDidMount () {
    // Add Super Chat Settings
    window.chatwootSettings = {
      hideMessageBubble: false,
      position: 'right', // This can be left or right
      locale: 'en', // Language to be set
      type: 'standard', // [standard, expanded_bubble]
    };

    // Paste the script from inbox settings except the <script> tag
    (function(d,t) {
      var BASE_URL="<your-installation-url>";
      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.chatwootSDK.run({
          websiteToken: '<your-website-token>',
          baseUrl: BASE_URL
        })
      }
    })(document,"script");
  }

  render () {
    return null;
  }
}

export default ChatwootWidget

Paso 2. Importar

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

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

import ChatwootWidget from '../components/ChatwootWidget'

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

export default Page

Ahora deberías poder ver el widget de Super Chat en la página.