Se você possui uma aplicação em Next.js, pode adicionar o widget de chat ao vivo Chatwoot para conversar com seus visitantes em tempo real. Para integrar o Chatwoot à sua aplicação Next.js, é necessário criar um componente que carregue o script do Chatwoot.
Essa integração pode ser feita em duas etapas rápidas. Vamos demonstrar com um exemplo. Este exemplo mostra um componente React que carrega o script do Chatwoot de forma assíncrona.
Passo 1. Copie e Crie!
Copie o código abaixo e crie um arquivo na pasta de componentes com o nome ChatwootWidget.js.
import React from 'react';
class ChatwootWidget extends React.Component {
componentDidMount () {
// Configurações do Chatwoot
window.chatwootSettings = {
hideMessageBubble: false,
position: 'right', // Pode ser left ou right
locale: 'pt', // Defina o idioma
type: 'standard', // [standard, expanded_bubble]
};
// Cole o script das configurações de inbox, exceto a tag <script>
(function(d,t) {
var BASE_URL="<url-da-sua-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-do-site>',
baseUrl: BASE_URL
})
}
})(document,"script");
}
render () {
return null;
}
}
export default ChatwootWidget;
Passo 2. Importe o Componente
Implemente o componente nas suas páginas ou no componente de layout, conforme o exemplo abaixo.
import React, { Fragment } from 'react';
// ...
import ChatwootWidget from '../components/ChatwootWidget';
const Page = () => (
<Fragment>
<ChatwootWidget />
<Component {...}>
</Fragment>
);
export default Page;
Pronto! Agora você poderá ver o widget do Chatwoot na sua página.