A funcionalidade de Widgets permite visualizar aplicativos ou sites externos (por meio de uma URL) em diversas telas da Botmaker. Isso facilita que as equipes tenham acesso a CRM, dashboards de métricas ou ferramentas próprias sem sair da plataforma.

Você pode:

• Incorporar qualquer ferramenta externa autorizada através de uma URL.
• Configurar a visibilidade do widget de acordo com a função do usuário (Agente, Supervisor, Admin).
• Personalizar o formato visual (painel lateral ou janela flutuante).
• Disponibilizar a ferramenta em mais de 20 telas diferentes (Chats, Contatos, Tickets, etc.).
• Estabelecer comunicação bidirecional para que o widget envie ou receba dados da Botmaker.

Requisitos prévios

• Acesso à sua conta da Botmaker com permissões de Supervisor ou Super Admin para a configuração inicial.
• URL da ferramenta externa que deseja incorporar (deve permitir o carregamento em iframes).
• Conhecimentos técnicos básicos caso deseje implementar a comunicação bidirecional ou validação de segurança.

Conceitos-chave

• Comunicação bidirecional: Capacidade do widget de interagir com a interface da Botmaker (ex: preencher um campo de texto automaticamente).
• Painel: O widget aparece na lateral e "empurra" o conteúdo da tela para não cobri-lo.
• Sobreposto (Flutuante): O widget aparece sobre o conteúdo e pode ser arrastado ou redimensionado.
• Permissões de domínio: Configuração de segurança necessária para que o navegador permita carregar recursos externos (imagens, fontes) dentro do widget.

Como configurar seu primeiro Widget

Passo 1: Acesse a seção de configuração Vá ao menu de Canais e Integrações e selecione a opção Widgets Personalizados.

Passo 2: Crie e personalize o widget

Clique em "Criar Widget personalizado".

Insira a URL da ferramenta que deseja incorporar.

Selecione as telas onde deseja que ele apareça (ex: Tela de chats, Contatos, Tickets).

Defina o formato visual: escolha entre um painel lateral (que empurra o conteúdo) ou um widget flutuante sobreposto.

Configure dimensões (largura/altura) e se permite que o usuário o arraste ou o feche.

Passo 3: Defina a visibilidade por funções

Configure quais perfis da sua equipe poderão ver e utilizar o widget. Você pode restringi-lo apenas a supervisores ou habilitá-lo para todos os agentes.

Passo 4: Autorize domínios de segurança Se o seu widget utiliza imagens ou fontes de outros sites, certifique-se de adicionar esses domínios na seção de segurança para evitar bloqueios do navegador.

Passo 5: Teste no Playground

Utilize o Preview ao vivo para interagir com o widget antes de ativá-lo. Você verá exatamente como ele se comportará na tela selecionada.

Casos de uso possíveis

• Dashboard 360 de Vendas: Visualize metas e métricas do cliente em tempo real enquanto conversa com ele.
• Integração com CRM: Acesse a ficha técnica do cliente em seu sistema interno sem mudar de aba.
• Gestão de tickets: Crie botões personalizados no widget que fechem tickets ou alterem status na Botmaker automaticamente.
• Consulta de cotações: Incorpore uma calculadora de preços ou conversor de moeda para dar respostas rápidas.
• Ferramentas de debug: Implemente páginas de teste para verificar eventos de comunicação entre sistemas.

Implementação avançada: comunicação e segurança

Se o seu objetivo não é apenas visualizar uma página, mas alcançar uma integração profunda entre ambas as plataformas, é necessário realizar uma configuração técnica do lado do servidor do seu widget.

Ao implementar um widget personalizado, a Botmaker envia um token de segurança que seu sistema deve validar utilizando uma chave pública. Isso garante que a informação seja legítima e protege sua ferramenta de agentes maliciosos.

Além disso, você pode se inscrever em eventos em tempo real (como a abertura de um chat) e enviar ações diretas do widget para a Botmaker (como preencher campos de texto ou fechar tickets).

Deseja que haja comunicação entre seu widget e a Botmaker? Clique aqui para acessar a documentação técnica para desenvolvedores.

Perguntas Frequentes (FAQ)

Qualquer página web pode ser usada como widget?

Quase qualquer ferramenta que possa ser incorporada por meio de uma URL funciona. No entanto, algumas páginas bloqueiam seu carregamento em iframes por segurança. Recomenda-se validar isso no preview de configuração.

Os agentes podem criar seus próprios widgets?

Por padrão, a configuração é pensada para supervisores e administradores, mas a visibilidade e as permissões podem ser ajustadas por meio de funções personalizadas.

Por que meu widget não carrega imagens ou fontes externas?

Isso geralmente ocorre devido a bloqueios de segurança do navegador. Você deve autorizar explicitamente os domínios externos na configuração de segurança do widget na Botmaker.

É necessário saber programar para usar esta feature?

Para incorporar uma página informativa, não é necessário. No entanto, para que o widget "fale" com a Botmaker (comunicação bidirecional), é necessária uma implementação técnica seguindo nossa documentação.

O que acontece se o widget cobrir informações importantes da tela?

Você pode configurar o widget como um Painel que "empurra" o conteúdo para a direita em vez de flutuar sobre ele, garantindo que nenhuma métrica ou chat fique oculto.

Posso modificar um widget já existente?

Você pode modificar o widget clicando no ícone "editar". Lembre-se de clicar em "Salvar alterações" para que elas impactem o widget.

Lembre-se de visitar nossa Central de Ajuda para obter mais informações.