Streaming live at 10am (PST)

Embed Code in Collection

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…

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


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

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

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/

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.

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!)

@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.

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