Show an iFrame

Embed external content in modals using iframe action buttons

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