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

# Framer

> Add an Anam AI avatar widget to your Framer website

Add a conversational AI avatar to your Framer store using the [Anam Widget](/embed/widget/overview) -- no coding required.

<Card href="https://www.framer.com/marketplace/plugins/anam-avatar/preview/" img="https://mintcdn.com/anam/sY4IfCwsLeP2SnlU/images/widget_framer.webp?fit=max&auto=format&n=sY4IfCwsLeP2SnlU&q=85&s=223c3d48470dfc084b6d4e649dfbcea3" cta="Try the Framer Plugin" width="1600" height="1200" data-path="images/widget_framer.webp" />

## Quick Start

<Steps>
  <Step title="Create an avatar">
    Go to [Anam Lab](https://lab.anam.ai) configure its avatar, voice, and behavior.
  </Step>

  <Step title="Publish avatar and copy the widget code.">
    In the Widget tab, add your Framer domain to the **Allowed domains** list and **Publish** the avatar.
  </Step>

  <Step title="Paste code in the Plugin.">
    Open this plugin in: [https://www.framer.com/marketplace/plugins/anam-avatar/preview/](https://www.framer.com/marketplace/plugins/anam-avatar/preview/) and paste your widget code there. 
  </Step>

  <Step title="Customize messages, avatar settings, and collect data for performance improvement." />
</Steps>

## Next Steps

<CardGroup cols={2}>
  <Card icon="sliders" href="/embed/widget/configuration" title="Widget Configuration">
    Customize the widget's appearance and behavior
  </Card>

  <Card icon="bolt" href="/embed/widget/events" title="Widget Events">
    Listen for widget events in your Framer website
  </Card>
</CardGroup>