Webflow staging subdomain

Learn how to use your Webflow staging subdomain.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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. Learn more about branch staging.

In this lesson, you’ll learn:

  1. How to edit your staging subdomain
  2. How to publish to your staging subdomain
  3. How staging subdomain cookies work
  4. How to use a custom staging domain
  5. How to enable and disable private staging

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 in edit mode, you can choose to publish to your staging subdomain and/or and any custom domain(s) you’ve added to your site. 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 your site from the Designer or 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 Designer section of 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 on “Make staging private”
  3. Publish your site

To disable private staging on a site:

  1. Go to Site settings > Publishing tab > Staging
  2. Toggle off “Make staging private”
  3. Publish your site
Note: You won't be able to test site search on your staging subdomain when private staging is enabled. To test site search on your staging subdomain, disable private staging.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top