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

# Quickstart: Set up Your First Click To Call Widget

This quickstart guide walks you through setting up a [Click To Call widget](/click-to-call/overview) for a basic setup. The basic setup includes voice communication and live transcription.

## Prerequisites

* Create an [AI Agent](/ai/agents/develop/manage-ai-agents).
* Configure a [speech provider](/ai/agents/test/voice-preview#set-up-a-speech-provider) in the [Voice Preview Settings](/ai/administer/access/project-settings#voice-preview-settings) section of the [Project settings](/ai/administer/access/project-settings).
* Ensure [Voice Gateway](/voice-gateway/getting-started#set-up-voice-gateway-for-your-organization) is active for your organization.
* For testing purposes, allow microphone access in your browser and, if needed, in your device settings.

## Set Up a Click To Call Widget

<Steps>
  <Step title="Create a Flow">
    1. Go to **Build > Flows**, click **+ New Flow**
    2. On the **New Flow** panel, enter a unique name for your Flow and click **Create**. You are redirected to the Flow editor.
    3. In the Flow editor, add an [AI Agent Node](/ai/agents/develop/node-reference/ai/ai-agent) and configure the AI Agent you previously created.
  </Step>

  <Step title="Configure a Voice Gateway Endpoint">
    1. Go to **Deploy > Endpoints**, click **+ New Endpoint** and select **Voice Gateway**.

    2. In the **New Endpoint** panel, configure the following:
       * **Name** — enter a unique name, for example, `Click To Call Endpoint`.
       * **Flow** — select the Flow you previously created, for example, `Click To Call Assistant`. Click **Save**. You are then redirected to the Endpoint settings.

    3. In the Endpoint settings, click the **Set Up Click To Call Integration** button in the **Click To Call Embedding HTML** field. The embedding code is generated in the code editor, and an [Application](/voice-gateway/webapp/applications) is created in the Voice Gateway Self-Service Portal. You can use this code snippet to [embed the Click To Call widget in your website](/click-to-call/embed).

    4. In the **Click To Call Widget Settings**, configure the following:
       * **Enable Click To Call Widget** — activate the toggle.
       * **AI Agent Name** — enter the name displayed on the Click To Call widget, for example, `Voice Support`.
       * *(Optional)* **Tagline** — enter the text displayed under the AI Agent name on the widget, for example, `Just ask me anything!`.

    5. Click **Save**.
  </Step>

  <Step title="Test the Click To Call widget">
    1. In the upper-right corner of the Endpoint settings, click the **Open Demo Widget** button. The Demo Widget opens in a new tab.
    2. Click <img src="https://mintcdn.com/cognigy-15abf2ba/3f0tglC4DBfZZ5qq/_assets/icons/start-voice-call.svg?fit=max&auto=format&n=3f0tglC4DBfZZ5qq&q=85&s=e4cde5644d6a7d8aed015feddf256d25" alt="start-voice-call" width="24" height="24" data-path="_assets/icons/start-voice-call.svg" /> to start a call with your AI Agent.
  </Step>
</Steps>

## Next Steps

* [Embed the Click To Call Widget in Your Website](/click-to-call/embed)

## More Information

* [Configure the Click To Call Widget](/click-to-call/configure)
* [Click To Call GitHub Reference](https://github.com/Cognigy/click-to-call-widget)
* [Click To Call SDK GitHub Reference](https://github.com/Cognigy/click-to-call-sdk)
* [Voice Gateway Endpoint](/ai/agents/deploy/endpoint-reference/voice-gateway#click-to-call-widget-settings)