Configuring links to work with staging domains

Hi everyone,

We’ve just moved to Webflow and could do with a little bit of help resolving an issue with setting up our staging env.

We are now using Webflow as our landing page, on our subdomain www. (e.g. www.example.com and we have our react platform on our subdomain app. (e.g. app.example.com).

The landing page contains a number of links that point to the platform, such as a login button on www.example.com, which takes the user to app.example.com/login.

This however causes an issue when using a different domain for our staging environment, (e.g. www.staging-example.com). When the user clicks the same login button on the staging version of the site, they are still taken to app.example.com/login, when we want them to be taken to app.staging-example.com/login.

I’ve attached a couple of screenshots to show how we are setting the links for our buttons.

Before we switched to Webflow, we were using environment variables to solve this, but I don’t believe that can be done with Webflow.

I’ve scoured the docs for a way to solve this and so far not found anything… is there a way to solve this?

Thanks in advance,

Mike

1 Like

Hey mike4584,

Did you find a solution for this?

Hey @adiga,

We did found a solution, though I’m afraid it’s more of a hacky workaround than something officially supported by webflow.

We solved it using custom code as follows.

First set any parameters for the domain like this:

<script>
  var PLATFORM_URL = "";

  if(location.hostname == "www.example.com"){
    PLATFORM_URL = "https://app.example.com/";
  }
  else if(location.hostname == "www.staging-example.com"){
    PLATFORM_URL = "https://app.staging-examples.com/";
  }
</script> 

Then, assign an onclick event to the button or link as follows. I believe that you might also have to remove the link from the button in the designer.

<script>
const buttonRegister = document.getElementById('button-header-register');
 
buttonRegister.addEventListener('click', function () {
  window.location = PLATFORM_URL + "register";
});
</script>

Hope that helps and fingers crossed webflow address this properly someday!

Hey this looks exactly like what I’m trying to do although I have a couple of questions, 'cause I can’t seem to get it to work:

  • Do I need to add a specific class to my button?
  • Can both scripts go in the “head” code or does one of 'em need to be in “body” code?
  • What does the + “register” part do?

Edit: worked on a solution with someone, if anyone needs help with this reach out to me.