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 da Akece 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 `AkeceWidget`

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

import React from 'react';

class AkeceWidget extends React.Component {
  componentDidMount () {
    // Configurações do widget
    window.akeceSettings = {
      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://dash.akece.com";
      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.akeceSDK.run({
          websiteToken: '<seu-token-do-site>',
          baseUrl: BASE_URL
        });
      };
    })(document, "script");
  }

  render () {
    return null;
  }
}

export default AkeceWidget;

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

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 AkeceWidget from '../components/AkeceWidget';

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

export default Page;

Assim que a página for carregada, o widget da Akece será exibido automaticamente.

Se precisar de ajuda para configurar o widget em sua aplicação Next.js, entre em contato com o nosso time:
📩 [email protected] | 📱 @akece.ai

1. Crie o componente AkeceWidget

2. Importe o componente na sua aplicação

1. Crie o componente `AkeceWidget`