Streaming live at 10am (PST)

Embed custom code dynamically via CMS?

I’m trying to embed an Elfsight instagram widget using the CMS - each item in the collection will have it’s own unique widget, which I’m trying to display on the Collection page.

The embed div just seems to get spit out as text. This is the code - I’ve entered this as a Plain Text on the cms collection:

<div class="elfsight-app-a72df376-3262-45b7-af88-5cddaab31973"></div>

They give me a script, which I tried adding to the site footer, and to the Collection Page’s custom code:
<script src="https://apps.elfsight.com/p/platform.js" defer></script>

I’ve seen a few threads that seem to suggest a solution but don’t actually outline the solution, or have broken links (Dynamically inserting a collection-page specific HTML Embed), so I find myself lost…

Any ideas?

read-only https://preview.webflow.com/preview/dbfyi-members?utm_medium=preview_link&utm_source=designer&utm_content=dbfyi-members&preview=7bc3d315853fdc67a15bd05f69ffb566&pageId=5e0a4718743608797be97bb2&itemId=5e0e72a3f72aff81d045401b&mode=preview

Try this:

image

and

image

Only put the variable part in the CMS, always.

1 Like

Hm, so this isn’t working. Anyone have any other ideas?

I wrote about how to resolve this on my blog.

Adding solution here because the suggested methods didn’t work or aren’t explained in enough detail to solve the problem, and because the solution was extremely straightforward.

The embed code needs to be placed in a Rich Text CMS element - within the Rich Text element you want to choose the CODE option (see image below) when adding the embed script to the element. This can then be dropped into the Collection Template page as Rich Text, and it will generate.

Screenshot 2020-02-18 10.07.37