# Show an iFrame

The "Show an iFrame" action displays external web content embedded in a modal dialog within your Noloco app. You can embed any URL and customize the modal's width and height to fit the content.

## When to Use Show an iFrame

Use the Show an iFrame action when you want to:

* **Embed external tools**: Display third-party applications without leaving your app
* **Show embedded reports**: Display dashboards, analytics, or BI reports
* **Display external documentation**: Show help articles or guides in context
* **Integrate web-based forms**: Embed surveys, typeforms, or Google Forms
* **Show videos**: Display YouTube, Vimeo, or other video content
* **Display embedded maps**: Show Google Maps or other mapping services
* **Preview external content**: Show websites, PDFs, or other embeddable content

## Setting Up Show an iFrame Action

### Step 1: Create the Action Button

1. In build mode, navigate to the record page where you want the button
2. Click the "+" button in the Action Buttons section
3. Click the edit icon to configure the button

### Step 2: Configure Button Appearance

* **Button Text**: Describe what will be shown (e.g., "View Report", "Watch Video", "Show Map")
* **Appearance**: Choose based on context (Default, Success, Information)
* **Icon**: Add relevant icon (external link, play button, map icon, etc.)
* **Button Tooltip**: Explain what content will appear
* **Type**: Usually "One click" (modal opens immediately)

### Step 3: Configure the iFrame

**What Should Happen**: Select **Show an iFrame**

**iFrame Configuration:**

* **URL**: The web page to embed (can include dynamic field values)
* **Modal Width**: Set the width of the modal
* **Modal Height**: Set the height of the modal

### URL Requirements

* Must be a valid URL starting with `https://` or `http://`
* The external site must allow iframe embedding (some sites block it)
* Can include dynamic values using {{record.field\_name}}

### Modal Size Options

**Width Options:**

* Small
* Medium
* Large
* Extra Large

**Height Options:**

* Small
* Medium
* Large
* Extra Large

## Common Use Cases

### 1. Embed Analytics Dashboard

**Scenario**: Display a Looker, Tableau, or Metabase report

**Button Configuration:**

* Button Text: "View Analytics Dashboard"
* Icon: Bar chart icon
* Type: One click

**iFrame Configuration:**

* URL: `https://analytics.company.com/embed/dashboard?customer={{record.customer_id}}`
* Width: Extra Large)
* Height: Large)

**Tip**: Use URL parameters to filter the dashboard for the current record's data.

***

### 2. Show Google Maps Location

**Scenario**: Display a map with the record's address

**Button Configuration:**

* Button Text: "View on Map"
* Icon: Map pin icon
* Type: One click

**iFrame Configuration:**

* URL: `https://www.google.com/maps?q={{record.latitude}},{{record.longitude}}&output=embed`

Or with address:

* URL: `https://www.google.com/maps?q={{record.street_address}},{{record.city}},{{record.state}}&output=embed`
* Width: Large
* Height: Medium

***

### 3. Embed Video Tutorial

**Scenario**: Show a product demo video

**Button Configuration:**

* Button Text: "Watch Tutorial"
* Icon: Play icon
* Appearance: Success

**iFrame Configuration (YouTube):**

* URL: `https://www.youtube.com/embed/{{record.video_id}}`
* Width: Large
* Height: Medium

**iFrame Configuration (Vimeo):**

* URL: `https://player.vimeo.com/video/{{record.vimeo_id}}`
* Width: Large
* Height: Medium

***

### 4. Display External Documentation

**Scenario**: Show help articles or user guides

**Button Configuration:**

* Button Text: "View Documentation"
* Icon: Book icon
* Type: One click

**iFrame Configuration:**

* URL: `https://docs.company.com/articles/{{record.help_article_id}}`
* Width: Extra Large
* Height: Extra Large

***

### 5. Embed Form or Survey

**Scenario**: Show a Typeform, Google Form, or survey

**Button Configuration:**

* Button Text: "Take Survey"
* Icon: Clipboard icon
* Type: One click

**iFrame Configuration (Typeform):**

* URL: `https://form.typeform.com/to/{{record.form_id}}?customer_id={{record.customer_id}}&email={{record.email}}`
* Width: Large
* Height: Large

**iFrame Configuration (Google Forms):**

* URL: `https://docs.google.com/forms/d/e/{{record.form_id}}/viewform?embedded=true&entry.123={{record.name}}`
* Width: Large
* Height: Large

**Tip**: Pre-fill form fields using URL parameters.

***

### 6. Show Calendar Booking

**Scenario**: Embed Calendly or other booking widget

**Button Configuration:**

* Button Text: "Schedule Meeting"
* Icon: Calendar icon
* Appearance: Success

**iFrame Configuration:**

* URL: `https://calendly.com/{{record.sales_rep_calendly_id}}?name={{record.contact_name}}&email={{record.email}}`
* Width: Large
* Height: Large

***

### 7. Embed PDF Viewer

**Scenario**: Display a PDF document

**Button Configuration:**

* Button Text: "View Contract"
* Icon: Document icon

**iFrame Configuration:**

* URL: `{{record.contract_pdf_url}}`
* Width: Extra Large
* Height: Extra Large

**Alternative using Google Docs Viewer:**

* URL: `https://docs.google.com/viewer?url={{record.pdf_url}}&embedded=true`

***

### 8. Show Live Chat or Support

**Scenario**: Embed Intercom, Zendesk, or support widget

**Button Configuration:**

* Button Text: "Get Help"
* Icon: Message circle icon
* Appearance: Default

**iFrame Configuration:**

* URL: `https://support.company.com/chat?user_id={{user.id}}&name={{user.name}}&email={{user.email}}`
* Width: Medium
* Height: Large

***

### 9. Display Power BI Report

**Scenario**: Embed Microsoft Power BI dashboard

**Button Configuration:**

* Button Text: "View Power BI Report"
* Icon: Bar chart icon

**iFrame Configuration:**

* URL: `https://app.powerbi.com/view?r={{record.report_id}}&filter=Customer eq '{{record.customer_name}}'`
* Width: Extra Large
* Height: Extra Large

***

### 10. Embed Custom Web Application

**Scenario**: Display a custom tool or internal application

**Button Configuration:**

* Button Text: "Open Calculator"
* Icon: Calculator icon

**iFrame Configuration:**

* URL: `https://tools.company.com/calculator?input={{record.amount}}&rate={{record.rate}}`
* Width: Large
* Height: Medium

***

## Dynamic iFrame URLs

Use dynamic field values to personalize the embedded content:

### Passing Record Data

```
https://app.example.com/report?
  customer_id={{record.customer_id}}&
  start_date={{record.start_date}}&
  end_date={{record.end_date}}&
  region={{record.region}}
```

### Passing User Information

```
https://app.example.com/embed?
  user_id={{user.id}}&
  user_name={{user.name}}&
  user_email={{user.email}}&
  role={{user.role}}
```

### Passing Related Record Data

```
https://dashboard.example.com?
  account={{record.customer.account_number}}&
  rep={{record.customer.sales_rep.email}}
```

## Best Practices

### Choosing the Right Size

* ✅ Test different sizes to find what works best for your content
* ✅ Use Extra Large for dashboards and detailed reports
* ✅ Use Large for videos and forms
* ✅ Use Medium for simpler content or when space is limited
* ✅ Consider responsive design—test on mobile devices

### URL Configuration

* ✅ Always use `https://` for security
* ✅ Test URLs manually in a browser first
* ✅ URL-encode special characters in parameters
* ✅ Verify the external site allows iframe embedding
* ✅ Use embed-specific URLs when available (e.g., YouTube embed URLs)

### User Experience

* ✅ Use clear button text that describes the content
* ✅ Add loading indicators (automatic)
* ✅ Test on different screen sizes
* ✅ Provide fallback options if iframe fails to load
* ✅ Consider mobile users—some embedded content doesn't work well on mobile

### Security

* ✅ Only embed trusted sources
* ✅ Be cautious with user-generated URLs
* ✅ Use HTTPS URLs to maintain security
* ✅ Don't pass sensitive data in URL parameters if possible
* ✅ Review embedded site's privacy policies

## Troubleshooting

### iFrame Shows "This site can't be embedded"

**Issue**: Content doesn't display, shows error message

**Cause**: The external site blocks iframe embedding using X-Frame-Options or Content-Security-Policy headers.

**Solutions**:

* Check if the site has an embed-specific URL (e.g., YouTube embed vs. watch URL)
* Contact the site owner to request embed permission
* Use "Navigate to" action instead to open in new tab
* Look for alternative embed methods provided by the service

**Common sites that may block embedding:**

* Some banking sites
* Social media sites (without specific embed URLs)
* Sites with strict security policies

***

### iFrame is Empty or Shows Loading Indefinitely

**Issue**: Modal opens but shows blank white space

**Solutions**:

* Verify the URL is correct and accessible
* Test the URL in a regular browser window
* Check if the site requires authentication
* Ensure URL uses `https://` (some sites block mixed content)
* Check browser console for errors
* Try increasing modal height—content might be cut off

***

### Dynamic Fields Don't Populate

**Issue**: {{record.field}} appears as literal text in URL

**Solutions**:

* Verify field name spelling (case-sensitive)
* Check that field exists on the current record
* Ensure field has a value (not empty)
* For related fields use: {{record.relationship.field}}
* Test with a record that has all required fields populated

***

### Modal is Too Small/Large

**Issue**: Content doesn't fit properly in modal

**Solutions**:

* Adjust modal width and height settings
* Try preset sizes (Medium, Large, Extra Large)
* Use custom pixel values for precise control
* Test on different screen sizes
* Some embedded content has minimum size requirements

***

### Content is Cut Off

**Issue**: Parts of the embedded page aren't visible

**Solutions**:

* Increase modal height
* Some embedded content has fixed sizes—check documentation
* Try scrolling within the iframe
* Increase modal width if content is horizontally cut off
* Use Full Width option for wide content

***

### Video Won't Play

**Issue**: YouTube or Vimeo video doesn't load

**Solutions**:

* Use embed-specific URL format:
  * YouTube: `https://www.youtube.com/embed/VIDEO_ID`
  * Vimeo: `https://player.vimeo.com/video/VIDEO_ID`
* Enable autoplay if needed: add `?autoplay=1` to URL
* Check video privacy settings (unlisted/public)
* Verify video ID is correct
* Test URL in incognito mode

***

### Form Submissions Don't Save

**Issue**: Users submit forms in iframe but data isn't saved

**Cause**: This is usually an issue with the embedded form itself, not Noloco.

**Solutions**:

* Verify the form is configured correctly in the source system
* Check if form requires authentication
* Test form outside of iframe to confirm it works
* Review form submission settings in the source platform
* Consider using a webhook to capture submissions back to Noloco

***

### Mobile Display Issues

**Issue**: iFrame doesn't work well on mobile devices

**Solutions**:

* Test embedded content on mobile devices
* Some services provide mobile-optimized embed URLs
* Consider smaller modal sizes for mobile
* Use responsive width (percentage instead of pixels)
* Provide alternative action for mobile (Navigate to URL instead)

***

## Advanced Techniques

### Pre-filtering Embedded Content

Pass filters via URL parameters to show relevant data:

```
https://analytics.company.com/dashboard?
  filter_customer={{record.customer_id}}&
  filter_date_start={{record.start_date}}&
  filter_date_end={{record.end_date}}
```

***

### Iframe with Authentication Token

If the embedded service supports token-based auth:

```
https://app.example.com/embed?
  token={{record.embed_token}}&
  view=dashboard
```

Store the embed token in a field on your record.

***

### Multiple iFrames for Different Content

Create different buttons for different embedded content:

**Button 1**: "View Sales Dashboard"

* iFrame URL: Sales dashboard

**Button 2**: "View Marketing Dashboard"

* iFrame URL: Marketing dashboard

**Button 3**: "View Operations Dashboard"

* iFrame URL: Operations dashboard

***

### Conditional iFrame Content

Use visibility rules to show different embed buttons:

**Button 1** (show when Account Type = "Premium"):

* Text: "View Premium Analytics"
* iFrame: Premium dashboard URL

**Button 2** (show when Account Type = "Standard"):

* Text: "View Standard Analytics"
* iFrame: Standard dashboard URL

***

## Security and Privacy Considerations

### Data in URLs

* ⚠️ Avoid passing sensitive data in URL parameters
* ⚠️ URL parameters are visible in browser history and logs
* ⚠️ Use tokens or IDs instead of actual sensitive data when possible
* ⚠️ Consider security implications of embedded content

### Third-Party Content

* ⚠️ Only embed content from trusted sources
* ⚠️ Embedded content can track user activity
* ⚠️ Review privacy policies of embedded services
* ⚠️ Embedded content may set cookies in user's browser

### Mixed Content

* ⚠️ Always use HTTPS URLs to avoid mixed content warnings
* ⚠️ Browsers block HTTP iframes on HTTPS pages
* ⚠️ Ensure embedded site supports HTTPS

## Alternatives to iFrames

When iFrames don't work well, consider these alternatives:

### Navigate To URL

* Opens content in new tab instead of modal
* Better for sites that block iframe embedding
* Works for all websites

### Show Message

* Display text instructions instead of embedding
* Include a link to open externally
* Better for mobile in some cases

### Custom Integration

* Use workflows and APIs to fetch data instead
* Display data natively in Noloco
* More complex but better user experience

## Testing iFrame Actions

### Before Deploying

1. Test URL manually in browser
2. Test with actual record data (not sample data)
3. Test different screen sizes and devices
4. Verify embedded content works as expected
5. Test with users who have limited permissions
6. Check loading speed

### Monitor in Production

* Collect user feedback on embedded content
* Monitor for loading issues or errors
* Keep embedded content URLs up to date
* Review analytics on iframe usage


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.noloco.io/actions/action-buttons/show-an-iframe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.