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:
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…
Only put the variable part in the CMS, always.
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.
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!!
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?
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.
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:
- Add a rich text field to your collection. Save the collection
- Either start a new record or open a current one and click into the field you’ve just created and click the little ‘+’ button.
- Select the ‘<>’ option - this will open the code editor.
- Paste in your code.
- Save record
- Go to the template page and add a rich text box getting the data from the field you created.
- Publish and view.
Thank you so much Jeff, this opens up a world.