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

# Welcome to Navattic

> Build interactive demos for marketing, growth, and sales.

<Frame>
  <img className="overflow-hidden rounded-xl border" src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/demos-page.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=1f390b71356befa200f24337ac68a2e4" alt="Launchpad" width="1760" height="978" data-path="images/demos-page.png" />
</Frame>

## Welcome to Navattic

**Navattic** makes it easy to build and share interactive product demos across your team. With Navattic, teams can organize, access, and distribute demos in a consistent, scalable way.

This documentation will guide you through setting up your workspace—from creating demos to tracking engagement—so you can start using interactive demos throughout your workflows.

## Building demos

Creating clear, engaging demos is key to making the most of Navattic. In this section, you’ll learn how to build demos tailored to a variety of use cases—whether you're personalizing for an individual, showcasing a key feature, or creating something entirely custom.

We’ll also walk through how to build your first gold-standard demo that matches your company’s brand and style.

<CardGroup cols={2}>
  <Card title="Build your first demo" icon="layout-grid" href="/build/demo">
    Create a demo for your first use case in minutes.
  </Card>

  <Card title="Creating flows" icon="route" href="/build/flows">
    Break down your demo into smaller stories.
  </Card>

  <Card title="Checklist demos" icon="list-checks" href="/build/checklist">
    Allow visitors to choose their own adventure with a checklist.
  </Card>

  <Card title="Customize your theme" icon="swatch-book" href="/build/themes">
    Build a theme that reflects your brand and style.
  </Card>

  <Card title="Supporting screen sizes" icon="monitor-smartphone" href="/build/responsive">
    Learn how to make your demos look great on every screen size.
  </Card>
</CardGroup>

## Advanced demos

Take your demos a step further with advanced features that add flexibility and depth. In this section, you'll learn how to personalize content, support multiple languages, showcase mobile apps, and even use demos offline or to track feature interest.

<CardGroup cols={2}>
  <Card title="Personalized demos" icon="user-pen" href="/demos/personalized">
    Make demos personalized by adding user and account properties.
  </Card>

  <Card title="Multilingual demos" icon="languages" href="/demos/multilingual">
    Support multiple languages in your demos.
  </Card>

  <Card title="Interest demos" icon="square-check-big" href="/demos/interest">
    Unlock a powerful insight - what features prospects are interested in seeing.
  </Card>

  <Card title="Offline demos" icon={<img src="/images/icons/offline.svg" />} href="/demos/offline">
    Use your demos offline at tradeshows and conferences.
  </Card>

  <Card title="Sandbox demos" icon={<img src="/images/icons/sandbox.svg" />} href="/demos/sandbox">
    Learn how to quickly build a lightweight sandbox demo.
  </Card>
</CardGroup>

## Sharing demos

Once your demo is ready, it’s time to get it in front of your audience. This section covers best practices for sharing—whether you’re embedding it on your website or sending it out via trackable share links.

<CardGroup cols={2}>
  <Card title="Embed your demo" icon="panels-top-left" href="/share/embed">
    Embed your demo on your marketing website or product.
  </Card>
</CardGroup>

## Tracking

Tracking helps you understand how demos are being used and who’s engaging with them. In this section, you’ll learn how to install tracking scripts, identify visitors, and connect demo activity to your other analytics tools.

<CardGroup cols={2}>
  <Card title="Navattic JS" icon="square-code" href="/tracking/navattic-js/index">
    Install and configure the Navattic JS tracking script.
  </Card>

  <Card title="Identifying visitors" icon="user-round-search" href="/tracking/identify/visitors">
    Identify who is visiting your demos.
  </Card>

  <Card title="Tracking scripts" icon="activity" href="/tracking/tracking-scripts/index">
    Add third-party tracking scripts to your demos.
  </Card>
</CardGroup>

## Integrations

Connect Navattic with your existing tools to streamline demo sharing and surface insights. This section covers how to embed demos in outbound campaigns, sync engagement data with your CRM, and use integrations to understand visitor behavior.

<CardGroup cols={2}>
  <Card title="Playbooks" icon="zap" href="/integrations/playbooks">
    Send demos in outbound email campaigns to book more meetings.
  </Card>

  <Card title="Integrations" icon="sliders-vertical" href="/integrations">
    Learn about what the prospect is interested in before the first call.
  </Card>
</CardGroup>

## Workspace

Your shared workspace is for building, organizing, and managing demos as a team. Here, you'll learn how to invite members, set shared defaults, structure your workspace, and collaborate efficiently.

<CardGroup cols={2}>
  <Card title="Inviting members" icon="globe" href="/workspace/inviting-members">
    Invite members to your workspace and manage their access.
  </Card>

  <Card title="Demo defaults" icon="wrench" href="/workspace/demo-defaults">
    Standardize defaults for demos across your workspace.
  </Card>

  <Card title="Workspace organization" icon="grid-3x3" href="/workspace/workspace-organization">
    Organize your workspace to scale to meet your needs.
  </Card>

  <Card title="Collaboration" icon="message-circle" href="/workspace/collaboration">
    Leave comments on demos for your team to review.
  </Card>
</CardGroup>

## Security Features

Keep your workspace secure and compliant with enterprise-grade controls. This section covers how to manage access with SSO and directory sync, host demos on custom domains, and monitor activity with audit logs.

<CardGroup columns={2}>
  <Card href="/workspace/sso" icon="shield" title="SSO">
    Require all workspace members to authenticate using your organization's identity provider, such
    as Okta.
  </Card>

  <Card href="/workspace/directory-sync" icon="database" title="Directory Sync">
    Automatically provision users and configure their roles using your organization's identity
    provider, such as Okta.
  </Card>

  <Card href="/workspace/custom-domains" icon="globe" title="Custom Domains">
    Custom domains allow you to host demos on your own domain such as `demo.acme.com`.
  </Card>

  <Card href="/workspace/custom-domains" icon="list" title="Audit Logs">
    View an event stream of notable actions that members take in your workspace.
  </Card>
</CardGroup>
