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

# Cognigy xApps

<div className="hero-container">
  <div className="hero-content">
    *Cognigy xApps* are infinitely flexible micro-web applications for customer self-service.

    <p>
      xApps can be used stand-alone or complementary to any channel to enhance AI and human agents' capabilities and to overcome channel limitations compromising user experiences.
    </p>

    <p>
      xApps seamlessly embed interactive workflows, rich media, and device features directly into conversational journeys.
    </p>
  </div>

  <div style={{ position: "relative", width: "fit-content", margin: "0 auto" }}>
    <video
      width="200"
      height="200"
      className="block dark:hidden"
      style={{
      margin: "0 auto",
      borderRadius: "var(--rounded-xl, .75rem)",
      borderBottom: "1px solid lightgray",
      borderRight: "1px solid lightgray",
      borderTop: "0",
      borderLeft: "0"
    }}
      autoPlay
      muted
      loop
    >
      <source src="https://docscognigyassets.blob.core.windows.net/assets/Microanimation_Seats_Light_V1_Optimised.mp4" type="video/mp4" />
    </video>

    <video
      width="200"
      height="200"
      className="hidden dark:block"
      style={{
      margin: "0 auto",
      borderRadius: "var(--rounded-xl, .75rem)",
      borderBottom: "1px solid #313437",
      borderRight: "1px solid #313437",
      borderTop: "0",
      borderLeft: "0"
    }}
      autoPlay
      muted
      loop
    >
      <source src="https://docscognigyassets.blob.core.windows.net/assets/Microanimation_Seats_Dark_V1_Optimised.mp4" type="video/mp4" />
    </video>

    <button
      type="button"
      aria-label="Pause video"
      className="video-pause-btn"
      onClick={(e) => {
  const btn = e.currentTarget;
  const container = btn.parentElement;
  const videos = Array.from(container.querySelectorAll('video'));
  const visibleVideo = videos.find(v => !v.closest('[class*="hidden"]') && v.offsetParent !== null) || videos[0];
  const isPaused = visibleVideo?.paused;
  videos.forEach(v => isPaused ? v.play() : v.pause());
  btn.textContent = isPaused ? '⏸' : '▶';
  btn.setAttribute('aria-label', isPaused ? 'Pause video' : 'Play video');
}}
    >
      ⏸
    </button>
  </div>
</div>

<CardGroup cols={3}>
  <Card title="About xApps" icon="info" href="/xApps/overview">
    Discover the powerful potential of xApps by exploring their concepts and real-world use cases.
  </Card>

  <Card title="Build xApps" icon="hammer" href="/xApps/build/first-xApp">
    Build your first xApp in 5 minutes or use ready-made xApps from GitHub.
  </Card>

  <Card title="xApp Tutorials" icon="book-user" href="/xApps/build/xApp-with-multi-channels">
    Follow tutorials to get a better understanding of xApps' capabilities.
  </Card>

  <Card title="Supported Channels and Browsers" icon="globe" href="/xApps/supported-browsers-and-channels">
    Ensure your xApps compatibility with production channels and browsers.
  </Card>

  <Card title="Secure xApps" icon="shield" href="/xApps/security/secure-xApp-from-xss">
    Protect your xApps from XSS attacks by taking the necessary security measures.
  </Card>

  <Card title="xApp Architecture" icon="building" href="/xApps/architecture">
    Explore the architecture and life cycle of xApps through diagrams.
  </Card>
</CardGroup>