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
- This particular example is an embeded video player, but can be customised for any embed purposes, just using the pulled attributes however you need to within the embed.
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