Embed Code in Collection

[Janet_C (Janet Clarke)]

Hi all,

We are a bit stuck! We run a real estate business. Our existing Adobe Muse built website is here…
www.MoveWithMe.ca
…and we are trying to update/expand/recreate this in Webflow. We are beginning to make decent progress but we have hit a wall with the 100 static page limit on Webflow. At present, we use individual pages to embed property listing data for specific communities, like…
https://movewithme.ca/air-ranch-home-search.html and
https://movewithme.ca/mountainview-home-search.html
In our Webflow site, we are looking to expand the coverage of our website to include 400+ individual communities like above, which, obviously, doesn’t sit well with a 100 static page limit.

So, we are exploring whether/how using Webflow CMS can help us achieve our goal.

First question…do the individual Collection Pages produced within Webflow CMS count towards the 100 page limit? So, would the following two mocked up Collection Pages count towards the 100 page limit…
https://move-with-me-cdd265ebc020217725fb06e010.webflow.io/property-listings/cranston and
https://move-with-me-cdd265ebc020217725fb06e010.webflow.io/property-listings/auburn-bay
If so, then we are probably done for, as we would end up with 400+ of these in our finished design.

Second question…when you visit the above two pages, you will see there are no Property Listings displaying. I have been trying to embed the following two codes in my collection so that they display on the above pages…

and

…And to do so, we have been trying to follow this advice, but without success in getting the above scripts to display the property listings…

Embed Code in Collections

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 anyone offer advice on what we are doing wrong? The preview link for our site is at:

https://preview.webflow.com/preview/move-with-me-cdd265ebc020217725fb06e010?utm_medium=preview_link&utm_source=dashboard&utm_content=move-with-me-cdd265ebc020217725fb06e010&preview=f02e5ff29a497843d9603ef00b3b99e9&mode=preview

Any advice and guidance (in as layman terms as possible!) gratefully received. Thanks in advance.

---

Here is my public share link: LINK
(how to access public share link)

[webdev (Jeff S)]

@Janet_C

First question …do the individual Collection Pages produced within Webflow CMS count towards the 100 page limit?

Nope. Only static pages count on the 100 limit. There is a limit on collection items depending on plan.

@Janet_C

Second question …when you visit the above two pages, you will see there are no Property Listings displaying.

You are loading a jQuery dependent script before jQuery ios loaded is a problem. All jQuery dependent scripts have to be loaded in the before body close area. The other issue is Webflow encodes the script from an embed which breaks the script. There are two workarounds.

Workaround 1 - Create a richtext field to embed the script into. Sounds strange but that will work. This is the easy method.

Workaround 2 - Use a script to decode the encoded text from the embed. I wrote a workup on my blog some time ago. Here is the link. https://wfhow.com/render-collection-custom-code-webflow/

[Janet_C (Janet Clarke)]

Hi,

First of all, thanks so much for taking time out to share your expertise with us. We appreciate it.

Re your answer to the first question, that’s great about the page count. We can see that with circa 400 “pages” to create, we are going to have to limit ourselves to 5 collection items per collection list entry. Probably do-able.

Re the second question, we are still stuck. In trying to follow your advice (Workaround 1) we have…

1. Updated our CMS Collection List to include a Rich Text field (called Description - RTV)
2. Pasted the relevant script in the “Description - RTV” Rich Text field of each of the Collection List records
3. Added a Rich Text field in the CMS Collection template page (Property Listings Template) and told it to pull in the data (the script) in the Rich Text field in the Collection List, which it does, but in so doing, it just displays the actual script on the page, rather than the property listings that the scripts are meant to reference.

So we are clearly still missing a step.

We should explain that our level of knowledge is about 1, maybe 2, steps up from Neanderthal! We are trying to learn though. Any further guidance gratefully received.

[webdev (Jeff S)]

@Janet_C

So we are clearly still missing a step.

You need to place your code into a code embed inside the rich text element. Follow instructions from this link: https://university.webflow.com/article/rich-text#add-custom-code-(new!)

[webdev (Jeff S)]

@Janet_C, if your script structure is always the same you can just store the src variable in a field (text), add an embed to the collection template, then insert and bind the value of the script src into a script block.

So the embed looks like this;

<script src="{field}"></script>

This is only a good solution when your embed is simple. Complicated embeds are better handled with Workaround 1.

If you need implementation help you can inquire about my services via a private message.

[Janet_C (Janet Clarke)]

Genius! Thank you so much. The first of your latest two pieces of advice solved the problem in an instant!

[falkhater1 (Feras A. Al-Khater)]

dear webdev, thanks for sharing your expertise

however, im not able to get it to work

[falkhater1 (Feras A. Al-Khater)]

I need support as im trying to do the same embed code in collection list but not able to get it to work. you can see screen shots as below of the calendar code and customer code

[webdev (Jeff S)]

Webflow encodes the value of embeds from a collection field. So you either need to decode the encoded text or you can create a RTF and insert all the code (including script tags) into the code embed insert available where it will be rendered as entered.