Streaming live at 10am (PST)

Embed Code in Collections


#1

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)


#2

Can you updated your link?

It doesn’t look like the URL was added to the LINK.


#3

Hey @phase44

If you could share your site’s read-only link we can dig around a little bit and help you :slight_smile:

Check this out for help


#4

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.


#5

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?

script src=‘https://www.accommodationcalendar.com/widget/cwidget.php?calendarID=50833d26d23a4f6491a75b02c99576c62a294c9dd5d6a753bbe4f7a2c46eb363&col=4&row=4&size=2&lang=english&bg=FFFFFF&dfc=000000&border=CCCCCC&hbg=F1F0F0&hfc=000000&abg=DDFFCC&afc=000000&ubg=FFC0BD&ufc=000000&mobileresize=yes’></script

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.


#6

I just tried it out, it’s actually possible!

  1. Add a text field in the collection that holds the src

  1. add an embedded element to the collection list
  2. open it, click on “add field” and select “src”
  3. do this:

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:


#7

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.


#8

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 :slight_smile:


#9

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.


#10

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.


#11

I got it to work!

Thank you ever so much for your help!


#12

awesome, great to hear :slight_smile:


#13

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!