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

If you’re a Webflow Enterprise customer or Enterprise partner, you can add a custom staging domain to your site for more granular control and consistency for staging across your team’s tech stack.

For more information, visit our guide to custom staging domains.

How to enable and disable private staging

If you’re a Webflow Enterprise customer or Enterprise partner, you can enable private staging on your sites to give you and your team greater control over who can view site updates before they’re launched publicly.

To learn more, visit our guide to private staging.