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

# Install the widget

> Add the chat widget to your website with one script tag.

The widget is a single script tag. It loads a sandboxed frame from the Writine
dashboard, so it cannot read your page and your page cannot read it.

<Steps>
  <Step title="Get your snippet" icon="code">
    Open **Settings**, then **Websites**, and add your site. Writine generates a
    snippet that already carries your site identifier:

    ```html theme={null}
    <script
      src="https://app.writine.com/widget.js"
      data-site="site_YOUR_SITE_ID"
    ></script>
    ```

    <Tip>
      The snippet in **Settings**, **Websites** has your real site identifier
      filled in. Copy it from there rather than editing the example above.
    </Tip>
  </Step>

  <Step title="Paste it on your site" icon="clipboard">
    Paste it once, just before the closing `</body>` tag, on every page where
    you want the widget to appear.
  </Step>

  <Step title="Allow your domain" icon="shield-check">
    The widget only answers pages on domains you have listed. Add every origin
    the snippet runs on under **Allowed origins**, including the scheme:

    ```text theme={null}
    https://example.com
    https://www.example.com
    ```

    `https://example.com` and `https://www.example.com` are different origins.
    If your site serves both, list both. A page on an unlisted origin loads the
    script but gets no conversation, which is the most common reason a freshly
    installed widget appears to do nothing.
  </Step>

  <Step title="Confirm it works" icon="circle-check">
    Load a page with the snippet. You should see the launcher in the corner you
    chose. Open it, send a message, and it appears in your inbox straight away.
  </Step>
</Steps>

<Note>
  Visitors never need an account. A conversation is bound to a credential held
  in the visitor's browser, so a returning visitor keeps their history on that
  browser but a different browser or device starts fresh.
</Note>

## Edge cases

<AccordionGroup>
  <Accordion title="Single page applications" icon="react">
    The script attaches once on load and survives client side navigation, so
    frameworks that swap the page without a reload need no extra work. Inject
    the tag once in the shell rather than per route, because a second tag on the
    same page is ignored.
  </Accordion>

  <Accordion title="Content Security Policy" icon="lock">
    If your site sets a Content Security Policy, the widget needs the dashboard
    origin in three directives:

    ```text theme={null}
    script-src https://app.writine.com;
    frame-src https://app.writine.com;
    connect-src https://app.writine.com;
    ```

    A missing `frame-src` is the usual cause of an invisible widget on a site
    with a strict policy. Your browser console will name the directive that
    blocked it.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Customize the widget" icon="paintbrush" href="/docs/widget/appearance">
    Match the launcher and panel to your brand.
  </Card>

  <Card title="Invite your team" icon="user-plus" href="/docs/workspace/members-and-roles">
    Add the members who will answer conversations.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.