How to Embed a Widget on Carrd

Carrd is a modern one-page website builder loved by creators, freelancers, and indie makers for its simplicity and clean design. This guide walks you through embedding an Embeddy widget on your Carrd site using the built-in Embed element and the Widget (URL) element.

Beginner~5 min readUpdated 2026

Prerequisites

Before you embed your widget, you need two things:

Your Embeddy embed code. Log in to your dashboard at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code. It looks like this:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

A Carrd Pro plan (or higher). The Embed element and custom code features require a Carrd Pro plan or above. Free Carrd sites do not support custom HTML or iframe embeds.

Important: Pro plan required

Carrd's free tier does not include the Embed element or custom code injection. You need at least a Pro Lite plan ($9/year) to embed iframes. If you see the Embed element grayed out, upgrade your plan in Carrd's account settings.

Embed Element (Recommended)

The Embed element is the most direct way to add custom HTML, including iframes, to your Carrd page. It accepts raw code and renders it inline.

1
Open your Carrd site in the editor
Log in to carrd.co and click on the site you want to edit to open the visual editor.
2
Add a new element
Click the + button in the top-left corner of the editor to open the element picker.
3
Select Embed
From the element list, choose Embed. In the settings panel that appears, set the Type to Code.
4
Paste your Embeddy iframe code
In the Code text area, paste your full iframe embed code from the Embeddy dashboard.
5
Adjust size and position
Use the element's width and height controls to size the embed area. Drag it into position on the page.
6
Save and publish
Click Save in the top-right corner, then click Publish to push the changes live.

Tip: Carrd's editor may not render the iframe preview live. After saving, visit your published URL to confirm the widget loads. You can also use Carrd's Preview mode to test before publishing.

Widget Element (URL Method)

Alternatively, you can use the Widget element with the URL option to embed content via a direct URL. This method creates an iframe automatically from the URL you provide.

1
Add a Widget element
Click + and select Widget from the element list.
2
Enter your Embeddy widget URL
In the URL field, paste your Embeddy widget URL: https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID
3
Resize, position, and publish
Adjust the widget dimensions, drag it into position, then save and publish.

Warning: The Widget (URL) method gives you less control over iframe attributes like loading and title. For full control over your embed, use the Embed element with the Code type instead.

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like for Carrd. Copy your specific code from the Embeddy dashboard — the WIDGET_ID and PROPS_ID values will be filled in automatically.

<!-- Embeddy widget embed — paste into Carrd Embed element (Code type) -->
<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="My Embeddy Widget"
></iframe>

You can adjust height to match your widget's content. Use width="100%" to make the embed responsive across all screen sizes.

Troubleshooting

The Embed element is grayed out or unavailable

This means you are on a free Carrd plan. The Embed element requires at least a Pro Lite plan. Upgrade your Carrd subscription in your account settings to unlock custom code features.

The widget shows a blank area on the published site

Verify your Widget ID and Props ID are correct. Open the Embeddy dashboard and copy the embed code fresh. Also confirm your widget is published (not in draft mode) in Embeddy.

Widget does not display in the Carrd editor

Carrd's editor may not render embedded iframes live. This is normal. Use the Preview button or visit your published URL to confirm the widget loads correctly.

Widget is cut off or overflows the container

Adjust the height of the Embed element in the Carrd editor to match your widget's content height. You can also modify the height attribute directly in your iframe code.

Frequently Asked Questions

Does embedding an Embeddy widget slow down my Carrd site?

No. Iframes load independently of your main page. The widget loads from Embeddy's servers in a separate browser thread and does not block your page's rendering. Using loading="lazy" in the iframe tag further defers loading until the widget is visible in the viewport.

Can I use the Embed element on the free Carrd plan?

No. The Embed element and custom code features require a paid Carrd Pro plan (Pro Lite, Pro Standard, or Pro Plus). Free sites are limited to Carrd's built-in elements without custom code support.

Will the widget be responsive on mobile?

Yes. Carrd is fully responsive by default, and using width="100%" in your iframe ensures the widget scales with the page. Preview the mobile layout in Carrd's editor to confirm everything looks correct.

Ready to build your widget?

Create a free Embeddy widget — no code required. Get your embed code in minutes and drop it into your Carrd site.

Create your free widget at embeddy.ai

On this page