How to add /?ref= to my external links

Hi All,

Need some quick advice on how to add /?ref= to my external links.
I’ve seen other websites doing this and guess it is called Ref forwarding, a technique for automatically passing a ref through a component to one of its children.

Thanks in advance.


Hey Carlos, Webflow has jQuery installed as part of every hosted site, so tasks like this become easier. However your particular requirements have some challenges you’ll need to do some R&D to address.

You’ve basically got a two-part problem-

PART 1 - Find all of the external links in your page

Usually an external link can be identified by the fact that it is a fully-qualified URL, beginning with a scheme like http: or https:. Unfortunately, “local” links can also work that way, If your website is MYSITE.COM, nothing prevents you from having a link to https://mysite.com, so you need to avoid that or check for and prevent those. IIRC, in Webflow, there are certain places where the use of fully-qualified URLs is unavoidable, even to local pages.

Here’s how a basic jQuery select would work. This would select all A elements with an href that starts with http: or https:.

$("a[href^='http']") // external

Note that even if you pick up some local URLs, they’re probably no harm. It will look a bit weird if the user is watching the URL bar, but Webflow will ignore it, and you can simply ignore those ref stats in your analytics.

PART 2 - Change them all to add your querystring param

This is somewhat trickier, because there are a lot of different situations to confront, like;

  • Does the URL already have a querystring or not?
  • Does the current querystring already have a ref param, and if so what should the behavior be?
  • Is there a #fragment, such as a hash or a text fragment following the querystring?

There are a ton of scripts, libraries, etc. on Stack Overflow, you’d need to figure out what behavior you want, and which browsers you want to support.

However personally I’d start here- there is a jQuery library that you can add into your project specifically for these types of manipulations-

https://plugins.jquery.com/query-object/