Dynamically inserting a collection-page specific HTML Embed

you cannot insert code into the dynamic collection. But there is still a workaround for this.

What type of code are you trying to put in?

Thanks for the quick response! Really appreciate it.

Here is what I’m trying to embed:

Over the Top Gear
Click image to open interactive version (via Just Park).

The irony that it works on the forum lol.

<a href="https://www.justpark.com/creative/over-the-top-gear/" target="_blank"><img src="https://www.justpark.com/creative/over-the-top-gear/social/embed.jpg" alt="Over the Top Gear" border="0" width="600" height="737" /></a><br /><span style="font-size: 12px;">Click image to open interactive version (via <a href="https://www.justpark.com/">Just Park</a>).</span>
1 Like

Hey @JacobPlumb

I’m not sure I’m following why you would be using the embed element for this.

The code you posted can be recreated in the design - A div with image element nested in a link block inside of it.Along with a text element within the parent div. The image, link destination, and text can all be made dynamic by connecting the to their respective fields.

2 Likes

Because there will be unique embed codes on every page.

It won’t always be the same template.

@PixelGeek I’d be keen to learn of any workarounds!

There isn’t a direct work around for this. There isn’t away to output HTML from the CMS. The embed is used to custom code elements and allows us to bring in values from the CMS.

So for instance you can put a dynamic list in a form put an embed in the dynamic list. hand code the form field and use CMS data to fill in specific values.

Without knowing the variety of code you are working with and how you have setup your collections it’s difficult to help further.

Feel free to post your read only link so we can maybe take a closer look.

2 Likes

No worries, I’ll have to have a re-think on how to approach this.

Is it ever going to be possible to output custom HTML from the CMS, or is it done for security or some other reason?

Appreciate your help Alex.

1 Like

Hey Jacob this can work with custom code. I came up with 2 approaches that work. The first implementation takes HTML from a field value and renders it within the custom code embed. The issue you ran into was that the HTML rendered was escaped on publish. There’s a script in the page settings that reconverts the value back into HTML on load.

The second approach as suggested by @AlexN renders the HTML inside an embed and would allow you to place a unique embed code inside each item. I recommend the second approach because you’d only need to set the unique embed ID on each item instead of the entire HTML string.

Preview:
https://preview.webflow.com/preview/html-embed?preview=14402b7a27dc88d9a2f415d37ff9eca7

Live Site:
http://html-embed.webflow.io/

9 Likes

@nate you are awesome :heart_eyes:
I have been looking for a way to get CMS html embeds to work for more than half a year. And that little script just did it. lol
Flaming A! Now I can copy paste from Ulysses directly into the CMS and have myself some beautiful footnotes, too.
I’m celebrating :champagne::baby_bottle::tada:

3 Likes

@nate just made a lot of people’s days!

1 Like

I am confused ca you explain in more depth.

I am building a website for a fashion blogger. With each post she needs to include this code:

<div class="shopthepost-widget" data-widget-id="2001544"><script type="text/javascript">!function(d,s,id){var e, p = /^http:/.test(d.location) ? 'http' : 'https';if(!d.getElementById(id)) {e = d.createElement(s);e.id = id;e.src = p + '://' + 'widgets.rewardstyle.com' + '/js/shopthepost.js';d.body.appendChild(e);}if(typeof window.__stp === 'object') if(d.readyState === 'complete') {window.__stp.init();}}(document, 'script', 'shopthepost-script');</script><div class="rs-adblock"><img src="//assets.rewardstyle.com/production/65ba2adad4cb63ad42bad79ce9dc6d0989465dfa/images/search/350.gif" onerror="this.parentNode.innerHTML='Disable your ad blocking software to view this content.'" style="width: 15px; height: 15px;" /><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>

Which is basically an affilate link customized for each post and each outfit I tried to do exactly with @JacobPlumb tried when he initially started this post. (Obviusly didnt work) I went into your example and pulled the script:

<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

!-- Start script -->
<script>

// Function that unespaces HTML
function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

// Store value of html into variable
var code = $(".code-embed").html();

// Store unescaped value into new variable
var formattedCode = htmlDecode(code);

// Place new value back into the embed
$(".code-embed").html(formattedCode);

But it was unsuccessful in rendering the HTML from the collection

Make sure your custom code embed has a class of “.code-embed”. This is what the script is looking for.

1 Like

I’ve tried using the method described by @nate with no success. I used a Plain Text field in my collection, populated it with HTML, and then placed an HTML embed on the collection template, using the dynamic tag as the content for the embed (see below). However, no luck on publish.

Anyone have any tips for how to achieve this?

@jordanshotwell Provide a share link and I can take a look.

Thanks @nate, I sent you a PM!

7 posts were split to a new topic: Dynamically inserting a collection-page specific HTML Embed with Tag 2

Please create a new linked post if you have any issues. Thank you.