How to Embed a Widget on Tilda
Tilda is a powerful block-based website builder popular among designers and creative professionals for its beautiful templates and pixel-perfect control. This guide shows you how to embed an Embeddy widget on your Tilda site using the T123 HTML block and the T922 embed block.
On this page
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>
- Tilda editor access. You need access to the Tilda page editor. The HTML block (T123) is available on all Tilda plans, including the free tier. The embed block and advanced features may require a Personal or Business plan.
HTML Block (T123)
The T123 block is Tilda's dedicated HTML block that lets you add raw HTML, CSS, and JavaScript to any page. This is the most reliable method for embedding custom iframes.
- 1
Open the Tilda page editor
Log in to your Tilda account, go to your project, and click on the page you want to edit.
- 2
Add a new block
Click the + button between existing blocks (or at the bottom of the page) to open the block library.
- 3
Select the T123 HTML block
Navigate to the Other category in the block library. Find the T123 block (labeled HTML code) and click to add it. You can also search for "HTML" in the block search bar.
- 4
Open the block Content settings
Click on the newly added T123 block to open its settings. Click Content to open the HTML code editor.
- 5
Paste your Embeddy iframe code
Paste your full iframe embed code into the HTML field. You can also add CSS in the CSS field if needed.
- 6
Save and publish
Click Save to save the block, then click Publish in the top-right corner to push the changes live.
Tip: The T123 block does not render a live preview in the editor. You will see a placeholder. Click Preview in the top menu or publish the page to see the widget rendered on the live site.
Note: Tilda also offers the ability to add custom code to the page header via Page Settings > More > HTML code for <head> section. Use this for scripts that need to load before the page content, but for iframe embeds, the T123 block is the better choice.
Embed Block (T922)
Tilda's T922 embed block is designed specifically for embedding external content via URL or embed code. It provides a simpler interface than T123 for straightforward iframe embeds.
- 1
Add the T922 block
In the block library, navigate to the Other category and select the T922 embed block.
- 2
Open Content settings
Click the block and open Content. You will see a field for entering embed code or a URL.
- 3
Paste your iframe code
Paste the full Embeddy iframe embed code into the embed code field.
- 4
Save and publish
Save the block and publish the page. Visit the live site to verify the widget loads correctly.
Warning: The T922 block may not support all iframe attributes. If you need full control over HTML attributes like loading and title, use the T123 HTML block instead.
Iframe Embed Code Example
Here is what a complete Embeddy iframe embed looks like for Tilda. 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 Tilda T123 HTML block --> <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 T123 block shows a placeholder in the editor
This is expected. Tilda does not render custom HTML blocks in the editor. Click Preview in the top menu or publish the page to see the widget render on the live site.
The widget shows a blank area on the published page
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.
Cannot find the T123 or T922 block
These blocks are listed under the Other category in the block library. You can also search for "HTML" or "embed" in the block search bar. If you still cannot find them, check that your Tilda plan supports custom code blocks.
Widget is cut off or too small
Increase the height attribute in your iframe code. You can also adjust the block height in Tilda's block settings. Try height="600" or higher as a starting point.
Frequently Asked Questions
Does embedding an Embeddy widget slow down my Tilda 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 custom HTML on the free Tilda plan?
Yes. The T123 HTML block is available on all Tilda plans, including the free tier. However, free plans are limited in the number of pages and blocks. The Personal and Business plans offer more flexibility and additional features like custom domains.
Will the widget be responsive on mobile?
Yes. Tilda generates responsive pages by default. Using width="100%" in your iframe ensures the widget scales to fit the screen. Preview the mobile version in Tilda to confirm the layout.
Ready to build your widget?
Create a free Embeddy widget — no code required. Get your embed code in minutes and drop it into your Tilda site.
Create your free widget at embeddy.ai