> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Domains

> Host demos on your own domain such as `demo.acme.com`

export const MediaCard = ({title = '', url, type = 'demo'}) => {
  const attributes = type === 'demo' ? {
    'data-navattic-open': url,
    'data-navattic-title': title
  } : {
    'data-video': url
  };
  return <div {...attributes} className="hidden w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 shadow-sm md:inline-block dark:border-gray-700">
  <div className="flex items-center gap-3 bg-white px-3 py-2 dark:bg-gray-800">
    <div className={`flex h-7 w-7 items-center justify-center rounded-md ${type === 'video' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-orange-100 dark:bg-orange-900'}`} style={{
    backgroundColor: type === 'video' ? 'var(--video-bg)' : 'var(--demo-bg)'
  }}>
      <Icon icon={type === 'video' ? 'circle-play' : 'square-mouse-pointer'} color={type === 'video' ? 'var(--video-icon)' : 'var(--demo-icon)'} />
    </div>
    <div>
      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
        {type === 'video' ? 'Watch video' : 'Try a demo'}
      </div>
      <div className="text-sm text-gray-500 dark:text-gray-400">{title}</div>
    </div>
  </div>
  <style jsx>{`
    :root {
      --video-bg: #dbeafe;
      --video-icon: #2563eb;
      --demo-bg: #ffedd5;
      --demo-icon: #ea580c;
    }
    :global(.dark) {
      --video-bg: #1e3a8a;
      --video-icon: #60a5fa;
      --demo-bg: #7c2d12;
      --demo-icon: #fb923c;
    }
  `}</style>
</div>;
};

<Info>Enabled in workspaces on the Growth plan and above.</Info>

Setting up a <Icon icon="globe" /> **Custom Domain** will allow your Navattic demos to be served from a domain of your choice, like `demo.acme.com`.

## How to add a Custom Domain

Follow these steps to add a custom domain to your demos:

<Steps>
  <Step title="Add Your Domain">
    Go into your account settings page, and click on the Domains tab > + Add Domain > type in your preferred domain. We recommend the format `demo.company.com`.
  </Step>

  <Step title="Add a CNAME record to your DNS provider.">
    If you have access to your DNS provider (like Domain.com or GoDaddy), add the CNAME record below. If you do not have access, forward this to a member of your engineering team and they can do it for you.

    > CNAME demo.acme.com capture.navattic.com

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/custom-domains-1.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=373ac9d1cbec53d6d5ba62f56d14173d" alt="" width="1806" height="546" data-path="images/custom-domains-1.png" />
  </Step>

  <Step title="Vercel Only - Additional Steps">
    If you use Vercel as your hosting provider, you may see the below message. In order to finish setting up your domain, verify ownership of the subdomain by setting the given record on your DNS provider.

    For example, if your Custom Domain is [demo.navattic-example.com](http://demo.navattic-example.com/), complete verification by adding a TXT record for `_vercel.navattic-example.com` where the value is provided in-app.

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/custom-domains-2.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=5cef749382b72716b594540071438f2f" alt="" width="1832" height="546" data-path="images/custom-domains-2.png" />

    Once ownership is verified, you will see a similar message to the image below.

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/custom-domains-3.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=889c5a834ab4891346b46fdf8637f959" alt="" width="1810" height="262" data-path="images/custom-domains-3.png" />
  </Step>

  <Step title="View Your Demos">
    Your demos will now be served under `demo.acme.com`! This applies to share links, direct demo links, and iframe embeds.
  </Step>
</Steps>

<MediaCard url="https://training.navattic.com/custom_domain" type="demo" title="Custom Domains" />

## Choose which demos a domain serves

Each demo is assigned to the custom domains that are allowed to serve it. A demo only loads on a domain it is assigned to, so a workspace with several domains can keep each brand on its own domain. When a visitor opens a demo on a domain the demo is not assigned to, the demo does not load and the visitor sees a not-found page.

When you add a new custom domain, every demo that already exists in your workspace is assigned to it. Your Navattic workspace subdomain keeps serving every demo in the workspace, whatever the assignments are.

<Warning>
  A demo created after you add a custom domain starts with no domain assigned. Assign it before you share it, or its links will use your workspace subdomain.
</Warning>

To change the domains for one demo:

<Steps>
  <Step title="Open the demo's settings">
    In the demo builder, open the demo menu and select **Project settings**. You can also open a demo's settings from your demos list.
  </Step>

  <Step title="Assign the domains that should serve the demo">
    Under **Domains**, turn on the switch next to each domain that should serve the demo. Turn a switch off to stop that domain serving it.
  </Step>

  <Step title="Choose the domain new links use">
    On an assigned domain, open the options menu and select **Set primary**. Only a verified domain can be the primary. Select **Unset primary** to go back to your workspace default domain.
  </Step>
</Steps>

New links for a demo use, in this order:

1. The demo's primary domain, when it is set and verified.
2. Your workspace default domain, when the demo is assigned to that domain and it is verified.
3. Your workspace subdomain, when neither applies.

## FAQs

<AccordionGroup>
  <Accordion title="Will adding a custom domain affect existing demo links?">
    Adding a custom domain will not impact your existing demo links. Here's how it works:

    * **Existing links**: Any demo share links created before adding the custom domain will continue to work exactly as they are. No need to re-share or update them.
    * **New links for existing demos**: If you generate new share links for demos that were created before the custom domain was added, those links will now use the custom domain.
    * **New demos**: Assign the demo to a custom domain in its settings. Until you do, its new links use your workspace subdomain.
  </Accordion>

  <Accordion title="What happens if I unassign my default domain from a demo?">
    New links for that demo use your workspace subdomain instead, and the demo stops loading on the default domain. Links you shared earlier that point at the default domain stop working, so unassign a domain only when you no longer want it serving that demo.
  </Accordion>
</AccordionGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.