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

<div className="hero-container">
  <div className="hero-content">
    *Cognigy Webchat* is an effective communication tool that assists businesses in interacting with their customers in a seamless manner.

    <p>
      Its main function is to facilitate real-time communication through text or voice messages, which aids businesses in providing immediate support, collecting feedback, and engaging with users effectively.
    </p>

    <p>
      Webchat can be easily embedded into websites, enabling visitors to communicate with Conversational AI Agents powered by Cognigy.AI.
    </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_2_Light_V1_1_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_2_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="Overview" icon="info" href="/webchat/overview">
    Learn about Cognigy Webchat, its core capabilities, and how to get started.
  </Card>

  <Card title="Webchat v3" icon="sparkles" href="/webchat/v3/overview">
    Explore the latest Webchat version, supported browsers, features, and endpoint configuration.
  </Card>

  <Card title="Webchat v3 Accessibility" icon="heart-handshake" href="/webchat/v3/accessibility">
    Ensure your Webchat v3 implementation is accessible to all users.
  </Card>

  <Card title="Webchat v3 Embedding" icon="code" href="/webchat/v3/embedding/hosted-script">
    Learn how to embed Webchat v3 seamlessly into your website or app.
  </Card>

  <Card title="Webchat v2 (Deprecated)" icon="archive" href="/webchat/v2/overview">
    Access documentation for Webchat v2, including features, configuration, and embedding.
  </Card>

  <Card title="Migration Guide" icon="repeat" href="/webchat/migration">
    Get step-by-step guidance on migrating from Webchat v2 to v3.
  </Card>

  <Card title="Plugins" icon="plug" href="/webchat/plugins">
    Extend Webchat capabilities with custom plugins.
  </Card>

  <Card title="Demo" icon="tablet-smartphone" href="/webchat/demo">
    Try out the Webchat demo to see it in action.
  </Card>

  <Card title="Cookies" icon="cookie" href="/webchat/cookies">
    Learn about cookie usage in Cognigy Webchat and how to configure it.
  </Card>
</CardGroup>