Como instalar chat ao vivo com Next.js

Se você possui um aplicativo Next.js, pode adicionar o widget de chat ao vivo do Chatwoot e conversar com seus visitantes em tempo real. Para integrar o Chatwoot ao seu aplicativo Next.js, você precisa de um componente que carregue o script do Chatwoot.

Você pode fazer isso em duas etapas rápidas. Vamos ilustrar com o exemplo abaixo. Este exemplo mostra um componente React que carrega o script do Chatwoot de forma assíncrona.

Etapa 1. Copiar e Criar

Copie o código a seguir e crie um arquivo na sua pasta components com o nome ChatwootWidget.js.

import React from 'react';

class ChatwootWidget extends React.Component {
componentDidMount() {
// Adicionar configurações do Chatwoot
window.chatwootSettings = {
hideMessageBubble: false,
position: 'right', // Pode ser à esquerda ou à direita
locale: 'en', // Idioma a ser definido
type: 'standard', // [standard, expanded_bubble]
};

// Cole o script das configurações da caixa de entrada, exceto a tag <script>
(function(d,t) {
var BASE_URL="<sua-url-de-instalação>";
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: '<seu-token-de-site>',
baseUrl: BASE_URL
})
}
})(document,"script");
}

render() {
return null;
}
}

exportar ChatwootWidget padrão

Etapa 2. Importar​

Importe o componente para suas páginas ou componente de layout, conforme mostrado abaixo.

importar React, { Fragment } de 'react'
// ...

importar ChatwootWidget de '../components/ChatwootWidget'

const Page = () => (
<Fragmento>
<ChatwootWidget />
<Componente {...}>
</Fragmento>
)

exportar Página padrão

Você poderá ver o widget do Chatwoot na página agora.