Como instalar o chat ao vivo em uma aplicação Next.js

Se você utiliza Next.js na sua aplicação, é possível adicionar o widget de atendimento ao vivo do Wavoo AI e conversar com seus visitantes em tempo real. Para isso, basta seguir dois passos simples para carregar o script do widget de forma assíncrona.

1. Crie o componente WavooAIWidget

Crie um novo arquivo chamado WavooAIWidget.js dentro da pasta components da sua aplicação e adicione o seguinte conteúdo:

import React from 'react';

class WavooAIWidget extends React.Component {
  componentDidMount () {
    // Configurações do widget
    window.wavooaiSettings = {
      hideMessageBubble: false,
      position: 'right', // Pode ser 'left' ou 'right'
      locale: 'pt_BR',   // Idioma: pt_BR, en, es
      type: 'standard',  // 'standard' ou 'expanded_bubble'
    };

    // Script de carregamento do widget
    (function(d,t) {
      var BASE_URL = "https://app.wavoo.com.br";
      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 = true;
      g.onload = function() {
        window.wavooaiSDK.run({
          websiteToken: '<seu-token-do-site>',
          baseUrl: BASE_URL
        });
      };
    })(document, "script");
  }

  render () {
    return null;
  }
}

export default WavooAIWidget;

Substitua '<seu-token-do-site>' pelo token do seu canal do tipo "Website", disponível nas configurações da caixa de entrada no painel do Wavoo AI.

2. Importe o componente na sua aplicação

Você pode importar o componente dentro da página ou layout principal da sua aplicação. Por exemplo:

import React, { Fragment } from 'react';
import WavooAIWidget from '../components/WavooAIWidget';

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

export default Page;

Assim que a página for carregada, o widget do Wavoo AI será exibido automaticamente.

Se precisar de ajuda para configurar o widget em sua aplicação Next.js, entre em contato com o nosso time:
📩 suporte@wavoo.com.br | 📱 @wavoo.ai