Hello everybody,
Apparently people at Webflow are being very stubborn, and they don’t want to implement relative links in the CMS.
I’m asking for help if someone managed to find any workaround this bug.
I read about the possibility to convert a regular plain text in a relative link using some custom code, but I cannot figure how to make it work.
Any help would be really appreciated 
I’m 100% sure stubbornness has nothing to do with any of the decisions taken by Webflow
When you place an Embed component in a Collection Page Template or inside of a Collection List, you can add fields as variables. You can access the variables in the top right corner of the Embed dialog.
Oh thanks Vincent, I didn’t think about it.
So basically I have to replace the link buttons or link boxes with embedded components.
Writing within them a html relative link, and overwriting it with a field text from the CMS.
Am I right?
Well, I understand they probably have priorities, but they allow you relative linking in the designer interface, but don’t inside the CMS. It does’t make sense to me.
Btw, do you know how to get the homepage by relative link? I tried using /home#element-id but it doesn’t work.
Thanks
I actually just found out that you can link relatively to the homepage just with “/”
So to autoscroll to a specific element id from another page: “/#element-id”
I fixed this with JS, maybe it will be helpful to someone else. I added an embed inside the link block and wrote in a div with class=“relative-link”>
<script>
let caseStudyLinks = document.querySelectorAll('.relative-link');
caseStudyLinks.forEach(link => {
link.closest('.link-block').href = link.innerText;
});
</script>
Same problem here, and since Webflow doesn’t seem to want to do that here’s a quick workaround using a global javascript without the use of embeds.
Add on the link collection item an attribute : replace-host and value true
In the project settings, go to “Custom Code” and add the following code :
<script>
// Replace production domain names with current staging
// domain in all the links with the "replace-host" attribute.
$(document).ready(function() {
$('a[replace-host="true"]').each(function(){
var old_url = $(this).attr('href');
var new_url = new URL(old_url);
new_url.hostname = document.location.hostname;
$(this).attr('href', new_url.href)
});
});
</script>
This way, in your CMS data you can always use the real production absolute links, but you will be able to navigate normally the website in staging under any other domain name. Keep in mind that this will not affect your SEO nor navigation in production domain since it will be replaced with itself. (you can remove the code when in production too.)
Hope it will help.
Is this why I’m getting https://www.bookkeepersa.com/www.bookkeepersa.com when I run a report in SemRush?
No, that’s a problem with your site Canonical Link settings.
Change that to https://www.bookkeepersa.com, save and publish.
You need that https:// protocol at the front, and to make sure there is no trailing / at the end.
@memetican i’m trying to add links to CMS fields, in the CMS field the link is formatted with https:// - But on CMS page the link looks like this: www.mysite.com/https://www.othersite.com
How to solve?
Hey Josef, that sounds probably unrelated to this thread, and we can’t see your site. Post that as a new topic, with your readonly and published site links, and someone in the community can help if they can.
This solution sounds perfect for my use case. However I can’t seem to get it working either with Nav Link or Link Block
Do you mind taking a look and letting me know where I have gone wrong?
I solved my issue. Turns out I forgot to click the “save” button when I added the script to the global custom code setting.