Streaming live at 10am (PST)

Html embed element inside CMS collection

Hi All,

I want to basically create a website where based on the color chosen in a color picker, the colors of the SVGs on the page accordingly.

I have managed to use some custom code and create a basic prototype on webflow. It can be viewed here: (color picker in the bottom-right). To do this, among other things, I had to add the SVG through a Html embed element. Also, because the SVG code had more than 10,000 characters, I had to use the solution given in this link in point 2b: How to embed files hosted on Github.

Now, I want to be able to add different SVGs to the page based on a CMS collection. But making it custom, I just wanted to serve the same SVG using the CMS. So, I just moved the HTML embed element into the collection items. However, instead of showing up in its respective grids, all six SVGs are now showing up in the first grid itself. Here is that link:

I am unable to understand the reason behind this. Can someone help me with this? I have shared a read-only link here:

I think you should try moving the html embed into the “collection item” (instead of referencing it in the CMS entry) this way the embed is going to be present in each item…

what i mean is physically move the embed into the “collection item” div in the navigator

Hey @IVG, Thanks for your reply! I actually do have the html embed item inside the collection item in this link:

Below is the structure which show that the html embed item is inside the collection item. Please let me know if I am missing something.

Screen Shot 2020-03-16 at 10.16.17 AM

ok so what is not working right? you have the svg in each cms item and each all are controlled