The entire Sygnal Webflow Util (WFU) code base is hosted publicly on Github, where you can access it.

However, you don't need to download it to add WFU to your website.

In fact, since Webflow doesn't allow you to upload scripts into their hosting environment, you'll need to host the scripts externally anyway. We use the jsDelivr CDN for this purpose, because it allows direct access to our current sources on Github, and it's 100% free.

Getting the right URLs from jsDelivr

Using the jsDelivr CDN

It couldn't be much simpler. However it helps to know a bit about how the URLs are formed.

For our project, jsDelivr URLs look like this-

https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@latest/dist/css/webflow-util.css

You'll notice a few things in there..

• /gh/ - means Github, because jsDelvr offers access to other SCM repositories as well
• /sygnaltech/ - our account name
• /webflow-util - the WFU respository
• @latest - indicates the version of the file you want- this is important, we'll come back to this soon
• And the rest is the path and filename to the file you want

Because you can install each part of WFU separately, we'll give you the individual URLs you need in each Feature's Install Guide.

However it's important for you to change the @latest part of the URL to the version number you're wanting to use.

Here's why you should never use @latest

While the pseudotag @latest will technically work, it will deliver the most recent version of the file checked in. Even if it's not working. Even if it's not part of a current production release. Even if there was a breaking change, and the new module is incompatible with your installation & configuration setup.

Instead, you need to replace @latest with the current production release version number, like this;

https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.0/dist/css/webflow-util.css

To determine that, visit our Github releases page. Look at the topmost release on the left side, for the appropriate version number. You won't need the "v".

If you leave @latest in the URL, it's effectively guaranteed that your website will break in a few months when we release something new and introduce a breaking change.

Bob left @latest in his URLs because he was lazy.

Bob was very embarrassed which a pissed off client called him at 3am asking why his site was spouting errors.

Don't be Bob.

Advanced options

If you want your scripts to be even more efficient, you can minify them. jsDelivr provides this capability built-in.

To activate it, prefix the ending extension of the URL with .min. For example;

• ...somefile.min.css
• ...somescript.min.js

Positioning the scripts

Decisions, decisions...

For each feature, we tell you what code to put in the HEAD scripts area, and what code to put in the BODY scripts area. In the Webflow designer, you'll find these at the bottom of your page configuration panel ( click the gear icon next to the page, like this...

When the page configuration panel opens, scroll down to the very bottom and you'll find the Custom Code section. which has a bog to paste your HEAD code in;

And your BODY code too.

However, placing your code in a page's configuration assumes that you are using that WFU Feature on that page only. If you're using that feature throughout your website, you'll want to put these codes into the site level settings instead.

You won't find those site-level settings in the Designer, they're accessed under Project Settings for your Webflow project, on the last tab.

Final notes

You can make this script-placement decision differently for each feature you use, however be careful not to duplicate script references in both areas. If you're referencing a script site-wide, you don't need to repeat that reference on a particular page.

It's already there from the site-wide configuration, so you can just leave it out.