Join the Webstudio community

Updated 4 months ago

HTML Embed iframe dynamic src troubleshooting

At a glance

The community member is having an issue with embedding a dynamic URL in an iframe. When using a static URL, the embed works, but when using a dynamic URL from an Airtable record, it shows a Webstudio logo instead of the expected content. The community member notes that the same dynamic URL works when fetched in a text field.

The comments suggest that the community member needs to use template literals to properly interpolate the dynamic URL into the iframe source. One community member provides an example of how to do this: src="${AirTable.data.records...}". Another community member confirms that this solution worked for them.

Useful resources
When I use this embed with static url it works:
Plain Text
`<iframe src="https://s3.360creators.com/staging/wimhof/index.html#media-name=iceColdWater&yaw=141.15&pitch=3.49&fov=95.49" width="100% height="500px" style="border:none; overflow: hidden" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>`


When I used embed with dynamic url it doesn't work, it shows a Webstudio logo instead of the content I'm expecting:
Plain Text
`<iframe src="Airtable Wim Hof.data.records[0].fields.Deeplink" width="100% height="500px" style="border:none; overflow: hidden" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>`


When I fetch the same url in a text field, the text field just shows the url as expected.

So only with putting it in the iframe src is where I'm having difficulty with. Can anyone spot my mistake?
Attachment
image.png
B
R
7 comments
You need to add interpolation around variable
Plain Text
`string ${AirTable.data.records...} string`
So like this right?
Plain Text
src="`${AirTable.data.records...}`"
Without backticks. Those are around iframe already
So like this?
Plain Text
src="${AirTable.data.records...}"
Ahaa got it, thank you very much
This worked, for those who might encounter a similar issue and finding this discussion.
Attachment
image.png
Add a reply
Sign up and join the conversation on Discord