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

# Click To Call

<div className="hero-container">
  <div className="hero-content">
    *Cognigy Click To Call* is a multimodal voice application that allows for seamless communication between users and your voice AI Agent with a single click.

    <p>
      The main function is to create easy to use voice AI Agent widgets that you can embed in your website. Additionally, you can build a custom experience with the Click To Call SDK.
    </p>

    <p>
      Click To Call is built with the web real-time communication (WebRTC) protocol and Opus codec, and delivers low-latency, high-quality audio communication.
    </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/click-to-call-white-mode.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/click-to-call-dark-mode.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="/click-to-call/overview">
    Learn about Click To Call, deployment options, key benefits, prerequisites, and restrictions.
  </Card>

  <Card title="Quickstart" icon="rocket" href="/click-to-call/quickstart">
    Set up a basic Click To Call widget in a few steps.
  </Card>

  <Card title="Configure" icon="settings" href="/click-to-call/configure">
    Configure the Click To Call widget in the Voice Gateway Endpoint settings.
  </Card>

  <Card title="Embed" icon="code" href="/click-to-call/embed">
    Embed the Click To Call widget in your website.
  </Card>

  <Card title="Tutorials" icon="book-open" href="/click-to-call/tutorials/overview">
    These tutorials help you with advanced setups for the Click To Call widget.
  </Card>

  <Card title="SDK" icon="hammer" href="/click-to-call/sdk/overview">
    Build a custom voice interface from scratch with the Click To Call SDK.
  </Card>
</CardGroup>