I’ve got an older site with a good amount of link value I want to add some links to for some newer sites.
Problem is, the site is on 4 year old tech, and hasn’t been updated in 3 years.
Dev is long gone. If I try run a build, there’s a 90% I’ll break it completely.
I’ve since rebuilt the tech, but can’t move the old site over because…. bloat.
Running Cloudflare, I quickly looked into options and might have found a solution!
Injecting HTML with the Add HTML Cloudflare App
This was the initial solution I found, and I was super excited. Took 2 minutes, and I had a link on the old site!
However, the darn thing was client-side.
If that suits you though, this is how you can inject HTML with the ‘Add HTML‘ Cloudflare app.
1. Load up a Cloudflare website, and click on ‘Apps’ in the sidebar menu
2. Search for ‘add html’ and click the app
3. Click ‘preview on your site’ to load a preview
4. Select ‘pick a location’ and a little selection editor will load. If you want to inject into the head, you can just enter head.
5. Click on your website preview where you’d like to inject the code. I’m selecting the first post in the list.
6. Select from the dropdown where specifically you’d like the code inject. I want to inject the code before this first post, so I am going to select the before option.
7. (OPTIONAL) Select the location you’d like to use this, if not the homepage. Manually add the URL, then reload the list. You might need to do this a few times until it shows, but eventually you can then find the URL and press the little tick on the left.
8. Enter the HTML code you’d like injected, and it will display in the preview on the right.
9. Click install and boom, you’ve got some HTML magically injected.
As mentioned before though, it’s unfortunately client-side code, and won’t load with JS disabled or show anything in the HTML source of the page :(
Injecting HTML code with Cloudflare Workers
This took me a bit longer than it should have to work out, because my coding skills are lacking a bit.
However, from the limited examples of direct use of this, I managed to piece together what I needed.
A Cloudflare worker basically is just a little script, that runs on Cloudflare between your server and your end-user. Cloudflare grabs the page from the server, executes your script, then sends it off to the user. Super powerful, when you know how it works.
Hopefully, this simple breakdown of actually using a worker to inject HTML can help you out too!
1. Go to workers in the Cloudflare dashboard, and click ‘create a service’
2. Insert a useful name, click ‘HTTP Handler’ and click ‘create service’
3. Click on ‘quick edit’ in the top right corner
4. Navigate to the page you’d like to edit, and then paste the following code;
class ElementHandler {
element(element) {
element.append(`*HTML TO INJECT*`, {html: true});
console.log(“injected”);
}
}
async function handleRequest(req) {
const res = await fetch(req)
return new HTMLRewriter().on(“*CSS SELECTOR*”, new ElementHandler()).transform(res)
return res;
}addEventListener(“fetch”, (event) => {
event.respondWith(
handleRequest(event.request).catch(
(err) => new Response(err.stack, { status: 500 })
)
);
});
* You might need to edit the quotes due to WordPress formatting. Sorry!
5. Edit the *HTML TO INJECT* variable with what you’d like to inject. This could be plain text, or any full HTML.
6. Find your selector, and at modify the *CSS SELECTOR* variable. To get your selector, right click anywhere on your page, and click ‘inspect element’. Then right-click the element, copy, then click ‘selector’. You just paste this into the *CSS SELECTOR* box and you’re good to go.
7. The preview should now update to inject your HTML into the spot specified. There could be some issues with this, but provided you’ve follow the steps it should put it exactly where you specified. This is a bit newer to me, so comment with any issues and I can try help out!
8. Click ‘save and deploy’ to get the worker saved
9. Go back to the cloudflare website you’d like this added to, and navigate to workers again, then click on ‘add route’.
10. In the modal that pops up, edit the location you’d like the worker run at, along with select the worker, and then just select production, and click save. I only want this on the homepage, so I’ll modify the screenshot to remove the wildcards (*).
11. The route should now be loaded in the account, with the worker selected.
12. Go test the site! It should be live on the pages you selected, and it should load server-side!
You can confirm it’s server-side by viewing the page source, and then just searching for the code you added.
Perfect. Just what I wanted!
Just make sure you’re putting the worker in the right spot, if its not a unique piece of code you’re adding.
If a div is available across the site, and you set your path in the route to be the whole site, then that piece of code will show up everywhere.
Great if that’s what you want, not so great if its not what you want!
How does this magical HTML insertion with Cloudflare workers work?
This all uses the Cloudflare HTMLRewriter class, with a heap of documentation here.
There’s essentially an audible woosh as this all flys over my head.
The options for the HTMLRewriter class
Whilst I don’t understand most of this, yet, I can tell you the following important options.
Inside the code you have;
element.append(`*HTML TO INJECT*`, {html: true});
Instead of ‘append’, you have a heap of different other options here that you can use.
removeAttribute(name) – Removes the attribute.
before(content, contentOptions) – Inserts content before the element.
after(content, contentOptions) – Inserts content right after the element.
prepend(content, contentOptions) – Inserts content right after the start tag of the element.
append(content, contentOptions) – Inserts content right before the end tag of the element.
replace(content, contentOptions) – Removes the element and inserts content in place of it.
setInnerContent(content, contentOptions) – Replaces content of the element.
remove() – Removes the element with all its content.
So just tweak this to how you want to use it.
Cheers Cloudflare!
Adding Links with Cloudflare
Using the same code, we drop a link wherever you want it!
For this code;
element.append(`*HTML TO INJECT*`, {html: true});
You would want to modify it to be something like;
element.append(`<a href=”https://www.sammyseo.com/”>Best SEO Blog Ever</a>`, {html: true});
And then just find the best location selector you can that will suit. ‘before’, ‘after’, ‘prepend’ or ‘append’ would probably be your best options to get the link inserted.
Great way to insert HTML into somewhere you can’t get access to!
Would love to hear if you use it, and if so, how!
