AI Actions in Social Intents do more than send data to APIs - they can also display interactive visual elements inside the chat conversation. Clickable buttons that link to pages, embedded iframes that render forms or scheduling widgets, and styled links that guide visitors to specific resources all create a richer, more actionable chat experience. Below is everything about configuring buttons, links, and embedded content in your AI chatbot actions.
Três modos de exibição
The Button / iframe section of an action (always shown for the Show button or iframe only type, and shown on other types when you check Show action button in response) gives you three distinct display modes depending on how you configure the related fields. These modes are how you build effective interactive elements in your chat.
Modo 1: Botão clicável
A clickable button appears in the chat alongside the triggered response message. When the visitor clicks it, the URL opens in a new browser tab. This is the default behavior when you enter a Button label and Button URL and leave Embed as iframe instead of button unchecked.
Best for: Linking visitors to external pages - pricing pages, documentation, signup forms, product pages, knowledge base articles, terms of service, or any URL you want the visitor to visit.
Modo 2: Iframe incorporado
An embedded iframe loads the URL directly inside the chat window rather than opening a new tab. The visitor interacts with the content without leaving the conversation. This is enabled by checking the Embed as iframe instead of button checkbox. The URL field is then labeled Iframe URL and the button label is hidden.
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
Go to Chat Widgets → select your widget → AI Agent → Actions. Either click New action to create a new action, or click Edit on an existing action.
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.
You can also add buttons to Call API Request actions. In that scenario, the button appears alongside the API action's triggered response - for example, an API action that creates a support ticket could also show a button linking to "View Your 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:
- "Here is our pricing page - you can see all plans and features:"
- "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:"
Open the Button Fields
For Show button or iframe only, the Button label and Button URL fields appear in the Button / iframe section right away. For other action types, check Show action button in response to reveal them.
Digite o nome do botão
In the Button label field, enter the text that appears on the button. Keep it short and action-oriented:
- "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
Click Save action. Open your chat widget and type a message that matches your trigger. Verify the button appears with the correct label and clicking it opens the right URL in a new tab.
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”
Create or edit an action, select the action type, name it, write the trigger, and set the response. For action types other than Show button or iframe only, check Show action button in response.
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
Click Save action. Trigger the action from your chat widget and verify the embedded content loads correctly inside the chat. Test the interactive elements within the iframe - for a Calendly widget, select a time and confirm the booking process works end to end.
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
Zoom or Webex Meeting Link
To offer a video call, use button mode with your meeting link as the URL do botão (for example https://zoom.us/j/YOUR_MEETING_ID) and leave Embed as iframe instead of button unchecked. The visitor clicks the button and the meeting opens in Zoom or Webex in a new tab or the desktop app; the video call is not embedded in the chat window. See Video Escalation with Zoom & Webex.
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 | "Great choice! Start your 14-day free trial - no credit card required:" |
| 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 | "Thanks for chatting! We'd love your feedback - it takes less than 30 seconds:" |
| 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
Alternatively, use two separate actions - one API action for lead capture and one button-only action for scheduling - rather than trying to combine both into a single action. This gives the AI more flexibility to trigger each action at the appropriate moment in the conversation.
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:
- Buttons appear inline - They sit within the chat message, below the triggered response text.
- Buttons open in a new tab - Clicking the button opens the URL in a new browser tab. The chat window stays open.
- Iframes render inline - Embedded iframes load directly within the chat panel. The chat widget adjusts to accommodate the iframe content.
- Multiple buttons are possible - If you have multiple actions that fire in the same conversation, each can show its own button. They appear in the order the actions fire.
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 the Auto Trigger on Chat Start action type with Show action button in response enabled to display a button at the very beginning of every conversation. For example, every chat could start with a "View Our FAQ" or "Browse Products" button alongside the greeting message.
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
For action types other than Show button or iframe only, verify that Show action button in response is checked. Also confirm that the Button label and Button URL fields are filled in. Empty fields prevent the button from rendering.
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
Some embedded content requires more vertical space than the default iframe height. Calendly widgets, long forms, and multi-step surveys may require scrolling within the iframe. This is normal behavior - the visitor can scroll within the embedded content to access all elements.
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”?
Show Button or Iframe Only does not make an API call - it solely displays the interactive element. Call API Request with the button option enabled makes an API call AND displays a button. Use the button-only type when you just need to show a link or embed content. Use the API type with a button when you need to both execute an API operation and give the visitor a clickable link.
O que ler a seguir
- What Are AI Actions? - Overview of all action types.
- Booking Meetings with Calendly - Detailed guide for embedding Calendly in chat.
- Custom API Actions - Combine API calls with button displays.