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

# JavaScript

> Add the Feddy widget to any page with one script tag and send your first message.

By the end of this page your site will have a chat button that opens Feddy, and a message sent from it will be sitting in your inbox. It takes about five minutes.

## Before you start

* A Feddy project and its project ID. You'll find the ID under **Settings → Install** in the dashboard. No project yet? [Create one](/docs/getting-started/create-a-project) first.
* A page you can edit. There's nothing to install and no build step; the widget is one script loaded from Feddy's servers.

<Steps>
  <Step title="Add the script">
    Put this just before the closing `</body>` tag:

    ```html index.html theme={null}
    <script src="https://core.feddy.app/sdk/feddy.js"></script>
    ```

    It's a single file with no dependencies. The widget keeps its own styles, so it never clashes with your page's CSS, and your CSS never leaks into it.
  </Step>

  <Step title="Tell Feddy which project this is">
    ```html theme={null}
    <script>
      Feddy.init({ projectId: 'fd_XXXXXXXXXXXXXXXX' })
    </script>
    ```

    This runs once per page load; calling it again does nothing. If the script runs before the page has finished loading, the widget waits and appears when it's ready.

    <Note>
      **The project ID isn't a secret.** It's visible in your page source, so anyone can find it, and that's fine: it only tells Feddy which inbox a message belongs to. Commit it like any other setting. There's nothing to protect, so keep it out of your secrets file.
    </Note>
  </Step>

  <Step title="Choose how users open it">
    By default, a floating chat button appears in the bottom-right corner of the page. That's all most sites need.

    If your site already has a **Support** or **Feedback** link, you can turn the floating button off and open Feddy from your own element instead:

    ```html theme={null}
    <script>
      Feddy.init({ projectId: 'fd_XXXXXXXXXXXXXXXX', launcher: false })
      document.querySelector('#help').addEventListener('click', () => Feddy.open())
    </script>
    ```
  </Step>

  <Step title="Send yourself a message">
    Open the page, click the button, and send a message. Then open your inbox at [dash.feddy.app](https://dash.feddy.app): it's there, with the page URL and browser alongside.

    Reply from the inbox. Back on the page, the reply appears in the panel, and the floating button shows a count until the visitor opens it.

    <Check>
      That's the whole loop: a visitor writes in, you answer, and the answer reaches them on your site.
    </Check>
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Identify users" href="/docs/guides/identify-users">
    Tell Feddy who's logged in, so you see their name in the inbox and replies can reach them by email.
  </Card>

  <Card title="Unread badge" href="/docs/guides/unread-badge">
    Show the count on your own element when you've turned the floating button off.
  </Card>

  <Card title="Conversations" href="/docs/concepts/conversations">
    What you're looking at in the inbox, and what happens on its own.
  </Card>

  <Card title="Web SDK reference" href="/docs/reference/web">
    Every option and call in the widget.
  </Card>
</CardGroup>