I have written a simple beginner-style userscript for webflow.
The script imports the custom <head> you have defined in the site Code section, and applies it to the site in Design Mode.
I’ve gone an extra mile, and displayed the custom <head> in the sidebar, just for fun.
I won’t release it until I’m sure that this doesn’t breaks rules or something.
Editing and saving code does not work right now… but I’m working on it.
Benifits:
Automatically imports <head> from Dashboard.
Works on every page in the project in Design Mode.
No need to duplicate <head> code, never again.
It’s cool.
Awesome, huh?
UPDATE
Well, I’ve read the terms and apparently I’m not breaking the agreement… yay!
Here is the js file that enables this functionality: http://cl.ly/code/1Q1g0S171D1k
You will need to run it using a userscript extension for your browser.
Tampermonkey for Chrome
Greasemonkey for Firefox
Disclaimer
If you don’t understand what the script is doing… please do not use it. I can’t be held responsible if something happens to your project. Use at your own risk!
How does it work?
The script will load the custom <head> using webflow API.
It will inject that code 5 seconds after the project loads just before </body>, this gives it enough time to be ready and should work in all cases.
A new box will be added to the Styles section in the sidebar that displays the custom <head> imported.
TODO
The ability to save the custom <head> from inside Design Mode, if possible.
This highlights the need for the head and body code to be right in the designer interface, without the need to jump back and forth repeatedly. It’s something we’ve been looking at implementing natively, but it does have some issues (e.g. any change would require a refresh of the inner iframe since there’s no way to unload scripts) that we’re trying to work around.
In other words, we hope to build this in natively soon!
A suggestion, since often a script could also get in the way after it has ran, maybe a toggle option, especially for events that fire on load I may want to switch between before and after DOM states rather than refreshing the design view to do this.
This is great because I can simply include my own externally hosted scripts and style files and then edit them and simply refresh the design view to see them in action. No more having to publish just to view these changes. Thanks for this!
Hey cdes, this is pretty great but it’s not working for me. I bet its because of the update to the Webflow interface. How hard would it be to fix for the current version?
Nope, currently it’s just for head. I don’t know how to make it work with body scripts too. They can be injected but they do not interact with the dom. Maybe it’s because the DOM was generated before the scripts were applied, thus I need to find a way to tell the scripts to reread the DOM.
Mighty fine job there