Configure o Widget Web da Knocket

Visão geral

Abra o console da Knocket e clique em Widget Web na barra lateral esquerda. A página é dividida em três abas — Aparência, Página inicial e Página de conversa — com uma pré-visualização ao vivo em um celular à direita, que é atualizada à medida que você edita. Nada é publicado até que você pressione Salvar na parte inferior.

Aparência

A aba Aparência controla o visual do widget — o idioma de todos os textos da interface, a cor de destaque, o formato do botão de abertura e os itens de FAQ exibidos antes de um visitante iniciar uma conversa. Tudo aqui é renderizado novamente na prévia à direita assim que você faz uma alteração.

• Cor do tema. Escolha uma das dez predefinições ou insira um valor hexadecimal (por exemplo, #1C66E5). A cor define o gradiente do cabeçalho, o botão "Iniciar um chat" e a bolha do iniciador.
• Botão de chat ao vivo. Escolha entre o inicializador com ícone redondo ou um botão em formato de cápsula com o texto "Fale conosco", dependendo do destaque que você deseja dar ao ponto de entrada.
• Perguntas frequentes. Adicione algumas perguntas comuns com respostas curtas. Desative a secção se não quiser que sejam apresentadas. Clique no lápis para editar ou no caixote do lixo para remover.

Idioma

Abra o menu suspenso Idioma na parte superior da aba Aparência e escolha uma opção da lista integrada — English, Türkçe, Nederlands, हिन्दी, العربية, Tiếng Việt, ภาษาไทย, українська e muito mais. Todos os textos da interface do widget — saudações, campos de formulário, mensagens de erro e layout da direita para a esquerda — são alterados imediatamente.

Página inicial

A aba Página inicial é o que os visitantes veem assim que o widget é aberto — antes de iniciarem uma conversa. É nela que você define a saudação, o logotipo da sua marca e os atalhos (Chat ao vivo, Agendador de reuniões, Redes sociais) que permitem aos visitantes entrar em contato da forma que preferirem.

1. Cabeçalho — Logotipo da marca. Envie um PNG quadrado ou SVG (Substituir / Remover). Ele fica no canto superior esquerdo do cabeçalho do widget.
2. Mensagem de boas-vindas. Defina o Título de boas-vindas (por exemplo, Boas-vindas 👋) e uma Descrição de uma linha (Como podemos ajudar você hoje?). Ambos aceitam emojis.
3. Chat ao vivo. Ative esta opção para habilitar conversas em tempo real. Este é o cartão "Iniciar um chat · Respondemos em poucos minutos" na página inicial do widget.
4. Agendador de reuniões. Ative-o e cole um URL de reunião — Calendly, Cal.com, SavvyCal ou qualquer link de agendamento. Os visitantes tocam em "Agendar uma reunião" para abri-lo numa nova aba.
5. Redes sociais. Ative a opção e cole seus nomes de usuário/URLs do WhatsApp, Instagram, Telegram e Messenger. Cada canal se torna um ícone na linha Conexão Rápida.

Todos os campos são opcionais — deixe um canal em branco e o ícone correspondente desaparecerá do widget.

Página da conversa

A aba Página da conversa controla o que acontece quando um visitante toca em Iniciar um chat. Defina o nome do seu assistente, configure a disponibilidade e decida quais informações coletar dos visitantes antes que a conversa seja aberta.

• Seu nome. O nome de exibição mostrado no cabeçalho da conversa (por exemplo, Assistente). Adicione aqui o nome de um colega de equipe real para tornar a interação mais pessoal.
• Saudação. A primeira mensagem que o visitante vê no painel da conversa — Olá. Como posso ajudar você hoje?
• Horário disponível. Escolha Sempre disponível ou Disponível segundo um horário. Se optar por um horário, selecione um fuso horário e adicione um ou mais intervalos de dias/horas (por exemplo, segunda a sexta-feira · 09:00–21:00).
• Mensagem de ausência. Exibida quando um visitante chega fora do seu horário de disponibilidade — Estamos offline no momento. Deixe uma mensagem e responderemos em breve.
• Coletar informações do visitante. Escolha Desativado, Antes da conversa (sempre perguntar) ou Quando estiver offline (somente quando você estiver ausente). Em seguida, ative os campos individualmente — Nome, E-mail, Número de telefone, Mensagem — e marque cada um como obrigatório ou opcional.

Instale no seu site

Quando o widget estiver como você deseja na pré-visualização, abra Instalação na barra lateral e copie o fragmento de código. Cole-o antes de </body> em qualquer página em que você queira exibir o widget — WordPress, Shopify, Webflow, Next.js, HTML puro, qualquer coisa que o navegador consiga renderizar. Consulte a seção específica Página do produto do widget para web para posicionamento específico da plataforma.

1. Conclua a configuração de Aparência / Página inicial / Página de conversa. Pressione Salvar.
2. Clique em Instalação na barra lateral esquerda.
3. Copie a tag <script> de uma única linha — ela já contém seu identificador exclusivo.
4. Cole-o imediatamente antes da tag de fechamento </body> do seu site e faça a implantação.
5. Recarregue — o iniciador aparece no canto inferior direito. As mensagens chegam à sua caixa de entrada do Knocket e ao Telegram em tempo real.

FAQ

As alterações exigem uma nova implantação?

Não. Tudo o que você alterar no painel — cores, mensagem de boas-vindas, perguntas frequentes, disponibilidade — será atualizado no widget em tempo real, em poucos segundos. Somente a instalação inicial da tag de script exige alterações no seu site.

E se eu deixar os campos do WhatsApp, Instagram, Telegram ou Messenger em branco?

O ícone simplesmente não aparece na linha de Conexão Rápida. Ative um canal a qualquer momento e cole o URL — ele aparecerá imediatamente.

Como funciona o fluxo quando você está offline?

Fora do seu horário de disponibilidade, os visitantes veem sua mensagem offline e o formulário pré-chat (se estiver habilitado com "Quando offline"). Eles deixam as informações de contato e uma mensagem; você responde pela caixa de entrada do Knocket ou pelo Telegram, e a conversa continua no mesmo lugar.

Os visitantes podem enviar imagens ou arquivos?

Sim — anexos (imagens, vídeos e arquivos) são compatíveis com todas as conversas e aparecem na sua caixa de entrada e no Telegram ao lado do texto.

Onde o Agente de IA se encaixa?

Se o Agente de IA estiver habilitado no seu espaço de trabalho, as mensagens recebidas pelo widget serão encaminhadas primeiro ao agente. Ele responde a perguntas rotineiras e transfere para um atendente humano quando não consegue responder. Consulte o Tutorial do Agente de IA.