Embed custom code dynamically via CMS?

Design help Custom code
1

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 - #10 by nate), 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

2

Try this:

image

and

image

Only put the variable part in the CMS, always.

1 Like
3

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

4

I wrote about how to resolve this on my blog.

4 Likes
5

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

10 Likes
6

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

2 Likes
7

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
8

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!

9

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

2 Likes
10

Just to be clear, Derek’s solution in post 5 works fine and, with respect to him and for the sake of clarity do this:

  1. Add a rich text field to your collection. Save the collection
  2. Either start a new record or open a current one and click into the field you’ve just created and click the little ‘+’ button.
  3. Select the ‘<>’ option - this will open the code editor.
  4. Paste in your code.
  5. Save record
  6. Go to the template page and add a rich text box getting the data from the field you created.
  7. Publish and view.
4 Likes
11

Thank you so much Jeff, this opens up a world.

12

Finally @Hywel, all those other posts skipped the part about adding the embed code into the CMS record AS code, not just regular text. Thanks!

1 Like
13

You are the best, I’m so fresh to this but instructions were perfectly easy to follow, thank you!

14

why did i leave wordpress button ------>

15

If anyone is still having trouble making Jeff’s code work for collection lists, double-check that the class name on your HTML embed matches what’s being called in the script. I spent more time debugging than I should have, only to realize the class I was explicitly told to name .custom-code actually needed to be .podcast-embed for the collection list script to work.

To be fair, Jeff does mention that you can change the ID, but the way it’s explained makes it easy to assume you should still be using custom-code for collection lists. Would’ve saved me a lot of time if it had been clearly spelled out that .podcast-embed was necessary instead.

Pretty ironic, considering we were told that if it didn’t work, we ‘obviously weren’t following instructions.’ Kind of condescending to scold people looking for a no-code solution only to have to write custom code for a basic function that should’ve been built-in to begin with.

16

This is the Answer! Helped out a lot, runs perfectly for dynamic embedcode.