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

# Widget overview

> Add AI chat to your website, recognize returning visitors, hand conversations to your team, and customize the experience for your brand.

The **AI Chat Widget** lets visitors start support conversations directly on your website. You can launch it as a floating widget, embed it inside a page, or build your own UI on top of the same widget engine.

<Tip>
  New here? Start with **[Install Widget](/widget/install-widget)**, then come back for identity, customization, and advanced UI.
</Tip>

<Info>
  Want to see the widget in action before installing? The **[Playground](/widget/playground)** lets you tweak colors, launcher size, initial messages, and more live — then copy the generated snippet straight into your site.
</Info>

## Core Functionality

<AccordionGroup>
  <Accordion title="Launch on your website" icon="rocket">
    Add the widget with a simple script, the default React package, or a headless build. Choose the path that fits your site and team.
  </Accordion>

  <Accordion title="Embed inside mobile apps" icon="phone">
    Use a mobile WebView support screen when iOS, Android, or React Native users should get the same AI chat, history, and handoff experience.
  </Accordion>

  <Accordion title="Recognize the right visitor" icon="shield-check">
    Support anonymous visitors, collect name and email in the widget, or authenticate signed-in customers from your server for stronger identity and cross-device history.
  </Accordion>

  <Accordion title="Keep conversation history organized" icon="messages">
    Visitors can return to earlier conversations, continue open ones, and start new ones when needed. History behavior depends on how you identify the visitor.
  </Accordion>

  <Accordion title="Match your site experience" icon="paintbrush">
    Control branding, copy, launcher behavior, inline embedding, welcome prompts, routing, and deeper styling without rebuilding the entire widget.
  </Accordion>

  <Accordion title="Third-Party Integrations" icon="plug">
    Connect helpdesks and CRMs from the [integrations settings](https://platform.open.cx/settings/integrations). Keep the widget on your site while your team works from the tools they already use.
  </Accordion>

  <Accordion title="Escalate to a human" icon="user-group">
    When the AI <Tooltip tip="The AI transfers the conversation to a human agent with full context attached." cta="Learn more" href="/handoff/introduction">hands off</Tooltip>, the conversation stays in the same thread. Your team can continue from the inbox, and you can listen for widget handoff events if you want custom UI.
  </Accordion>

  <Accordion title="Render richer UI" icon="bolt">
    Turn AI action results into cards, status views, account summaries, onboarding flows, and other <Tooltip tip="React or headless components that replace plain text chat bubbles with richer UI for specific AI action results." cta="Custom components" href="/widget/custom-components">custom interfaces</Tooltip> instead of plain text replies.
  </Accordion>

  <Accordion title="Support files and feedback" icon="paperclip">
    Visitors can upload files, and the widget can show post-conversation <Tooltip tip="Customer Satisfaction — a post-conversation survey measuring how satisfied the visitor was with the support experience.">CSAT</Tooltip> when your workflow requests it.
  </Accordion>
</AccordionGroup>

<Info>
  The widget works well as a first-response layer on your website: visitors can start with AI, stay in the same thread as the conversation evolves, and move to a human without being pushed into a separate support flow.
</Info>

## Integration Options

<Tabs>
  <Tab title="Drop-in widget">
    Choose this path when you want to add support chat to your site quickly and keep the default widget experience.

    <Steps>
      <Step title="Install the widget">
        Start with [Install Widget](/widget/install-widget) to choose HTML, React, or headless setup.
      </Step>

      <Step title="Decide how visitors are identified">
        Use [Authentication](/widget/authentication) when signed-in customers should keep history across devices.
      </Step>

      <Step title="Tune the experience">
        Use [Configuration](/widget/configuration) for branding, prompts, and behavior.
      </Step>

      <Step title="Extend the UI if needed">
        Use [Custom Components](/widget/custom-components) when plain text replies are not enough.
      </Step>
    </Steps>

    <CardGroup cols={2}>
      <Card title="Install Widget" icon="plug" href="/widget/install-widget">
        Launch with HTML, React, or headless setup.
      </Card>

      <Card title="Authentication" icon="shield-check" href="/widget/authentication">
        Recognize signed-in visitors and protect chat history.
      </Card>

      <Card title="Configuration" icon="gear" href="/widget/configuration">
        Match the widget to your site, prompts, and behavior.
      </Card>

      <Card title="Mobile Support" icon="phone" href="/widget/native-mobile">
        Add chat inside iOS, Android, and React Native apps.
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Third-party integrations">
    The web widget does not have to live on its own. It can be the front door on your website while the rest of the support workflow continues inside the systems your team already uses.

    <AccordionGroup>
      <Accordion title="Zendesk" icon="headset">
        Widget conversations can hand off into [Zendesk](/integrations/zendesk/overview). Your agents pick up with the conversation context already attached.
      </Accordion>

      <Accordion title="Intercom" icon="comment-dots">
        Widget conversations can route into [Intercom](/integrations/intercom/overview) so your team continues the conversation from the Intercom inbox.
      </Accordion>

      <Accordion title="HubSpot" icon="users-viewfinder">
        With [HubSpot](/integrations/hubspot/overview), your team sees CRM context when a widget conversation moves from AI to a human agent.
      </Accordion>

      <Accordion title="Front" icon="inbox">
        Widget conversations can appear in Front so your team can continue support from their shared inbox workflow.
      </Accordion>

      <Accordion title="Other supported integrations" icon="grid-2">
        OpenCX also supports widget handoff and support workflows with [Salesforce](/integrations/salesforce/overview), [Gorgias](/integrations/gorgias/overview), and [Slack](/handoff/introduction).
      </Accordion>
    </AccordionGroup>

    <CardGroup cols={2}>
      <Card title="Zendesk Integration" icon="headset" href="/integrations/zendesk/overview">
        Set up widget handoff so your team can continue from Zendesk.
      </Card>

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

    <Note>
      Need the broader setup list? See [integrations settings](https://platform.open.cx/settings/integrations). If your main goal is deciding when the AI should escalate, see [handoff settings](https://platform.open.cx/settings/handoff).
    </Note>
  </Tab>
</Tabs>

## Where To Go Next

<CardGroup cols={2}>
  <Card title="Install Widget" icon="plug" href="/widget/install-widget">
    Choose the HTML, React, or headless implementation path.
  </Card>

  <Card title="Authentication" icon="shield-check" href="/widget/authentication">
    Decide how the widget should recognize visitors.
  </Card>

  <Card title="Configuration" icon="gear" href="/widget/configuration">
    Tune branding, prompts, and behavior.
  </Card>

  <Card title="Mobile Support" icon="phone" href="/widget/native-mobile">
    Add the widget to iOS, Android, and React Native apps.
  </Card>
</CardGroup>