Embed React App in collections page

Design help CMS
1

I’m building a Webflow collection in which I want to embed a ReactJS app; the app renders a complex form. The form must be displayed on every collection page and its inclusion is essential to meet my project’s requirements

I see that I can embed references to my compiled code within the <head> and <body> elements of standard Webflow pages, but I don’t see an API for doing the same thing on collection pages.

How can I get my React scripts into the <head> and <body> elements of my collection pages so my app will render correctly?

2

Not sure exactly where you’re having issues but in general the easiest integration is an IFRAME.

  • host your custom app somewhere
  • use an Embed element where you want the IFRAME to appear

Other integrations are possible but much more work.

3

Thanks @memetican , I appreciate the reply

So there’s no way to access this same dialogue box for collection pages?

Screenshot 2024-09-30 at 12.25.10 PM
Screenshot 2024-09-30 at 12.25.10 PM1852×1608 247 KB

4

Yes, but code you put on the collection page will be on all collection pages.
If you’re taking the IFRAME approach and want it per-page, then you can;

  • Add a rich text field to your CMS called e.g. “React iframe”
  • In it, for each CMS item, add an Embed element within the rich text and add your IFRAME html
  • Drop a rich text element on your collection page, and bind it.

If you can isolate your differences to just the URL you’re iframeing, like https://app.mysite.com/widgetmaster?id=123, then you could store just the URL in a CMS field, and use the +Add field feature inside of an embed or code area.

5

@memetican Thanks, I’ll give that a shot

6

@shaners you can also find the Custom Code on the settings for the CMS Template Page:

2024-10-01 at 10.01.31@2x

If you need to add the same code to every page in the CMS, then you can add it to the or sections in there.