How can I embed a live stream video chat iFrame with a dynamic id from a collection item using Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To embed a live stream video chat iFrame with a dynamic ID from a collection item using Webflow, you can follow these steps:

Create a Collection: Start by creating a Collection in Webflow to store the relevant information for each video chat. This could include fields like ID, URL, and any other necessary details.
Design a Collection Template page: Next, design a Collection Template page where the video chat will be displayed. This is where you'll need to embed the iFrame.
Add an Embed element: On the Collection Template page, add an Embed element where you want the video chat to appear. You can find this element in the Elements panel on the right-hand side of the Webflow Designer.
Set the iFrame source dynamically: Double-click the Embed element to open the Embed settings panel. Here, you can set the source of the iFrame dynamically based on the dynamic ID from the collection item.
Use custom code: In the Embed settings panel, select "Custom code" from the "Type" drop-down menu. Then, you can use custom code to generate the iFrame URL dynamically using the dynamic ID from the collection item.
Reference the dynamic ID: You can reference the dynamic ID from the collection item using Webflow's Template syntax. For example, if the dynamic ID field is named "VideoID" in the Collection, you can use the following code in the custom code input:
<iframe src="https://your-live-stream-url.com/{{collectionitem.VideoID}}"></iframe>
Replace "https://your-live-stream-url.com/" with the actual URL of your live stream.
Preview and publish: Preview the Collection Template page to ensure that the iFrame is embedded correctly. If everything looks good, publish your Webflow project to make it live on the web.

By following these steps, you will be able to embed a live stream video chat iFrame with a dynamic ID from a collection item in Webflow.

Additional questions:

How can I embed a live video chat using Webflow?
How to create a Collection Template page in Webflow?
What is the use of an iFrame in Webflow?

Can Webflow provide a solution to circumvent the 100 item limit in a collection list without using a plugin like finsweet?

What is a workaround to quickly test a piece of code in Webflow without needing to save, close the panel, and publish?

How can I reference the jQuery library in my web page's <head> tags in order to use this script in Webflow?

How can I make the code from this CodePen example work in Webflow?

How can I add a Tick Tock icon to the footer and update the link to the Tick Tock website in Webflow?

In Webflow, what is a suitable place to store a script file that exceeds the custom code character count, and how can I refer to it in my website design?

Can anyone help me troubleshoot z-depth issues in Safari on mobile for my Webflow site?

How can I create a one-line email submission form using Webflow?

Can I purchase a template and associate it with my existing Webflow project for my client's blog-like feature? Is it possible to map part of a website to a subdomain (e.g., http://blog.customerSite.com) or can custom domains only be used for the root index domain in a Webflow CMS project?

How can I remove the leftover lines created when removing columns and rows in Webflow's CSS Grid?