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

3 Likes

You should specifically say that you add a “rich text element” in the CMS, and then you add a “rich text element” in the page… it will ACT like an embed element. GREAT SOLUTION! THANKS @threehex!!

1 Like

Hey All, I see ability to add a “code” block to the RTF, but do not see a way to then also have the RTF CMS entity populate within the field.

How are you both selecting “code block” and having the RTF field read data from the CMS?

Could you add a gif or some screen shots?

1 Like

Yes, this is the problem. You can put Embed Code into a Rich Text field in the CMS… but when you go to the custom code section of the template, although it lets you choose fields from your CMS… it doesn’t allow you to select Rich Text Fiels - ironically, the ONLY fields in which you can actually paste code. What a clusterf*ck!

Another workaround is to just use a plain text field, and decode the encoded output on the front end.

1 Like