Webflow staging subdomain

Updated

Learn how to use your Webflow staging subdomain.

There are 2 types of domains you can publish your whole site to: your Webflow staging subdomain (e.g., yoursite.webflow.io) and custom domains (e.g., yourdomain.com). The Webflow staging subdomain is useful to test custom code and get approval on your site’s design before pushing your site live to your custom domain.

If you want to prevent your webflow.io site from appearing in search engine results, you can disable search engine indexing of the Webflow staging subdomain.

Note

The Webflow staging subdomain is different from your branch staging subdomain.

How to edit your staging subdomain

You can edit your subdomain under Site settings > Publishing tab > Staging.

Note

If you change your site’s subdomain, both your staging subdomain (e.g., yoursite.webflow.io) and your site’s read-only link will be replaced instantly. Any read-only links you’ve previously shared will no longer function.

How to publish to your staging subdomain

To publish your site to the staging subdomain without publishing to your custom domain: 

  1. Open your site in the Designer or go to Site settings
  2. Click Publish 
  3. Check the Webflow staging subdomain (e.g., yoursite.webflow.io)
  4. Uncheck your custom domain
  5. Click Publish to select domains

Important

When you publish your site, you can choose to publish to your staging subdomain and/or any custom domain(s). When you publish from the Editor, your site will publish to both your webflow.io staging subdomain and any custom domain(s) you’ve added to your site. To publish changes only to your staging subdomain, publish from in your site or from Site settings.

How staging subdomain cookies work

On March 1, 2024, the Webflow staging subdomain was merged into the Public Suffix List (PSL) to increase the security of websites published to the staging subdomain. The PSL helps browsers limit cookies to the site subdomain (e.g., yoursite.webflow.io), which reduces cookie interference between different sites.

Because major browsers (e.g., Chrome, Firefox, etc.) implement updates to the PSL according to their individual release cycles, these changes won’t take effect at the same time for all site visitors. As browsers implement the updated PSL, the changes won’t affect site visitors until they update their browsers to the latest version.

This change resets analytics cookies on URLs ending with webflow.io. If your site is only published to your Webflow staging subdomain — and not also published to a custom domain — your site’s analytics tools (e.g., Google Analytics, Meta Pixel, etc.) won’t recognize any visitors that return to your site as “returning visitors” on their first visit following their browser’s implementation of the updated PSL.

If you want to preserve your site’s cookies on your staging subdomain, you can add the following script to your site:

// get all cookie names
function getCookieNames() {
  return document.cookie.split(';').map(c => c.trim().split('=')[0]);
}

// cookies to update
const COOKIES_TO_UPDATE = [
  // these are examples. You will likely want to run `getCookieNames()` 
  // to see what you are using on your site to determine which cookies 
  // to include in this list
  '_ga',
  '_fbp',
];

(function() {
  const psl = '_psl';
  const pslValue = getCookie(psl);
  // we set pslValue to `1` after migrating, so this guard ensures we
  // don't touch an already migrated cookie
  if (pslValue == '') {
    return;
  }

  function setCookie(name, value, days) {
    const d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = 'expires=' + d.toUTCString();

    document.cookie = name + '=' + value + ';' + expires + ';path=/';
  }


  function getCookie(cname) {
    const decodedCookie = decodeURIComponent(document.cookie);
    const name = cname + '=';
    const ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return '';
  }

  function resetCookieToSubdomain(name) {
    const value = getCookie(name);
    if (value != '') {
      setCookie(name, value, 365);
    }
  }

  // Run the cookie rescoping migration
  COOKIES_TO_UPDATE.forEach(resetCookieToSubdomain);
  setCookie(psl, '1');
})();
 

How to use a custom staging domain

Webflow Enterprise customers and Enterprise partners can add custom staging domains to their sites. This lets you have more granular control over your staging domain and provides consistency for staging across your team’s tech stack. Note that you can only have one custom staging domain per site. Once you add a custom staging domain, you can no longer use your webflow.io staging subdomain.

To use a custom staging domain on a site:

  1. Go to Site settings > Publishing tab > Staging
  2. Choose Use a custom domain
  3. Connect a custom domain you’ve already added to your site or connect a new custom domain. Note that you’ll have to remove any in-use custom domains from the Production section before using it as a custom staging domain

We recommend you use the www version of your custom staging domain. Using the root domain may not be supported by your DNS provider, and requires manual setup.

You can also publish to your staging domain when using publishing workflows or on the Dashboard. Note that if your team uses a custom staging domain, that is the default staging domain you’ll publish to from the publishing workflow.

How to enable and disable private staging

Webflow Enterprise customers and Enterprise partners have the ability to enable private staging on their sites. Private staging gives you and your team greater control over who can see site updates before they’re launched publicly.

If a site has private staging enabled, it will require authentication to access the site on its Webflow staging subdomain (yoursite.webflow.io), custom staging domain, and staged branches. This ensures that only logged-in Workspace members and guests with access to the site can view the site on its staging domain(s). Additionally, if your team has single sign-on (SSO) set up for their Workspace, it will also be required to access private staging.

Note

Enabling or disabling private staging will only take effect after you publish your site.

To enable private staging on a site:

  1. Go to Site settings > Publishing tab > Staging
  2. Toggle Make staging private to on 
  3. Publish your site

To disable private staging on a site:

  1. Go to Site settings > Publishing tab > Staging
  2. Toggle Make staging private to off
  3. Publish your site

Note

You can’t test site search on your staging subdomain when private staging is enabled. To test site search on your staging subdomain, disable private staging.