> ## 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.

# Navattic Basics

> Interactive demos and video walkthroughs of Navattic basics.

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>;
};

Looking for a quick, engaging overview of Navattic basics? Learn the basics of the Navattic platform through a series of <Icon icon="circle-play" /> **videos** and <Icon icon="square-mouse-pointer" /> **interactive demos**.

## Creating and sharing demos

<CardGroup>
  <Card icon="circle-play" horizontal title="Build a demo using Copilot" href="https://www.loom.com/share/f488cf7ad0a144f984c3a7cf12afcd3d" />

  <Card icon="square-mouse-pointer" horizontal title="Navattic basics demo" href="https://navattic-docs.navattic.com/w5k02oe" />

  <Card icon="circle-play" horizontal title="Building a flow" href="https://www.loom.com/share/8bc441b4963a431e89a94eb845fa5c29?sid=15eee611-903a-4f27-9b66-1781f65dea65" />

  <Card icon="circle-play" horizontal title="Mobile options" href="https://www.loom.com/share/c3e6f1c647c74434847c3e1e07689192?sid=03e7961f-8b6f-4e9a-b27b-c9445a850dca" />

  <Card icon="square-mouse-pointer" horizontal title="Share your Demo" href="https://navattic-docs.navattic.com/d210ls5" />

  <Card icon="circle-play" horizontal title="Create a checklist" href="https://www.loom.com/share/c370d6ec6c024b4888dad0d2b3f8c6e4?sid=d0e50567-acf7-4389-b077-41e1750b0a5d" />
</CardGroup>

## Taking and editing Captures

<CardGroup>
  <Card icon="circle-play" horizontal title="Take Captures" href="https://www.loom.com/share/dac1ae7fb3784bdeadb56f8943250227" />

  <Card icon="square-mouse-pointer" horizontal title="Capture Editing" href="https://navattic-docs.navattic.com/g910n7e" />
</CardGroup>

## Customize your demo

<CardGroup>
  <Card icon="circle-play" horizontal title="Create a theme" href="https://www.loom.com/share/4567c5556b0541d0b2fbc2d04ae19e53?sid=7991caaf-9679-4e6e-91dd-7559c72d887c" />

  <Card icon="square-mouse-pointer" horizontal title="Add an Escape View" href="https://navattic-docs.navattic.com/cov09e1" />

  <Card icon="square-mouse-pointer" horizontal title="Buttons, Beacons, and Triggers" href="https://navattic-docs.navattic.com/un20j35" />
</CardGroup>

## Analytics

<CardGroup>
  <Card icon="circle-play" horizontal title="Understanding demo analytics" href="https://www.loom.com/share/16f7e9aa026c48fba8e13ae7d01af7bc?sid=536f8981-7d63-4031-9e49-edf2557baf1f" />

  <Card icon="square-mouse-pointer" horizontal title="Demo activity" href="https://navattic-docs.navattic.com/yl3w0w3k" />

  <Card icon="square-mouse-pointer" horizontal title="Demo visitors" href="https://navattic-docs.navattic.com/8s208oo" />

  <Card icon="square-mouse-pointer" horizontal title="Account based engagement" href="https://training.navattic.com/o9fg05mt" />
</CardGroup>

## How to build advanced demos

<CardGroup>
  <Card icon="square-mouse-pointer" horizontal title="Build a branching demo" href="https://navattic-docs.navattic.com/mb1d0erg" />
</CardGroup>

## Workspace

<CardGroup>
  <Card icon="circle-play" title="Invite members" horizontal href="https://navattic-docs.navattic.com/j920b5g" />
</CardGroup>