As ações de IA nas intenções sociais vão além do envio de dados para APIs — elas também podem exibir elementos visuais interativos dentro da conversa no chat. Botões clicáveis que levam a páginas, iframes incorporados que exibem formulários ou widgets de agendamento e links estilizados que direcionam os visitantes a recursos específicos criam uma experiência de chat mais rica e prática. Abaixo, você encontra tudo o que precisa saber sobre como configurar botões, links e conteúdo incorporado nas ações do seu chatbot com IA.
Três modos de exibição
Ao marcar a opção “Mostrar botão de ação” na seção “Resposta” de qualquer ação de IA, você terá três modos de exibição distintos, dependendo de como configurar os campos relacionados. Esses modos permitem que você crie elementos interativos eficazes no seu chat.
Modo 1: Botão clicável
Um botão clicável aparece no chat ao lado da mensagem de resposta acionada. Quando o visitante clica nele, a URL é aberta em uma nova aba do navegador. Esse é o comportamento padrão quando você ativa a opção “Mostrar botão de ação”, insere um “Nome do botão” e uma “URL do botão” e deixa a opção “Incorporar como iframe” desmarcada.
Ideal para: direcionar visitantes para páginas externas - páginas de preços, documentação, formulários de cadastro, páginas de produtos, artigos da base de conhecimento, termos de serviço ou qualquer URL que você queira que o visitante acesse.
Modo 2: Iframe incorporado
Um iframe incorporado carrega a URL diretamente dentro da janela de bate-papo, em vez de abrir uma nova aba. O visitante interage com o conteúdo sem sair da conversa. Para ativar essa função, marque a caixa de seleção “Incorporar como iframe em vez de botão ”. A URL do botão passa a ser a URL de origem do iframe.
Ideal para: widgets de agendamento do Calendly, calendários do Cal.com, formulários de pagamento (Stripe, PayPal), pesquisas de feedback (Typeform, Google Forms) ou qualquer conteúdo da web incorporável que funcione dentro de um iframe.
Modo 3: Link de texto
Se você quiser que a IA inclua um link de forma natural no texto da resposta, em vez de como um elemento de botão separado, é possível configurar a ação para incluir as informações da URL na resposta gerada ou deixar que a IA incorpore o link à sua resposta. No entanto, os modos “botão principal” e “iframe” são as abordagens mais comuns para conteúdo interativo.
Configurando um botão
Siga estas etapas para adicionar um botão clicável a uma ação de IA:
Comece a agir
Acesse Widgets de bate-papo → selecione seu widget → Agente de IA → Ações. Clique em “Adicionar ação” para criar uma nova ação ou clique em uma ação existente para editá-la.
Escolha um tipo de ação
Para botões e iframes que não exigem uma chamada de API, selecione “Mostrar apenas botão ou iframe ” no menu suspenso “Tipo de ação”. Essa é a opção mais simples quando o único objetivo da ação é exibir conteúdo interativo.
Você também pode adicionar botões às ações de solicitação de API de chamada. Nesse caso, o botão aparece ao lado da resposta gerada pela ação da API — por exemplo, uma ação de API que cria um ticket de suporte também poderia exibir um botão com o link “Visualizar seu ticket”.
Nomeie a ação e defina o gatilho
Digite um Nome da ação como Mostrar_página_de_preços ou Link_para_a_documentação.
Na seção “Quando usar”, descreva em que situações o botão deve aparecer:
"Utilize esta ação quando o visitante perguntar sobre preços, quiser ver a página de preços ou perguntar quanto custa o produto."
Definir a resposta acionada
Digite uma mensagem que forneça contexto para o botão:
- "Aqui está nossa página de preços — você pode conferir todos os planos e recursos:"
- "Confira nossa documentação para obter um guia passo a passo:"
- "Aqui está um link para você começar a usar sua versão de teste gratuita:"
Ativar botão “Mostrar ação”
Marque a caixa de seleção “Mostrar botão de ação na resposta ”. Isso exibe os campos “Rótulo do botão” e “URL do botão”.
Digite o nome do botão
No campo “Rótulo do botão ”, digite o texto que aparecerá no botão. Escreva algo curto e voltado para a ação:
- "Ver preços"
- "Leia a documentação"
- "Comece o teste gratuito"
- "Entre em contato com o departamento de vendas"
- "Baixar PDF"
Insira a URL do botão
No campo “URL do botão ”, digite a URL completa para a qual o botão deve direcionar:
https://www.yoursite.com/pricingUse a URL completa, incluindo https://. O link é aberto em uma nova aba do navegador quando o visitante clica no botão.
Deixe a opção “Incorporar como iframe” desmarcada
Para criar um botão padrão clicável que abra uma nova aba, deixe a caixa de seleção “Incorporar como iframe em vez de botão” desmarcada.
Salvar e testar
Clique em “Salvar ação”. Abra seu widget de bate-papo e digite uma mensagem que corresponda ao seu gatilho. Verifique se o botão aparece com o nome correto e se, ao clicar nele, a URL correta é aberta em uma nova aba.
Como configurar um iframe incorporado
Os iframes incorporados exibem conteúdo externo diretamente dentro da janela de bate-papo. Isso é ideal para ferramentas interativas que os visitantes devem usar sem sair da conversa.
Siga as etapas 1 a 5 da seção “Configuração dos botões”
Crie ou edite uma ação, selecione o tipo de ação, nomeie-a, defina o gatilho, configure a resposta e marque a opção “Mostrar botão de ação na resposta”.
Insira a URL de incorporação
No campo “URL do botão”, digite a URL do conteúdo que você deseja incorporar:
https://calendly.com/your-username/30-minute-meetingMarque a opção “Incorporar como iframe”
Marque a caixa de seleção “Incorporar como iframe em vez de botão ”. Isso altera o comportamento de um botão clicável para um iframe embutido que carrega a URL dentro da janela de bate-papo.
Salvar e testar
Clique em “Salvar ação”. Acione a ação a partir do seu widget de chat e verifique se o conteúdo incorporado é carregado corretamente dentro do chat. Teste os elementos interativos dentro do iframe - no caso de um widget do Calendly, selecione um horário e confirme se o processo de agendamento funciona do início ao fim.
O que funciona como um iframe
Nem toda URL pode ser incorporada como um iframe. O site de destino deve permitir a incorporação de iframes, não definindo restrições X-Frame-Options ou Política de Segurança de Conteúdo cabeçalhos. Aqui estão algumas fontes comuns que podem ou não ser incorporadas:
| Funciona em iframe | Não funciona em iframe |
|---|---|
| Páginas de eventos do Calendly | A maioria das redes sociais (Twitter, LinkedIn) |
| Páginas de agendamento do Cal.com | Resultados da pesquisa do Google |
| Pesquisas do Typeform | A maioria dos sites bancários e financeiros |
| Formulários do Google | Sites com X-Frame-Options: DENY |
| Links de pagamento do Stripe | Muitas páginas de finalização de compra em sites de comércio eletrônico |
| Vídeos do YouTube (URL incorporada) | Repositórios do GitHub |
| Incorporações de vídeos do Loom | A maioria das páginas de login/autenticação |
| Formulários da web personalizados | Páginas que exigem cookies entre origens |
<iframe src="YOUR_URL"></iframe> e abri-lo em um navegador. Se o conteúdo carregar no iframe, ele funcionará no widget de bate-papo. Se você vir um quadro em branco ou uma mensagem de erro, significa que o site bloqueia a incorporação de iframes.
Casos de uso comuns
Botão da página de preços
| Campo | Valor |
|---|---|
| Tipo de ação | Mostrar apenas o botão ou o iframe |
| Nome da ação | Mostrar_Preços |
| Quando usar | "Quando o visitante pergunta sobre preços, planos, custo, quanto custa o produto ou quer comparar planos" |
| Resposta acionada | "Aqui está nossa página de preços com todos os detalhes dos planos:" |
| Rótulo do botão | Ver preços |
| URL do botão | https://www.yoursite.com/pricing |
| Incorporar como iframe | Não |
Botão de inscrição para avaliação gratuita
| Campo | Valor |
|---|---|
| Nome da ação | Comece_o_Teste_Gratuito |
| Quando usar | "Quando o visitante quiser experimentar o produto, perguntar sobre um teste gratuito ou quiser se cadastrar" |
| Resposta acionada | "Ótima escolha! Comece seu período de teste gratuito de 14 dias - sem necessidade de cartão de crédito:" |
| Rótulo do botão | Iniciar avaliação gratuita |
| URL do botão | https://www.socialintents.com/activate.jsp |
| Incorporar como iframe | Não |
Pesquisa de feedback (incorporada)
| Campo | Valor |
|---|---|
| Nome da ação | Pesquisa de Feedback sobre o Programa |
| Quando usar | "Quando o visitante diz que já terminou, a conversa é encerrada ou o visitante se despede" |
| Resposta acionada | "Obrigado pela conversa! Adoraríamos receber sua opinião — leva menos de 30 segundos:" |
| Rótulo do botão | Responda à pesquisa |
| URL do botão | https://form.typeform.com/to/YOUR_FORM_ID |
| Incorporar como iframe | Sim |
Artigo da Base de Conhecimento
| Campo | Valor |
|---|---|
| Nome da ação | Guia de configuração do Link |
| Quando usar | "Quando o visitante perguntar como instalar o widget de chat, solicitar informações sobre a configuração ou precisar de ajuda com a instalação" |
| Resposta acionada | "Aqui está o nosso guia de instalação passo a passo:" |
| Rótulo do botão | Leia o Guia de Configuração |
| URL do botão | https://www.yoursite.com/docs/quick-start/creating-your-first-chat-widget |
| Incorporar como iframe | Não |
Vídeo de demonstração (incorporado)
| Campo | Valor |
|---|---|
| Nome da ação | Mostrar_Vídeo_de_Demonstração |
| Quando usar | "Quando o visitante pede para ver uma demonstração, quer observar como o produto funciona ou solicita um vídeo explicativo" |
| Resposta acionada | "Aqui está uma rápida demonstração mostrando o produto em ação:" |
| Rótulo do botão | Assista à demonstração |
| URL do botão | https://www.youtube.com/embed/YOUR_VIDEO_ID |
| Incorporar como iframe | Sim |
youtube.com/embed/VIDEO_ID), e não a URL normal do relógio (youtube.com/watch?v=VIDEO_ID). A URL de incorporação funciona com a renderização em iframe e não inclui os elementos de interface do YouTube ao redor do vídeo.
Combinando botões com ações da API
Os botões não se limitam ao tipo de ação “Botão Mostrar” ou “Somente Iframe ”. É possível adicionar botões a qualquer ação do tipo “Chamar solicitação de API ”. Isso é útil quando uma ação de API cria um registro e você deseja fornecer ao visitante um link para visualizá-lo.
Exemplo: Criar ticket + Link para o ticket
Configure uma ação “Solicitação de API de chamada” que crie um ticket de suporte por meio da API do seu sistema de tickets. Ative a opção “Mostrar botão de ação na resposta” e configure o botão para direcionar à página de visualização do ticket:
- Tipo de ação: Chamar solicitação de API
- Resposta automática: “Criei um ticket de suporte para você. Você pode acompanhar o andamento dele aqui:”
- Rótulo do botão: Visualizar seu ingresso
- URL do botão: https://support.yoursite.com/tickets
O visitante vê a mensagem de confirmação ao lado de um botão clicável para verificar o status do seu ingresso.
Exemplo: Captura de leads + Agendamento de reunião
Como alternativa, use duas ações distintas — uma ação de API para captura de leads e uma ação apenas com botão para agendamento — em vez de tentar combinar ambas em uma única ação. Isso dá à IA mais flexibilidade para acionar cada ação no momento adequado da conversa.
Comportamento e estilo dos botões
Os botões gerados pelo AI Actions seguem o estilo visual do widget de bate-papo. Eles aparecem como elementos com estilo bem definido e clicáveis dentro do fluxo da conversa. Veja a seguir o que os visitantes percebem:
- Os botões aparecem no próprio texto da conversa - Eles ficam dentro da mensagem do chat, abaixo do texto da resposta acionada.
- Botões abrem em uma nova aba - Ao clicar no botão, a URL é aberta em uma nova aba do navegador. A janela de bate-papo permanece aberta.
- Iframes são renderizados inline - Os iframes incorporados são carregados diretamente dentro do painel de bate-papo. O widget de bate-papo se ajusta para acomodar o conteúdo do iframe.
- É possível ter vários botões - Se você tiver várias ações que são acionadas na mesma conversa, cada uma pode exibir seu próprio botão. Eles aparecem na ordem em que as ações são acionadas.
Padrões avançados
Botões condicionais com base na conversa
Você pode criar várias ações de botão com diferentes gatilhos para exibir botões diferentes de acordo com o fluxo da conversa:
- O visitante pergunta sobre os preços → Exibir o botão “Ver preços”
- O visitante pergunta sobre os recursos → Exibir o botão “Comparação de recursos”
- O visitante pergunta sobre o suporte → Exibir o botão “Entrar em contato com o suporte”
Cada ação possui sua própria descrição de gatilho e configuração de botão. A IA exibe o botão mais relevante com base no que o visitante está discutindo.
Botões de acionamento automático
Use o tipo de ação “Acionamento automático no início do chat” com a opção “Mostrar botão de ação” ativada para exibir um botão logo no início de cada conversa. Por exemplo, cada chat poderia começar com um botão “Veja nossas perguntas frequentes” ou “Navegue pelos produtos” ao lado da mensagem de saudação.
Botões pós-ação
Após a conclusão de uma ação da API, exiba um botão de acompanhamento. Por exemplo, após criar um lead no CRM, exiba um botão “Agendar uma demonstração” que leve à sua página do Calendly. Isso cria um funil natural: coletar informações → oferecer a próxima etapa.
Solução de problemas
O botão não aparece
Verifique se a opção “Mostrar botão de ação na resposta” está marcada. Confirme também se os campos “Rótulo do botão” e “URL do botão” estão preenchidos. Campos vazios impedem que o botão seja exibido.
O iframe exibe um quadro em branco
É provável que a URL de destino bloqueie a incorporação em iframe. Teste a URL em um iframe independente, fora do Social Intents. Se ela não carregar, os cabeçalhos de segurança do site estão impedindo a incorporação. Use o modo de botão para criar um link direto para a página.
O conteúdo do iframe está cortado
Alguns conteúdos incorporados exigem mais espaço vertical do que a altura padrão do iframe. Widgets do Calendly, formulários longos e pesquisas com várias etapas podem exigir a rolagem dentro do iframe. Esse é um comportamento normal — o visitante pode rolar a tela dentro do conteúdo incorporado para acessar todos os elementos.
O botão abre a URL errada
Verifique novamente o URL do botão campo. Certifique-se de que ele inclua a URL completa com https://. URLs relativas (sem o protocolo) não funcionarão corretamente.
Perguntas frequentes
Posso alterar a cor ou o estilo do botão?
O estilo dos botões segue as configurações de tema do widget de bate-papo. O botão é exibido com um estilo consistente com o esquema de cores do seu widget. Atualmente, não é possível usar CSS personalizado para botões individuais.
Posso exibir vários botões em uma única resposta?
Cada ação pode exibir um botão. Para exibir vários botões em uma única conversa, crie ações separadas com gatilhos que correspondam a intenções iguais ou semelhantes. No entanto, apenas uma ação é acionada por turno da conversa; portanto, os botões apareceriam em momentos diferentes da conversa, em vez de lado a lado.
Os botões funcionam em dispositivos móveis?
Sim. Os botões e os iframes são exibidos corretamente em dispositivos móveis. Os botões são fáceis de tocar e abrem os URLs no navegador padrão do dispositivo. Os iframes são responsivos e se adaptam ao layout móvel do widget de chat.
Posso rastrear os cliques nos botões?
Ao clicar no botão, os URLs são abertos em uma nova aba, permitindo que você acompanhe as visitas por meio das ferramentas de análise do seu site (Google Analytics, Mixpanel etc.) com parâmetros UTM na URL do botão:
https://www.yoursite.com/pricing?utm_source=chatbot&utm_medium=button&utm_campaign=pricing_inquiryPosso incorporar um formulário de pagamento?
Sim, desde que a plataforma de pagamento suporte a incorporação em iframe. Os links de pagamento do Stripe, os botões do PayPal e muitos outros widgets de pagamento funcionam no modo iframe. Teste primeiro a URL em um iframe independente para confirmar a compatibilidade. Certifique-se sempre de que o formulário de pagamento utilize HTTPS por motivos de segurança.
Qual é a diferença entre “Mostrar botão ou apenas iframe” e “Fazer solicitação à API com um botão”?
A opção “Apenas botão ou iframe” não realiza uma chamada à API — ela apenas exibe o elemento interativo. A opção “Solicitação de API com botão ativado” realiza uma chamada à API E exibe um botão. Use o tipo “apenas botão” quando precisar apenas mostrar um link ou incorporar conteúdo. Use o tipo “API com botão” quando precisar tanto executar uma operação de API quanto fornecer ao visitante um link clicável.
O que ler a seguir
- O que são ações de IA? - Visão geral de todos os tipos de ação.
- Agendamento de reuniões com o Calendly - Guia detalhado para integrar o Calendly ao chat.
- Ações personalizadas da API - Combine chamadas de API com exibições de botões.
- Escolhendo o tipo de ação correto - Decida entre ações “somente botão” e “API com botão”.