Create Embed inside of Div-Block with custom code

Hey, first of all: I’m new to custom html code:

I want to embed a Airtable Embed into a Divblock with custom Code. But I don’t really know how to target an Element.

This is my code so far grimacing: :

<script>
.template {

<iframe class="airtable-embed" src="https://airtable.com/embed/shr1XAfcHG3PrSH1L?backgroundColor=gray&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

}

</script>

Thank you so much.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Do you want to embed this Airtable project in a div with the class .template?

In Webflow, on the page you want the table on, create the div, give it the class .template.

From the Add panel on the left, drag an Embed component inside of the div. The Embed component should open its editor right away.

Paste only the iframe part of the code. No need for any tag around, as <iframe> is an HTML element.

Click on Save and Close, then after a few seconds you should see your Airtable right in the designer.

<iframe class="airtable-embed" src="https://airtable.com/embed/shr1XAfcHG3PrSH1L?backgroundColor=gray&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

1 Like

Hey Vincent, first of all: Thank you so much for your extremely fast reply.

But unfortunately this is no option for me. I think I got it wrong on my question. I’m sorry. I want to add the Airtable Table with the site specific code section because I want to customize the table for each user.

Thank you, again!

The code you referenced in your initial post is using incorrect syntax so you’ll still want to follow @vincent’s suggestion of adding the element using a div with the class template and including only the <iframe> code within it.

I want to customize the table for each user

I’m guessing you want the code to change based on data from your CMS? If that’s the case, you’ll use the exact same setup described but utilize Webflow’s dynamic embed feature.

Make sure the embed element either nested within a Collection List or included on a Collection page and then you’d just need to select the unique part of the iframe code, choose “+ Add Field” in the upper right-hand corner of the Embed modal, and tie it to the related Collection field. Once that’s setup, it should look something like below, but with the correct field mapped:

Thank you for your answer. This was my first idea to but my user Information it isn’t a CMS Collection. I got them on Firebase so I need to add it via custom code.

The user CMS in my project was a just a Test before I used Firebase

Ah okay, that makes your situation a bit more involved that originally described and would require grabbing the information from the Firebase API using JS:

There may be a low-code option using Zapier or Integromat to throw the information into the Webflow CMS but I don’t have any instructions on that as I haven’t played around with that sort of integration before.