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

# Self-Guided Tours

export const SelfGuidedTours = ({cards}) => {
  const MP_PURPLE = "rgb(139 92 246)";
  const BORDER_RADIUS = 14;
  const CARD_W = 296;
  const CARD_H = 319;
  const IMAGE_H = 140;
  const IMAGE_W = 276;
  const styles = {
    grid: {
      display: "grid",
      gap: 20,
      gridTemplateColumns: "repeat(auto-fit, minmax(296px, 1fr))",
      justifyContent: "center",
      marginTop: 32
    },
    card: {
      position: "relative",
      width: CARD_W,
      height: CARD_H,
      borderRadius: BORDER_RADIUS,
      overflow: "hidden",
      border: `2px solid ${MP_PURPLE}`,
      boxShadow: "0 10px 30px rgba(0,0,0,.25)",
      transition: "transform .25s ease, box-shadow .25s ease, background .3s ease, color .3s ease"
    },
    dogEar: {
      position: "absolute",
      right: 10,
      top: 10,
      width: 22,
      height: 22,
      background: "var(--sgt-dogear)",
      clipPath: "polygon(0 0, 100% 0, 100% 100%)",
      boxShadow: "0 0 0 2px rgba(0,0,0,.15) inset",
      zIndex: 5,
      pointerEvents: "none"
    },
    mediaWrap: {
      position: "absolute",
      top: 18,
      height: IMAGE_H,
      width: IMAGE_W,
      marginLeft: 16,
      marginRight: -16,
      borderTopLeftRadius: 8,
      borderBottomLeftRadius: 8,
      overflow: "hidden",
      background: "var(--sgt-media-bg)",
      zIndex: 1
    },
    mediaImg: {
      width: "100%",
      height: "100%",
      objectFit: "cover",
      objectPosition: "left top",
      display: "block"
    },
    placeholder: {
      width: "100%",
      height: "100%",
      background: "var(--sgt-media-bg)"
    },
    bottom: {
      position: "absolute",
      top: IMAGE_H + 22,
      left: 0,
      right: 0,
      bottom: 0,
      padding: "16px 18px 22px",
      zIndex: 3
    },
    badge: {
      display: "inline-block",
      background: "var(--sgt-badge-bg)",
      color: "var(--sgt-badge-fg)",
      fontWeight: 800,
      letterSpacing: ".04em",
      fontSize: "11.5px",
      lineHeight: 1,
      borderRadius: 8,
      padding: "8px 10px",
      marginBottom: 10
    },
    title: {
      fontSize: 23,
      fontWeight: 700,
      lineHeight: 1.2,
      margin: 0,
      color: "var(--sgt-title)"
    },
    blurb: {
      marginTop: 8,
      fontSize: 15,
      color: "var(--sgt-blurb)",
      opacity: 0.75
    },
    clickable: {
      display: "block",
      width: "100%",
      height: "100%",
      background: "transparent",
      border: 0,
      padding: 0,
      cursor: "pointer",
      textAlign: "inherit"
    }
  };
  const openInline = useCallback((url, title) => {
    const escapeHtml = s => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
    const safeTitle = escapeHtml(title);
    const safeUrl = escapeHtml(url);
    const prevOverflow = document.body.style.overflow;
    const overlay = document.createElement("div");
    Object.assign(overlay.style, {
      position: "fixed",
      inset: "0",
      background: "rgba(15,23,42,0.55)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      zIndex: "999999"
    });
    const box = document.createElement("div");
    Object.assign(box.style, {
      width: "calc(100vw - 160px)",
      height: "calc(100vh - 144px)",
      background: "#F3F4F6",
      borderRadius: "12px",
      overflow: "hidden",
      boxShadow: "0 10px 40px rgba(0,0,0,.5)",
      position: "relative",
      display: "flex",
      flexDirection: "column"
    });
    box.innerHTML = `
      <div style="height:48px;flex-shrink:0;background:#F9FAFB;color:#111827;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #E5E7EB">
        <div style="display:flex;gap:12px;align-items:center">
          <div style="display:flex;gap:8px;align-items:center">
            <div style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:34px;border:1px solid #E5E7EB;border-radius:10px;background:#F3F4F6">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/>
                <path d="m12 12 4 10 1.7-4.3L22 16Z"/>
              </svg>
            </div>
            <span style="font-size:14px;font-weight:500">Viewing Interactive Demo</span>
          </div>
          <span style="display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;background:#FFFFFF;border:1px solid #D1D5DB;box-shadow:0 1px 2px rgba(15,23,42,0.05);font-weight:500;font-size:14px">${safeTitle}</span>
        </div>
        <button data-sgt-close aria-label="Close" style="width:36px;height:36px;border-radius:12px;border:1px solid #D1D5DB;background:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;font-weight:500;color:#111827">&#215;</button>
      </div>
      <iframe src="${safeUrl}" title="${safeTitle}" allow="clipboard-write; fullscreen" style="width:100%;flex:1;border:0"></iframe>
    `;
    overlay.appendChild(box);
    document.body.appendChild(overlay);
    document.body.style.overflow = "hidden";
    const close = () => {
      if (!overlay.parentNode) return;
      overlay.parentNode.removeChild(overlay);
      document.body.style.overflow = prevOverflow;
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("popstate", close);
    };
    const onKey = e => {
      if (e.key === "Escape") close();
    };
    overlay.addEventListener("click", close);
    box.addEventListener("click", e => e.stopPropagation());
    box.querySelector("[data-sgt-close]").addEventListener("click", close);
    window.addEventListener("keydown", onKey);
    window.addEventListener("popstate", close);
  }, []);
  const CardView = ({c}) => {
    const inside = <>
        <div style={styles.dogEar} aria-hidden />
        <div style={styles.mediaWrap}>
          {c.img ? <img noZoom src={c.img} alt="" style={styles.mediaImg} loading="lazy" /> : <div style={styles.placeholder} />}
        </div>
        <div style={styles.bottom}>
          <div style={styles.badge}>{c.badge}</div>
          <h3 style={styles.title}>{c.title}</h3>
          {c.blurb && <div style={styles.blurb}>{c.blurb}</div>}
        </div>
      </>;
    if (c.navatticOpen) {
      const navatticUrl = c.navatticOpen.startsWith("http") ? c.navatticOpen : `https://capture.navattic.com/${c.navatticOpen}`;
      return <div style={styles.card} className="sgt-card">
          <button type="button" style={styles.clickable} className="sgt-click" onClick={e => {
        e.preventDefault();
        openInline(navatticUrl, c.navatticTitle || c.title);
      }}>
            {inside}
          </button>
        </div>;
    }
    if (c.href) {
      return <div style={styles.card} className="sgt-card">
          <a href={c.href} style={styles.clickable} className="sgt-click">
            {inside}
          </a>
        </div>;
    }
    return <div style={styles.card} className="sgt-card">
        {inside}
      </div>;
  };
  return <>
      <div style={styles.grid}>
        {cards.map((c, i) => <CardView key={i} c={c} />)}
      </div>

      <style>{`
        :root {
          --sgt-card-bg: #0a0a0b; --sgt-title: #ffffff; --sgt-blurb: rgba(255,255,255,0.85);
          --sgt-border: ${MP_PURPLE}; --sgt-media-bg: #111111; --sgt-dogear: ${MP_PURPLE};
          --sgt-badge-bg: ${MP_PURPLE}; --sgt-badge-fg: #ffffff;
        }
        @media (prefers-color-scheme: light) {
          :root, html.light, html[class*='light'], [data-theme='light'] {
            --sgt-card-bg: #ffffff; --sgt-title: #111111; --sgt-blurb: #333333;
            --sgt-border: ${MP_PURPLE}; --sgt-media-bg: #e9e9ef; --sgt-dogear: ${MP_PURPLE};
            --sgt-badge-bg: ${MP_PURPLE}; --sgt-badge-fg: #ffffff;
          }
        }
        html.light, html[class*='light'], [data-theme='light'] {
          --sgt-card-bg: #ffffff; --sgt-title: #111111; --sgt-blurb: #333333;
          --sgt-border: ${MP_PURPLE}; --sgt-media-bg: #e9e9ef; --sgt-dogear: ${MP_PURPLE};
          --sgt-badge-bg: ${MP_PURPLE}; --sgt-badge-fg: #ffffff;
        }
        .sgt-card { background: var(--sgt-card-bg); color: var(--sgt-title); border-color: var(--sgt-border); }
        .sgt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,92,246,0.25); }
        .sgt-card:focus-within { outline: 2px solid ${MP_PURPLE}; outline-offset: 2px; }
        .sgt-click:focus-visible { outline: 2px solid ${MP_PURPLE}; outline-offset: 3px; border-radius: 10px; }
        @media (min-width: 1280px) { .sgt-card h3 { font-size: 24px; } .sgt-card p { font-size: 15px; } }
      `}</style>
    </>;
};

Discover Mixpanel’s core features through quick, self-guided tours. Click any card below to explore interactive walkthroughs of key workflows.

<div style={{ textAlign: 'center', marginTop: '28px' }}>
  <a
    href="https://mixpanel.com/contact-us/sales/"
    className="sgt-cta"
    style={{
  display: 'inline-flex',
  alignItems: 'center',
  gap: '8px',
  fontWeight: 600,
  fontSize: '15px',
  padding: '10px 14px',
  borderRadius: '10px',
  border: '1px solid rgb(139, 92, 246)',
  color: 'var(--sgt-title)',
  background: 'var(--sgt-card-bg)',
  textDecoration: 'none',
  boxShadow: '0 4px 16px rgba(0,0,0,.12)',
  transition: 'transform .2s ease, box-shadow .2s ease, background .2s ease',
}}
  >
    Want a guided demo instead?
    <span aria-hidden>→</span>
  </a>
</div>

<style jsx global>
  {`
    /* CTA interactions reuse component look & feel */
    .sgt-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(139, 92, 246, 0.18);
      background: rgba(139, 92, 246, 0.08);
    }
    .sgt-cta:focus-visible {
      outline: 2px solid rgb(139, 92, 246);
      outline-offset: 3px;
      border-radius: 10px;
    }
    `}
</style>

### Overview

Understand what Mixpanel is, how it works, and how to navigate it.

<SelfGuidedTours
  cards={[

{
  badge: 'PRODUCT OVERVIEWS',
  title: 'Welcome to Mixpanel',
  blurb: 'Understand how and why teams use Mixpanel',
  img: '/images/navattic/WelcomeToMixpanel_314x139.png',
  navatticOpen: 'cmi6kt6pa000004l75zla652d',
  navatticTitle: 'Welcome to Mixpanel',
},

{
  badge: 'PRODUCT OVERVIEWS',
  title: 'Data Model Overview',
  blurb: 'Explore Events, Properties, & Users',
  img: '/images/navattic/DataModelOverview_314x139.png',
  navatticOpen: 'cmi6goka4000004ib35k31ft9',
  navatticTitle: 'Data Model Overview',
},

{
  badge: 'PRODUCT OVERVIEWS',
  title: 'Overview Tour',
  blurb: 'Tour the Mixpanel UI',
  img: '/images/navattic/01_OverviewTour_314x139.png',
  navatticOpen: 'cmdrjulgv000004js7zwaeqor',
  navatticTitle: 'Overview Tour',
},
]}
/>

### Get Set Up

Connect data, configure your workspace, and validate that events flow correctly.

<SelfGuidedTours
  cards={[
{
  badge: 'ADMIN',
  title: 'Org Discoverability',
  blurb: 'Help your team find your organization',
  img: '/images/navattic/OrgDiscoverability_314x139.png',
  navatticOpen: 'cm52mxlya000003jp9t754qbn',
  navatticTitle: 'Organization Discoverability',
},

{
  badge: 'ADMIN',
  title: 'Create a Project',
  blurb: 'Set up production and development projects',
  img: '/images/navattic/CreateAProject_314x139.png',
  navatticOpen: 'cmdr4pqog000004jr4psc6hhi',
  navatticTitle: 'Create a Project',
},

{
  badge: 'ADMIN',
  title: 'Manage Users',
  blurb: 'Add or remove users',
  img: '/images/navattic/ManageUsers_314x139.png',
  navatticOpen: 'cmdr80y01000004lb3xaa55h2',
  navatticTitle: 'Manage Users',
},

{
  badge: 'ADMIN',
  title: 'Manage Teams',
  blurb: 'Streamline collaboration',
  img: '/images/navattic/ManageTeams_314x139.png',
  navatticOpen: 'cmdst38s3000804labd4oeutn',
  navatticTitle: 'Manage Teams',
},

{
  badge: 'PRIVACY',
  title: 'Data Views',
  blurb: 'Control data visibility',
  img: '/images/navattic/DataViews_314x139.png',
  navatticOpen: 'cmdwroow2000704jocdamdz8b',
  navatticTitle: 'Data Views',
},

{
  badge: 'PRIVACY',
  title: 'Classified Data',
  blurb: 'Protect sensitive information',
  img: '/images/navattic/ClassifiedData_314x139.png',
  navatticOpen: 'cmdxcccdr000804jyfbsbgszr',
  navatticTitle: 'Classified Data',
},

]}
/>

### Find Insights

Explore and analyze user behavior to understand what’s happening in your product.

<SelfGuidedTours
  cards={[

{
  badge: 'ANALYSIS',
  title: 'Visualize Trends',
  blurb: 'Create an Insights report',
  img: '/images/navattic/02_Insights_314x139.png',
  navatticOpen: 'cmead9fmz000004l5ff34hgwo',
  navatticTitle: 'Visualize Trends with Data',
},

{
  badge: 'ANALYSIS',
  title: 'Optimize User Conversion',
  blurb: 'Create a Funnels report',
  img: '/images/navattic/03_Funnels_314x139.png',
  navatticOpen: 'cmer30mzn000104i52cqv05al',
  navatticTitle: 'Optimize User Conversion',
},

{
  badge: 'ANALYSIS',
  title: 'Find Product Market Fit',
  blurb: 'Use On Retention criteria',
  img: '/images/navattic/TestProductMarketFit_314x139.png',
  navatticOpen: 'cmf0qlad2000004l4a4ikbss7',
  navatticTitle: 'Find Product Market Fit',
},

{
  badge: 'ANALYSIS',
  title: 'Analyze User Groups',
  blurb: 'Create a Cohort',
  img: '/images/navattic/AnalyzeUserGroups_314x139.png',
  navatticOpen: 'cmf3q5eak000004l51x5ydugp',
  navatticTitle: 'Analyze User Groups',
},

{
  badge: 'AUTOCAPTURE',
  title: 'Analyze Autocaptured Data',
  blurb: 'Utilize Custom Events',
  img: '/images/navattic/04_Autocapture_314x139.png',
  navatticOpen: 'cmbrua13y000004l47jkmbvpg',
  navatticTitle: 'Analyzing Autocaptured Data',
},

{
  badge: 'SESSION REPLAY',
  title: 'Watch Playbacks',
  blurb: 'See why customers drop off',
  img: '/images/navattic/05_SessionReplay_314x139.png',
  navatticOpen: 'cmapktdk2000104lb976zabd1',
  navatticTitle: 'Watch Playbacks of Digital Experiences',
},

]}
/>

### Experiment & Optimize

Run tests, manage feature rollouts, and improve product experiences.

<SelfGuidedTours
  cards={[

{
  badge: 'EXPERIMENTS',
  title: 'Create Experiments',
  blurb: 'Launch an Experiment in Mixpanel',
  img: '/images/navattic/CreateExperiments_314x139.png',
  navatticOpen: 'cmfkxwfa5000004lc8408f5wi',
  navatticTitle: 'Create Experiments',
},

{
  badge: 'EXPERIMENTS',
  title: 'Understand Experiment Results',
  blurb: 'Evaluate the performance',
  img: '/images/navattic/06_Experiments_314x139.png',
  navatticOpen: 'cmfciul3m000004jr47ov9ji6',
  navatticTitle: 'Understand Experiment Results',
},

{
  badge: 'EXPERIMENTS',
  title: 'Act on Experiments',
  blurb: 'Take action on results',
  img: '/images/navattic/ActOnExperiments_314x139.png',
  navatticOpen: 'cmfdp6s2l000204l2dcs34hwp',
  navatticTitle: 'Act on Experiments',
},

{
  badge: 'FEATURE FLAGS',
  title: 'Set Up Feature Flags',
  blurb: 'Create a Feature Flag in Mixpanel',
  img: '/images/navattic/SetUpFeatureFlags_314x139.png',
  navatticOpen: 'cmgp5veba000504k7bun51lfz',
  navatticTitle: 'Set Up Feature Flags',
},

{
  badge: 'FEATURE FLAGS',
  title: 'Analyze Feature Flags',
  blurb: 'Use the exposure event',
  img: '/images/navattic/AnalyzeFeatureFlags_314x139.png',
  navatticOpen: 'cmhelb6d4000004jogv4dh18f',
  navatticTitle: 'Analyze Feature Flags',
},

]}
/>

### Govern & Maintain Data Quality

Ensure your data is consistent, trustworthy, and well-documented.

<SelfGuidedTours
  cards={[

{
  badge: 'LEXICON',
  title: 'Schema Management',
  blurb: 'Add context to your data dictionary',
  img: '/images/navattic/SchemaManagement_314x139.png',
  navatticOpen: 'cme2n3qz4000004jxfok3gsdr',
  navatticTitle: 'Schema Management',
},

{
  badge: 'LEXICON',
  title: 'Improve Data Quality',
  blurb: 'Hide, drop, and merge data',
  img: '/images/navattic/ImproveDataQuality_314x139.png',
  navatticOpen: 'cme2wd991000m04ky9pprf88n',
  navatticTitle: 'Improve Data Quality',
},

{
  badge: 'LEXICON',
  title: 'Verify Events',
  blurb: 'Signal vetted data to your team',
  img: '/images/navattic/VerifyEvents_314x139.png',
  navatticOpen: 'cme2tbzrl000d04l811kic4ys',
  navatticTitle: 'Verify Events',
},

{
  badge: 'LEXICON',
  title: 'Require New Event Review',
  blurb: 'Use Event Approval',
  img: '/images/navattic/RequireNewEventReview_314x139.png',
  navatticOpen: 'cme6ze1c8000804l5d1s2a62w',
  navatticTitle: 'Require New Event Review',
},

{
  badge: 'LEXICON',
  title: 'Detect Unusual Data Volumes',
  blurb: 'Use Data Volume Monitoring',
  img: '/images/navattic/DetectUnusualDataVolumes_314x139.png',
  navatticOpen: 'cme71ilqr000004kz9kqtdtnz',
  navatticTitle: 'Detect Unusual Data Volumes',
},

{
  badge: 'COMPUTED DATA',
  title: 'Enrich Tracked Data',
  blurb: 'Custom Events, Formulas, and more',
  img: '/images/navattic/EnrichTrackedData_314x139.png',
  navatticOpen: 'cme6ow42g000704jshxzbdaq7',
  navatticTitle: 'Enrich Tracked Data',
},

]}
/>