I have a situation where a client is asking that a block of code they provided appear before ANY calls for scripts or links in the document head. It is for a company-wide Cookies Consent pop-up and, apparently, it is critical that it is the first script in the DOM. I have placed the code first in the Custom Code tab, but Webflow automatically places their call for the link to the site CSS and for Google’s webfont.js above that code. I realize that if we were self-hosting I could export the site code, adjust the head code manually, and publish the corrected files. Problem solved. However, we host the site through Webflow, we have collaborators that actively work in the site, etc., so self-hosting is not an option.
Given the code, I would think the easiest solution would be to force any links or scripts that appear above the code to the bottom of the head. Is that something that is possible, perhaps using javascript or jquery?
I hesitate to share this out of compassion and respect for your sanity.
But, if you enjoy rabbit holes and the whole Alice in Wonderland experience, you might like the possibilities afforded by this link.
The rabbit hole is deep. I couldn’t find the bottom. An emergency evac plan is recommended.
My theory was you could build this to achieve your SCRIPT at top result…
HTTP-GET retrieves the HTML doc
Browser begins interpretation from the top
It hits your blocking SCRIPT element hopefully before it’s decided to follow any external links to CSS or scripts
Your SCRIPT takes the full HTML of the page, injects your desired cookie SCRIPT chunk right after HEAD. It also removes your bootstrap SCRIPT so it won’t run recurringly.
Your SCRIPT then hard-replaces the full HTML content of the page.
The browser, hopefully, aborts its current HTML processing and starts over in the processing, which now has your cookie SCRIPT first. Otherwise the page is identical.
You can see why I had to try. This is sort of the ultimate geekery, in that if it worked, you could literally fix anything you wanted Webflow to generate differently, while still using Webflow’s hosting.
Here’s what I found in my journey… all of the script is in the homepage HEAD code area.
I didn’t succeed in getting it to work the way I wanted, but it was a good mental workout. Someone else might have the time to figure out how to complete it properly.
Also, I just want to take a moment to appreciate how hard markdown is working to figure out what this thing is. I’ve turned off its color coding here because it just made the code way more confusing, and it really doesn’t need assistance there.
<!-- DISCARD -->
<script>
// Prepare our script for injection
const script = `<!-- <script>
// Your special cookie script goes here
console.log('injected script running.');
alert("Hello World");
</script> -->`;
// Get the whole current page HTML
var html = document.documentElement.outerHTML;
// Inject the script
html = html.replace("<head>", `<head>${script}`);
// Remove this bootstrap script, so it won't re-run on the reformed page
const regex = /(<!-- DISCARD --[\s\S]*<!-- \/DISCARD -->)/gm;
html = html.replace(
regex,
'<!-- BOOTSTRAP IS GONE, BABY -->');
// Perform ancient shamanistic wizardry here
// https://stackoverflow.com/questions/4292603/replacing-entire-page-including-head-using-javascript/4292640#4292640
document.open("text/html", "replace");
document.write(html);
document.close();
</script>
<!-- /DISCARD -->
Thank you for sharing. Unfortunately, the client is very insistent and will not accept anything less than what they are asking for. Apparently, they have their reasons, and I’m just some guy down on the totem pole. ¯_(ツ)_/¯
Oh wow. The rabbit hole is indeed cavernous. I think the solution for my purposes is to self-host the site. However, the site has a CMS component that presents its own set of issues. It seems like a lot of work for such a small thing.
I was afraid of that. Just explain to them that it requires leaving the Webflow hosting environment entirely, and therefore building custom back-end integration to a new CMS. Customers don’t understand tech, but they do understand $$$. Usually.
A few years ago, I was an MC at a large bank, leading a number of tech projects. One one, the executive stakeholders requested a “small feature change,” and I had to explain that this small change would turn their $80k project into a $10 mil project. They wanted it anyway. It ended up costing $8.5 mil. Oh well.
Hey Michael, now I’m seeing you in almost every post, haha!
I was looking for a solution to run scripts after DOMLoad (which is quite easy, but I didn’t learn JavaScript properly yet, so know just snippets and stuff), but found this post and your story — which I totally agree, communication is the key.
Do you mind sharing what was that “small feature change”? Quite curious what it was that made the cost sky-rocket so much!