index.mdx

title	Home
description	Everything you need to set up, configure, and get the most out of Platform, Analytics, and Integrations tools.
mode	frame

Product Guide

Everything you need to set up, configure, and get the most out of Platform, Analytics, and Integrations tools.

Platform overview} icon="chart-no-axes-gantt" href="/platform" className="product-guide-feature-card" size={64} > Setup, configure, and manage your workspace.

<a
  href="/analytics"
  className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary"
>
  <Icon icon="chart-column" color="rgb(var(--primary))" size={18} className="shrink-0" />
  <div className="flex flex-col gap-1">
    <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Analytics</span>
    <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
      Build, report, and visualize your data.
    </span>
  </div>
</a>
<a
  href="/integrations"
  className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary"
>
  <Icon icon="code-xml" color="rgb(var(--primary))" size={18} className="shrink-0" />
  <div className="flex flex-col gap-1">
    <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Integrations</span>
    <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
      Ready-to-use connectors for common platforms and flexible webhooks.
    </span>
  </div>
</a>

---

Common tasks

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
  <a
    href="/platform/configuration/user-management"
    className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary"
  >
    <Icon icon="users" color="rgb(var(--primary))" size={18} className="shrink-0" />
    <div className="flex flex-col gap-1">
      <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Manage your team</span>
      <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        Add members, assign roles, and control access across your workspace.
      </span>
    </div>
  </a>
  <a
    href="/analytics/connect-data"
    className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary"
  >
    <Icon icon="database" color="rgb(var(--primary))" size={18} className="shrink-0" />
    <div className="flex flex-col gap-1">
      <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Connect a data source</span>
      <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        Link a database, data warehouse, or third-party data provider.
      </span>
    </div>
  </a>
  <a
    href="/integrations/connectors/crm"
    className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary"
  >
    <Icon icon="building-2" color="rgb(var(--primary))" size={18} className="shrink-0" />
    <div className="flex flex-col gap-1">
      <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Connect your CRM</span>
      <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        Sync your CRM through native connectors or a custom strategy.
      </span>
    </div>
  </a>
  <a
    href="/analytics/dashboards/create-dashboard"
    className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary"
  >
    <Icon icon="layout-dashboard" color="rgb(var(--primary))" size={18} className="shrink-0" />
    <div className="flex flex-col gap-1">
      <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Build a dashboard</span>
      <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        Add charts, set filters, and share a live dashboard.
      </span>
    </div>
  </a>
  <a
    href="/integrations/webhooks/configure"
    className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary"
  >
    <Icon icon="webhook" color="rgb(var(--primary))" size={18} className="shrink-0" />
    <div className="flex flex-col gap-1">
      <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Set up a webhook</span>
      <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        Subscribe to events and route them to any endpoint.
      </span>
    </div>
  </a>
  <a
    href="/analytics/reports/scheduled-reports"
    className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary"
  >
    <Icon icon="calendar-clock" color="rgb(var(--primary))" size={18} className="shrink-0" />
    <div className="flex flex-col gap-1">
      <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Schedule a report</span>
      <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        Send recurring snapshots via email or Slack.
      </span>
    </div>
  </a>
</div>