Streaming live at 10am (PST)

Dynamic HTML Embed In The CMS


#1

Hi there,

I am trying to replicate what @nate produced here using the HTML embed component with the CMS.
Preview:
https://preview.webflow.com/preview/html-embed?preview=14402b7a27dc88d9a2f415d37ff9eca7 155
Live Site:
http://html-embed.webflow.io/ 107

However, my code is escaping and displaying everything including the tags.

Is someone, perhaps @nate himself if he’s feeling generous, can take a quick look and see if there’s something i’m doing incorrectly please? I can’t understand why it’s behaving differently.

The collection is called ‘Quotes’.
Published page: https://www.motor-trade-insurers.co.uk/quotes/esse-aliquam

Share link below.

Thanks

Rob


Here is my public share link: LINK


#2

Did you try wrapping it in an iframe? I can’t see the result in the published site. But you have to wrap the code in tags.
< script>
< style>
< iframe >


#3

Hi @jbleroux,

Apologies, i’ve updated the post with the published page link.

In the example i was following he was not using an iframe. However, the real code the client will supply will likely be in an iframe so it may solve it.

But i’d like to know why my page has a different result to the one I followed.

Rob


#4

actually it is probably the stuff after the html. If any of the code is done improperly the embed won’t work. Have you tried just using the html tag?


#5

I’ve set up a Collection on this site (preview link) that creates the embed you’re looking for.

Basically, you want to create your Collection with fields for each element of the embed that might change from item to item. So for the Collection I created, I made a link field for the href, another link field for the source, then another for the alt tag. (You could add more if you wanted to vary other elements across items). Then, on your Collection page, select the corresponding bits of the code (the href, src, and alt tag) and replace them with field references.

The embed code also had a closing span tag, but no opener, so I added that too.

Here’s the University article for reference: https://university.webflow.com/article/how-to-use-dynamic-embeds-on-your-webflow-site


#6

@jmw Thanks for your time. I’ll give this a whirl and let you know how i get on.

Rob


#7

Hi @jmw,

The code that will be using will be an embedded form. The client will need to copy and paste the code into the field then I was hoping the HTML Embed component will render it on the site just like the example i followed.

I understand what you’ve suggested but this won’t help my problem. I need it to be working exactly like approach one here: https://preview.webflow.com/preview/html-embed?preview=14402b7a27dc88d9a2f415d37ff9eca7

I can’t understand why that one works and mine doesn’t.

Rob


#8

As you can see from the inspector, the HTML is being escaped so displaying incorrectly.


#9

Can anyone help here?

I can’t understand why this approach 1 renders correctly (http://html-embed.webflow.io/items/item-3)

And mine does not. (https://www.motor-trade-insurers.co.uk/quotes/esse-aliquam)

Rob


#10

Sorted now.

Found the javascript that goes into the custom code of the quote page template…


#11

Cool. Glad you figured it out, and sorry my implementation didn’t provide the solution you needed. :slight_smile:


#12

No worries. Appreciate the help!

Rob