> ## 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 md:inline-block w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
<div className="flex items-center gap-3 bg-white dark:bg-gray-800 px-3 py-2">
<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" />

### FAQs

<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**: All share links for newly created demos will use the custom domain exclusively.
</Accordion>