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

# OpenCX Documentation

> AI-powered customer support - chat, phone, email, WhatsApp, SMS, and web.

export const IntegrationOrbit = () => {
  const innerLogos = [{
    href: "/integrations/zendesk/overview",
    src: "/images/integrations/zendesk.svg",
    darkSrc: "/images/integrations/zendesk-dark.svg",
    alt: "Zendesk"
  }, {
    href: "/integrations/shopify/overview",
    src: "/images/integrations/shopify.svg",
    alt: "Shopify"
  }, {
    href: "/integrations/salesforce/overview",
    src: "/images/integrations/salesforce.svg",
    alt: "Salesforce"
  }, {
    href: "/integrations/intercom/overview",
    src: "/images/integrations/intercom.svg",
    darkSrc: "/images/integrations/intercom-dark.svg",
    alt: "Intercom"
  }, {
    href: "/integrations/hubspot/overview",
    src: "/images/integrations/hubspot.svg",
    alt: "HubSpot"
  }];
  const outerLogos = [{
    href: "/integrations/gorgias/overview",
    src: "/images/integrations/gorgias.svg",
    alt: "Gorgias"
  }, {
    href: "/integrations/front/overview",
    src: "/images/integrations/front.svg",
    alt: "Front"
  }, {
    href: "/integrations/jira/overview",
    src: "/images/integrations/jira.svg",
    alt: "Jira"
  }, {
    href: "/knowledge/sources/confluence/overview",
    src: "/images/integrations/confluence.svg",
    alt: "Confluence"
  }, {
    href: "/integrations/dynamics-365/overview",
    src: "/images/integrations/dynamics-365.svg",
    alt: "Dynamics 365"
  }, {
    href: "/integrations/twilio-flex/overview",
    src: "/images/integrations/twilio-flex.svg",
    alt: "Twilio Flex"
  }, {
    href: "/integrations/freshchat/overview",
    src: "/images/integrations/freshchat.svg",
    alt: "Freshchat"
  }];
  const innerCount = innerLogos.length;
  const outerCount = outerLogos.length;
  return <div className="integration-orbit relative mx-auto h-[270px] w-[270px]">
      <div className="integration-orbit-grid-fade pointer-events-none absolute left-1/2 top-1/2 z-0 h-[258px] w-[258px] -translate-x-1/2 -translate-y-1/2 rounded-full" aria-hidden />

      <svg xmlns="http://www.w3.org/2000/svg" className="pointer-events-none absolute inset-0 z-[1] h-full w-full">
        <circle className="stroke-black/10 dark:stroke-white/10" cx="50%" cy="50%" r="70" fill="none" strokeWidth="1" />
        <circle className="stroke-black/10 dark:stroke-white/10" cx="50%" cy="50%" r="120" fill="none" strokeWidth="1" />
      </svg>

      <div className="pointer-events-none absolute left-1/2 top-1/2 z-[1] flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-black/10 bg-white shadow-sm dark:border-white/10 dark:bg-zinc-900">
        <img src="/logo.svg" alt="OpenCX" className="hidden h-6 w-6 dark:block" />
        <img src="/logo-light.svg" alt="OpenCX" className="block h-6 w-6 dark:hidden" />
      </div>

      {innerLogos.map((logo, i) => <div key={logo.alt} className="animate-orbit absolute left-1/2 top-1/2 z-[2] flex transform-gpu items-center justify-center" style={{
    "--duration": "35s",
    "--orbit-radius": 70,
    "--angle": 360 / innerCount * i,
    width: 32,
    height: 32,
    marginLeft: -16,
    marginTop: -16
  }}>
          <a href={logo.href} className="flex size-full items-center justify-center rounded-full border border-black/10 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-white/10 dark:bg-zinc-900" title={`${logo.alt} integration`}>
            <img src={logo.darkSrc || logo.src} alt="" className="hidden h-[18px] w-[18px] object-contain dark:block" />
            <img src={logo.src} alt="" className="block h-[18px] w-[18px] object-contain dark:hidden" />
            <span className="sr-only">{logo.alt}</span>
          </a>
        </div>)}

      {outerLogos.map((logo, i) => <div key={logo.alt} className="animate-orbit absolute left-1/2 top-1/2 z-[2] flex transform-gpu items-center justify-center [animation-direction:reverse]" style={{
    "--duration": "45s",
    "--orbit-radius": 120,
    "--angle": 360 / outerCount * i,
    width: 26,
    height: 26,
    marginLeft: -13,
    marginTop: -13
  }}>
          <a href={logo.href} className="flex size-full items-center justify-center rounded-full border border-black/10 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-white/10 dark:bg-zinc-900" title={`${logo.alt} integration`}>
            <img src={logo.src} alt="" className="h-[14px] w-[14px] object-contain" />
            <span className="sr-only">{logo.alt}</span>
          </a>
        </div>)}
    </div>;
};

<div className="flex items-center gap-8 max-md:flex-col max-md:items-stretch">
  <div className="flex-1 min-w-0 text-zinc-950 dark:text-zinc-50 [&_a]:text-zinc-950 dark:[&_a]:text-zinc-50">
    <p className="text-lg">
      Guides, API references, and examples to help you deploy AI agents across every channel your customers use.
    </p>

    <Tip>
      First time here? Follow the **[Quickstart](/quickstart)** to get a live AI agent on your site in under 10 minutes.
    </Tip>
  </div>

  <div className="max-md:hidden flex-shrink-0 overflow-visible">
    <IntegrationOrbit />
  </div>
</div>

## Build AI Agents

Pick the channel your customers reach you on. Each page walks you from zero to a live agent.

<Card title="Chat Widget" icon="message" href="/widget/introduction" horizontal>
  Embed on your website. Fastest setup.
</Card>

<CardGroup cols={2}>
  <Card title="Phone" icon="phone" href="/phone/introduction">
    Inbound and outbound AI voice agents.
  </Card>

  <Card title="Email" icon="envelope" href="/email/introduction">
    Forward support mail, AI replies from your domain.
  </Card>

  <Card title="WhatsApp" icon="whatsapp" href="/whatsapp/introduction">
    Answer customers on WhatsApp Business.
  </Card>

  <Card title="SMS" icon="comment-sms" href="/sms/introduction">
    Register a number, reply to texts automatically.
  </Card>
</CardGroup>

## Train Your AI

Curate help center articles and connect live knowledge so answers stay accurate.

<Card title="AI Actions" icon="bolt" href="/actions/introduction" horizontal>
  Teach agents to call your APIs — lookups, updates, real work.
</Card>

<CardGroup cols={2}>
  <Card title="Help Center" icon="compass" href="/help-center/overview">
    Write articles and organize them into topics. Your AI reads from these first.
  </Card>

  <Card title="Knowledge Sources" icon="database" href="/knowledge/sources/overview">
    Connect Zendesk, Notion, Confluence, Google Drive, or crawl any website.
  </Card>
</CardGroup>

## Connect Integrations

Wire helpdesks, stores, and CRMs so agents and humans share full context.

<CardGroup cols={2}>
  <Card title="Helpdesks" icon="headset" href="/dashboard/introduction">
    Zendesk, Front, Intercom, Gorgias, Salesforce — hand off with full context.
  </Card>

  <Card title="E-commerce" icon="cart-shopping" href="/integrations/shopify/overview">
    Shopify order lookup, product search, and customer metadata.
  </Card>

  <Card title="CRMs" icon="users-viewfinder" href="/integrations/hubspot/overview">
    HubSpot, Salesforce — sync contacts and conversations.
  </Card>

  <Card title="All Integrations" icon="grid-2" href="/dashboard/introduction">
    Browse every supported platform.
  </Card>
</CardGroup>

## For Developers

Automate with the REST API, MCP, and webhooks from your own stack.

<CardGroup cols={2}>
  <Card title="API Reference" icon="code" href="/api-reference/authentication">
    Sessions, contacts, actions, phone agents, email, and more.
  </Card>

  <Card title="MCP Server" icon="network-wired" href="/mcp/introduction">
    Operate OpenCX from Claude Desktop, Cursor, and VS Code.
  </Card>

  <Card title="Webhooks" icon="webhook" href="/api-reference/webhooks/types">
    Listen to session events, handoffs, and CSAT responses.
  </Card>

  <Card title="Partner Program" icon="handshake" href="/partners/introduction">
    White-label OpenCX and resell to your customers.
  </Card>
</CardGroup>

***

## Related Documentation

Follow quickstarts, architecture, and cross-links when you need more depth.

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Live agent in 10 minutes — widget, knowledge, autopilot.
  </Card>

  <Card title="How OpenCX Works" icon="diagram-project" href="/how-opencx-works">
    The five pieces every agent shares.
  </Card>

  <Card title="Build Agents" icon="robot" href="/build-agents/get-started">
    Pick a channel and go live.
  </Card>

  <Card title="Integrations" icon="plug" href="/dashboard/introduction">
    Connect helpdesks, CRMs, and e-commerce platforms.
  </Card>
</CardGroup>