@synchat/webchat

Componente de chat para sites, integrado à plataforma Synchat. Exibe um botão flutuante que abre um painel com formulário (nome, e-mail, telefone, mensagem) ou mensagem de fora do horário de atendimento, conforme a configuração do canal no portal.

• Site Synchat: synchat.com.br
• Portal (cadastro e gestão): portal.synchat.com.br

Como se cadastrar na plataforma

1. Acesse o portal: https://portal.synchat.com.br.
2. Clique em Cadastre-se (ou acesse https://portal.synchat.com.br/auth/register).
3. Preencha os dados da empresa e do usuário e finalize o cadastro.
4. Após o login, você gerencia canais, atendentes e conversas pelo menu do portal.

Para mais informações sobre a Synchat, acesse synchat.com.br.

Criar um canal WebChat e obter o token

1. No portal, vá em Canais (ou Configurações → Canais).
2. Clique em Novo canal e escolha WebChat.
3. Preencha:
   • Nome do canal (ex.: "Chat do site")
   • Descrição (opcional)
   • Restringir por dias e horário (opcional): ative para exibir mensagem de “fora do horário” quando configurado
   • Horários de atendimento (dias úteis e fim de semana), se usar restrição
   • Quando inativo, enviar para a fila (opcional)
4. Clique em Criar canal WebChat.
5. Após a criação, o portal exibe o token do canal. Copie e guarde esse valor — ele será usado no componente no seu site.

O token identifica o canal no widget; não o compartilhe publicamente.

Instalação

npm install @synchat/webchat

O pacote usa React e Material UI como dependências do seu projeto. Se ainda não tiver:

npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled

Uso básico

Importe o componente e informe o token (obtido no portal):

import { WebChat } from "@synchat/webchat";

function App() {
  return (
    <WebChat token="SEU_TOKEN_DO_PORTAL" />
  );
}

• token: valor exibido ao criar o canal WebChat no portal (obrigatório).
• primaryColor: opcional. Cor do botão flutuante e do bloco "fora do horário". Padrão: cor Synchat (#0D9488). Ex.: primaryColor="#007bff" para azul.

O widget exibe um botão flutuante no canto inferior direito. Ao clicar:

• Se o canal estiver ativo e dentro do horário (ou sem restrição): mostra o formulário (nome, e-mail, telefone, mensagem) e o botão Iniciar chat.
• Se estiver fora do horário (com restrição configurada): mostra a mensagem de horário de atendimento.
• Se o canal estiver inativo ou o token for inválido: mostra mensagem de indisponibilidade.

Início da conversa (WebSocket)

O início da conversa não é feito por API; será feito via WebSocket. Por isso, o componente espera que você implemente o callback onStartChat e, nele, conecte ao WebSocket da Synchat e envie os dados do visitante.

Exemplo de uso com onStartChat (conecte em /ws/business/{businessId} usando o businessId retornado na config):

<WebChat
  token="SEU_TOKEN_DO_PORTAL"
  onStartChat={async (data) => {
    // config.businessId está disponível após fetch da config
    // Conectar ao WebSocket: wsBase/ws/business/${config.businessId}
    // e enviar name, email, phone, message conforme documentação
    await minhaConexaoWebSocket.iniciarChat(data);
  }}
/>

Se onStartChat não for passado, o widget exibe uma mensagem orientando a configurá-lo (conversa via WebSocket).

Props

| Prop | Tipo | Obrigatório | Descrição | |-----------------|----------|-------------|-----------| | token | string | Sim | Token do canal WebChat (portal → Canais → criar WebChat → copiar token). | | primaryColor| string | Não | Cor do botão flutuante e do bloco "fora do horário". Padrão: cor Synchat (#0D9488). Aceita hex (ex.: #007bff) ou valor CSS. | | onStartChat | (data) => void \| Promise<void> | Não | Callback ao clicar em "Iniciar chat". Recebe { name, email, phone, message, businessId? }. Implemente aqui a conexão WebSocket. | | outOfHoursMessage | string | Não | Mensagem customizada quando estiver fora do horário. Se não informado, usa o texto padrão com o horário configurado no canal. |

Estrutura do código (Atomic Design)

O WebChat segue Atomic Design: átomos → moléculas → organismos → templates → páginas. O componente principal exportado é a página (WebChat). Para customização avançada, o pacote também exporta partes reutilizáveis (FabTrigger, ChatPanel, WebChatLayout, etc.). Detalhes em docs/ATOMIC-DESIGN.md.

Variáveis de ambiente (sugestão)

Em produção, evite deixar o token no código. Use variáveis de ambiente:

VITE_WEBCHAT_TOKEN=seu_token_aqui

<WebChat
  token={import.meta.env.VITE_WEBCHAT_TOKEN ?? ""}
  onStartChat={handleStartChat}
/>

Para customizar a cor do botão:

<WebChat
  token="..."
  primaryColor="#007bff"
  onStartChat={handleStartChat}
/>

Resumo do fluxo

1. Cadastro: portal.synchat.com.br → Cadastre-se.
2. Canal WebChat: Portal → Canais → Novo canal → WebChat → preencher → Criar → copiar o token.
3. No site: npm install @synchat/webchat e usar <WebChat token="..." /> (ou informar primaryColor se quiser).
4. Conversa: Implementar onStartChat para conectar ao WebSocket e enviar a primeira mensagem quando o recurso estiver disponível.

Links

• Site: synchat.com.br
• Portal (login/cadastro): portal.synchat.com.br
• Cadastro: portal.synchat.com.br/auth/register
• Pacote no npm: npmjs.com/package/@synchat/webchat

Feito com ❤️ por Synchat