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.
Three Display Modes
When you check the Show action button in response option on any AI action, you get three distinct display modes depending on how you configure the related fields. These modes are how you build effective interactive elements in your chat.
Mode 1: Clickable Button
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 enable Show action button, enter a Button Label and Button URL, and leave the Embed as iframe option 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.
Mode 2: Embedded Iframe
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 Button URL becomes the iframe source URL.
Best for: Calendly scheduling widgets, Cal.com calendars, payment forms (Stripe, PayPal), feedback surveys (Typeform, Google Forms), or any embeddable web content that works inside an iframe.
Mode 3: Text Link
If you want the AI to include a link naturally within its response text rather than as a separate button element, you can configure the action to include URL information in the triggered response or rely on the AI to weave the link into its reply. However, the primary button and iframe modes are the most common approaches for interactive content.
Setting Up a Button
Follow these steps to add a clickable button to an AI Action:
Open Your Action
Go to My Widgets → select your widget → AI Actions. Either click Add Action to create a new action, or click an existing action to edit it.
Choose an Action Type
For buttons and iframes that do not need an API call, select Show Button or Iframe Only from the Action Type dropdown. This is the cleanest option when the action's sole purpose is to display interactive content.
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."
Name the Action and Set the Trigger
Enter an Action Name like Show_Pricing_Page o Link_To_Documentation.
In When to use, describe when the button should appear:
"Use this action when the visitor asks about pricing, wants to see the pricing page, or asks how much the product costs."
Set the Triggered Response
Enter a message that provides context for the button:
- "Here is our pricing page - you can see all plans and features:"
- "Check out our documentation for a step-by-step guide:"
- "Here is a link to get started with your free trial:"
Enable Show Action Button
Check the Show action button in response checkbox. This reveals the Button Label and Button URL fields.
Enter the Button Label
In the Button Label field, enter the text that appears on the button. Keep it short and action-oriented:
- "View Pricing"
- "Read the Docs"
- "Start Free Trial"
- "Contact Sales"
- "Download PDF"
Enter the Button URL
In the Button URL field, enter the full URL the button should link to:
https://www.yoursite.com/pricingUse the complete URL including https://. The link opens in a new browser tab when the visitor clicks the button.
Leave Embed as Iframe Unchecked
For a standard clickable button that opens a new tab, leave the Embed as iframe instead of button checkbox unchecked.
Save and Test
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.
Setting Up an Embedded Iframe
Embedded iframes render external content directly inside the chat window. This is ideal for interactive tools that visitors should use without leaving the conversation.
Follow Steps 1–5 from the Button Setup
Create or edit an action, select the action type, name it, write the trigger, set the response, and check Show action button in response.
Enter the Embed URL
In the Button URL field, enter the URL of the content you want to embed:
https://calendly.com/your-username/30-minute-meetingCheck Embed as Iframe
Check the Embed as iframe instead of button checkbox. This changes the behavior from a clickable button to an inline iframe that loads the URL inside the chat window.
Save and Test
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.
What Works as an Iframe
Not every URL can be embedded as an iframe. The target website must allow iframe embedding by not setting restrictive X-Frame-Options o Content-Security-Policy headers. Here are common embeddable and non-embeddable sources:
| Works in Iframe | Does Not Work in Iframe |
|---|---|
| Calendly event pages | Most social media sites (Twitter, LinkedIn) |
| Cal.com scheduling pages | Google search results |
| Typeform surveys | Most banking and financial sites |
| Google Forms | Sites with X-Frame-Options: DENY |
| Stripe payment links | Many e-commerce checkout pages |
| YouTube videos (embed URL) | GitHub repositories |
| Loom video embeds | Most login/authentication pages |
| Custom-built web forms | Pages requiring cross-origin cookies |
<iframe src="YOUR_URL"></iframe> and opening it in a browser. If the content loads in the iframe, it will work in the chat widget. If you see a blank frame or an error, the site blocks iframe embedding.
Casos de uso común
Pricing Page Button
| Field | Value |
|---|---|
| Action Type | Show Button or Iframe Only |
| Action Name | Show_Pricing |
| When to use | "When the visitor asks about pricing, plans, cost, how much the product costs, or wants to compare plans" |
| Triggered response | "Here's our pricing page with all plan details:" |
| Button Label | Ver precios |
| Button URL | https://www.yoursite.com/pricing |
| Embed as iframe | No |
Free Trial Signup Button
| Field | Value |
|---|---|
| Action Name | Start_Free_Trial |
| When to use | "When the visitor wants to try the product, asks about a free trial, or wants to sign up" |
| Triggered response | "Great choice! Start your 14-day free trial - no credit card required:" |
| Button Label | Comience la prueba gratuita |
| Button URL | https://www.socialintents.com/activate.jsp |
| Embed as iframe | No |
Feedback Survey (Embedded)
| Field | Value |
|---|---|
| Action Name | Show_Feedback_Survey |
| When to use | "When the visitor says they are done, the conversation is resolved, or the visitor says goodbye" |
| Triggered response | "Thanks for chatting! We'd love your feedback - it takes less than 30 seconds:" |
| Button Label | Take Survey |
| Button URL | https://form.typeform.com/to/YOUR_FORM_ID |
| Embed as iframe | Sí |
Knowledge Base Article
| Field | Value |
|---|---|
| Action Name | Link_Setup_Guide |
| When to use | "When the visitor asks how to install the chat widget, asks about setup, or needs installation help" |
| Triggered response | "Here's our step-by-step installation guide:" |
| Button Label | Read Setup Guide |
| Button URL | https://www.yoursite.com/docs/quick-start/creating-your-first-chat-widget |
| Embed as iframe | No |
Video Demo (Embedded)
| Field | Value |
|---|---|
| Action Name | Show_Demo_Video |
| When to use | "When the visitor asks to see a demo, wants to watch how the product works, or asks for a walkthrough video" |
| Triggered response | "Here's a quick demo showing the product in action:" |
| Button Label | Ver demostración |
| Button URL | https://www.youtube.com/embed/YOUR_VIDEO_ID |
| Embed as iframe | Sí |
youtube.com/embed/VIDEO_ID), not the regular watch URL (youtube.com/watch?v=VIDEO_ID). The embed URL works with iframe rendering and does not include YouTube's surrounding page chrome.
Combining Buttons with API Actions
Buttons are not limited to the Show Button or Iframe Only action type. You can add buttons to any Call API Request action. This is useful when an API action creates a record and you want to give the visitor a link to view it.
Example: Create Ticket + Link to Ticket
Configure a Call API Request action that creates a support ticket via your ticketing system API. Enable Show action button in response and set the button to link to the ticket view page:
- Tipo de acción: Llamada a la API
- Triggered response: "I've created a support ticket for you. You can track its progress here:"
- Button Label: View Your Ticket
- Button URL: https://support.yoursite.com/tickets
The visitor sees the confirmation message alongside a clickable button to check their ticket status.
Example: Lead Capture + Schedule Meeting
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.
Button Behavior and Styling
Buttons rendered by AI Actions follow the chat widget's visual style. They appear as clearly styled, clickable elements within the conversation flow. Here is what visitors experience:
- 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.
Advanced Patterns
Conditional Buttons Based on Conversation
You can create multiple button actions with different triggers to show different buttons based on the conversation flow:
- Visitor asks about pricing → Show "View Pricing" button
- Visitor asks about features → Show "Feature Comparison" button
- Visitor asks about support → Show "Contact Support" button
Each action has its own trigger description and button configuration. The AI shows the most relevant button based on what the visitor is discussing.
Auto-Trigger Buttons
Use the Auto Trigger on Chat Start action type with Show action button 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.
Post-Action Buttons
After an API action completes, show a follow-up button. For example, after creating a CRM lead, show a "Book a Demo" button that links to your Calendly page. This creates a natural funnel: collect information → offer the next step.
Troubleshooting
Button does not appear
Verify that Show action button in response is checked. Also confirm that Button Label and Button URL fields are filled in. Empty fields prevent the button from rendering.
Iframe shows a blank frame
The target URL likely blocks iframe embedding. Test the URL in a standalone iframe outside of Social Intents. If it does not load, the site's security headers prevent embedding. Use button mode instead to link to the page directly.
Iframe content is cut off
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.
Button opens the wrong URL
Double-check the Button URL field. Make sure it includes the full URL with https://. Relative URLs (without the protocol) will not work correctly.
Preguntas frecuentes
Can I change the button color or style?
Button styling follows the chat widget's theme settings. The button renders with a style consistent with your widget's color scheme. Custom CSS for individual buttons is not currently supported.
Can I show multiple buttons in one response?
Each action can show one button. To display multiple buttons in a single conversation, create separate actions with triggers that match the same or similar intents. However, only one action fires per conversation turn, so the buttons would appear at different points in the conversation rather than side by side.
Do buttons work on mobile?
Yes. Buttons and iframes render correctly on mobile devices. Buttons are tap-friendly and open URLs in the device's default browser. Iframes are responsive and adapt to the chat widget's mobile layout.
Can I track button clicks?
Button clicks open URLs in a new tab, so you can track visits using your website analytics (Google Analytics, Mixpanel, etc.) with UTM parameters on the button URL:
https://www.yoursite.com/pricing?utm_source=chatbot&utm_medium=button&utm_campaign=pricing_inquiryCan I embed a payment form?
Yes, if the payment platform supports iframe embedding. Stripe payment links, PayPal buttons, and many other payment widgets work in iframe mode. Test the URL in a standalone iframe first to confirm compatibility. Always ensure the payment form uses HTTPS for security.
What is the difference between Show Button or Iframe Only and Call API Request with a button?
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.
What to Read Next
- 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.
- Choosing the Right Action Type - Decide between button-only and API-with-button actions.