Hello everyone, I search quite a bit but can’t seem to find the answer. Is there a way to use components custom properties in html-embed, so that each instance of component has different html-embed based on the properties.
ps : the html-embed contains svg element (i don’t want to use img because the it will need to load external file)
I’ve no answer for you, but I do have the same need!
In my case, I’m using an Embed HTML element because I want to use semantic tags like <figcaption> <dl> <dt> <dd> (think of a quote with an author, a job and a description), but I want the content to be editable.
I thought that it would be trivial to do… as it’s possible with collection fields (Webflow University - Use Collection fields in custom code embeds).
you are telling me that you can modify rich-text with embed html ?
Depending on how you look at it, yes!
Hey guys,
@Mathias_Vigier have you successfuly done what you were looking to accomplish?
I also would like to create components with different instances but I can’t set a property with “Embed HTML”.
Looking forward to hear from you!
Did you manage mate?
I’ve been bashing my head against the wall trying to do something similar
I had to recreate my section 8 times for 8 different pages instead of using component simply because of that unfortunately.
I suggest that Webflow should implement this feature in the near futur.
Rory’s solution above works great.
In your component, create a Rich text element. Then create a component property for managing that Rich text content.
In your instances, you can edit the instance-specific richtext, which means you can add an HTML embed inside of the rich text element with whatever instance-specific code you want.
I’ve figured out another workaround which, in my opinion, is the cleanest of any of the ones suggested here - however still not perfect and hopefully the Webflow team can add this feature into the editor in the same way as the CMS property embeds.
In short, this hack involves linking the component / symbol properties to css attributes on the embed element, and then within the embed - a script is used to find reference to these attributes and pull their values.
The code itself is not as clean as one would hope, but the end result is exactly what you’re looking for - with an embed element that is reusable with properties exposed in the editor.
EXAMPLE
My component set up is as follows:
The code within the HTML embed looks like this, combining the HTML for the video player (in my use case) with a script for fetching the attributes and setting them within the video player.
<div class="responsive-iframe-container">
<iframe
class="responsive-iframe"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script>
function reload(r){
var content = r.innerHTML;
r.innerHTML= content;
}
var scriptTag = document.getElementsByTagName('script');
var thisScript = scriptTag[scriptTag.length - 1];
var parent = thisScript.parentNode;
var attr_videoId = parent.getAttribute("attr_videoId");
var attr_title = parent.getAttribute("attr_title");
var iframeContainer = parent.querySelector('.responsive-iframe-container');
var myFrame = parent.querySelector('.responsive-iframe');
srcTemp = `[https://www.youtube.com/embed/${attr_videoId}?autoplay=1`](https://www.youtube.com/embed/$%7Battr_videoId%7D?autoplay=1`)
myFrame.setAttribute("src", srcTemp);
srcDoc = `<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=[https://www.youtube.com/embed/${attr_videoId}?autoplay=1><img](https://www.youtube.com/embed/$%7Battr_videoId%7D?autoplay=1%3E%3Cimg) src=[https://img.youtube.com/vi/${attr_videoId}/hqdefault.jpg](https://img.youtube.com/vi/$%7Battr_videoId%7D/hqdefault.jpg) alt=${attr_title}><span>▶</span></a>`
myFrame.setAttribute("srcdoc", srcDoc);
myFrame.setAttribute("title", attr_title);
reload(myFrame);
</script>
The end result is a reusable html-embed component that exposes properties in the editor, without any changes to the underlying code:
The code to pay attention to, in particular, are these lines:
var scriptTag = document.getElementsByTagName('script');
var thisScript = scriptTag[scriptTag.length - 1];
var parent = thisScript.parentNode;
var attr_videoId = parent.getAttribute("attr_videoId");
var attr_title = parent.getAttribute("attr_title");
This works because, at the time of execution of the given script, it will be the last script in the stack trace and hence the last script in the list returned by document.getElementsByTagName('script'). This means you can have the script grab reference to itself, and then pull the CSS attributes from that as you would with any attributes.
These CSS attributes are mapped onto the component/symbol properties from the sidebar in webflow.
You are then free to use these variables however you need to within your embed. In my case, it was populating properties of my video player - but they could be used for whatever your use case is.
Final sidenote: The naming is not important, i simply named mine attr_[property] whilst making sense of the way that attributes worked, but your properties can be called whatever you want, as long as you fetch them by the right name.
Took me a few hours of experimentation to figure this out so hope some of you find this useful!
Bless 
Pat
Pat’s solution is sweet but you obviously sacrifice no longer being able to see the result of the embed in the Designer. Once there’s a tag present, Webflow doesn’t render the embed inside the Designer, only on the published still. It would still be extremely valuable to allow properties to be passed to embeds, for this exact use case and others.
For sure, my workaround is not the most ideal, it would be much cleaner to have properties pulled in directly as they are within CMS collection pages. Hopefully this can come around sooner rather than later, with all the updates to the component system coming round
my need was to have mailchimp form code for different languages.
I know that webflow can handle mailchimp submits by itself but in my case one field didn’t work ( groupNNN ).
So i have a component with mailchimp form code within the collection list.
the collection has fiedls for each element that needs translation.
Parts of the code connected to the colection fields.
the Component has a custom attribute that is connected to the prop - “language”
additional block of css hides all the collection items depending on the language attribute. Like this:
[data-lang="de"] .item:not([data-lang="de"]),
[data-lang="en"] .item:not([data-lang="en"]) { display: none; }
the code is not precise but you got the idea.
you don’t need collection if you’re ok with code duplication