Is it possible to use the “Symbol override” functionality in combination with the “embed” element?
With have developed some custom code widgets which we would like to include on our pages. These widgets have some configuration options on initialisation. As I don’t want the design team to have to deal with custom code I thought I would create a symbol out of the embed element and add overrides which the design team can use to configure the widget.
Would be awesome if the overrides could be used as variable in the embed widget.
For an simple example:
for the example above you can create a text block and set display: none with id #name
then <script>alert(`Hello ${document.getElementById('name')}`)</script>
@kyle_kitlinski I’ve found a workaround using the CMS and Using the “Collection List Wrapper” element. It’s a bit hacky and I wish Webflow would develop support for embed overrides, but it get the job done. When using the CMS you have to option to include fields in your code. See screenshot below.
I’ve had this issue a couple times so I thought I’d share another workaround! If you’re just wanting a simple CSS change, you can add a dummy link to Symbol, the override the link’s href tag, and then use that as an additional selector.
It’s not as flexible as Boedy’s answer, but can be faster if you already have a lot of symbols built out and need a quick fix. I would also love to see Webflow flesh out Symbol’s a bit more
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.
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:
Took me a few hours of experimentation to figure this out so hope some of you find this useful!
The code to pay attention to, in particular, are these lines:
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.
