Hello
I’m building a site and want to add an external calendar to each of my collection pages. The calendars are embedded using a small piece of code, effectively loading an iframe.
I have tried to enter the embed code into the collection fields using most of the field elements, but it doersnt work.
Any idea if its possible to add ‘embed’ code into a collection field?
Thank you.
Here is my public share link: LINK
(how to access public share link)
Can you updated your link?
It doesn’t look like the URL was added to the LINK.
Hey @phase44
If you could share your site’s read-only link we can dig around a little bit and help you 
Check this out for help
Hi, thanks for taking the time to try and help.
I haven’t started building the site yet, I’ve just been playing around with a collection page to see if I can get it to work.
I want to be able to paste this type of iframe code into a collection field and have it display on a collection page:
Thanks.
This is an example of the type of code that I am trying to paste into a collection field. The collection page doesn’t allow me. Maybe there’s another way?
I know I can paste it into a page using the ‘embed’ element but ideally, I would like to use it in a collection field.
I just tried it out, it’s actually possible!
I can see in chrome’s network panel that the script loaded.
However, this seems pretty limited. I tried putting actual javascript console.log('test');, and it wouldn’t work, because webflow is escaping some special characters:
Hi, thanks for trying to help out.
I have done what you said but it doesn’t work well for me.
Here is my test page. http://phase44s-superb-project.webflow.io/posts/this-is-my-test-blog-post
When using the collection field, it just displays the code on the page.
The iframe calendar is displayed correctly only when I use a separate embed element but that doesn’t let me use the collection field.
Could you include your read-only link so I can take a look at your cms?
You can click this link to see how to do that if you don’t know
Here you go: https://preview.webflow.com/preview/phase44s-superb-project?preview=93b1b8249f71063f40b04166071d59a0
Remember, its not a site under construction. I’m just trying to see if I can get the iframe script to play ball with a collection field.
Thanks.
I can not see any embed element on that page.
You can save the src of the script in a collection text field. Then on the page you place an embed element in the collection list, and insert the src from the collection in the script tags:
The src will just show on the website, if you forgot to put it in src tags in the embed element. I did it like described and the script loaded.
But be aware that webflow escapes certain special characters. If the code still just shows on the website, inspect it and see if you find escaped characters in the code.
But with the concrete example you gave it works.
I got it to work!
Thank you ever so much for your help!
awesome, great to hear
Glad you got this sorted - a bit late, but embedding code in collections works brilliantly in Webflow. I have produced customer dashboard pages made up of code from Google Data Studio and Pingdom (website health) - both live reports and specific to that customer.
The customers love it and I produce it using a CRM called Pipedrive via Zapier - pretty much automatic web page production!
I’m trying to use Collections to hold data to be injected into Chartjs with mixed success.
I’m using Text field type.
Its possible to inject simple numeric data into my Chart.js script from a Simple Text field in collection like this:
12, 19, 3, 5, 2, 3
But I can’t get it to work for label data that needs to be structured like this:
'bin 1', 'bin 2', 'bin 3', 'bin 4', 'bin 5', 'bin 6'
Because the inverted commas get escaped when this is injected into the script in my Webflow template. It comes through like this:
'bin 1', 'bin 2', 'bin 3', 'bin 4', 'bin 5', 'bin 6'
Is there any way to prevent escaping of the ' character?
Hi there,
I am making a drop down booking page where you clink and when it drops down you see Calendly.
Now I like a different Calendly code embedded for each heading because the services are different. I am able to embed the code into the drop down and it works perfectly. The only problem is that I need the code to be different for every heading. When I put the embed, it automatically fill all the headings with the same code.
Any idea of how to achieve?
I tried the above but it didn’t work.
Thank you in advance,
Goce
As someone who creates weekly playlists for friends and family. I was running into the same issue. The issue is with creating a Text Field in your collection list settings and then trying to use that text within an embed added to the collection page template. You should instead add a Rich Text Field in your collection list settings. Then put the embed code in directly, then on the collection page template add a Rich Text element and source the Rich Text Field.
