How to embed an iframe in Carrd

Steps

1. 1

   Step 1: Click Add Element, then Embed

   Carrd adds a new Embed element to your site.

2. 2

   Step 2: Set Type to IFRAME and set URL

   Use the full URL of the content. To paste iframe HTML, set Type to Code and paste it in Code.

3. 3

   Step 3: Set Width and Height

   These settings are optional. They apply to the IFRAME type.

4. 4

   Step 4: Choose an Aspect Ratio setting

   Ignore keeps a fixed height on mobile. Strict keeps the shape. Flexible keeps the shape with a little more height on mobile.

5. 5

   Step 5: Publish your site

   The Embed element shows nothing in the builder. Publish the site to see the frame.

Limits

• The Embed element needs Pro Standard or higher. Pro Lite does not include embeds.

• The Embed element shows nothing in the builder, so you must publish to see it.

• A syntax error in script code can break the site, so make sure your code is valid.

Troubleshooting

The frame is blank on the published site

The page sends X-Frame-Options or a CSP frame-ancestors header. Test the URL to see which header blocks it.

Blank iframe, no error →

"Refused to connect"

The site does not allow other sites to frame it. Only the site owner can change that header.

"Refused to connect": cause and fix →

The site comes up blank after you add code

The code has an error. Make sure your script code is valid, and look for the error in the browser console.

Blank iframe, no error →

Related