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

# Install the Messenger

> Add the Tiny Talk agent to your website, app, or platform.

## Script embed (recommended)

The simplest way to add Tiny Talk to your website. Paste this snippet before the closing `</body>` tag:

```html theme={null}
<script
  src="https://cdn.tinytalk.ai/latest/tiny-talk-sdk.min.umd.js"
  data-tiny-bot-id="YOUR_BOT_ID"
  defer
></script>
```

Replace `YOUR_BOT_ID` with your agent's ID, found in your agent settings under **General**.

The messenger appears as a floating chat bubble in the bottom-right corner of your site by default.

## ES Module embed

For programmatic control, import the SDK as an ES module. This is ideal for SPAs, bundled apps, or when you need to initialize the messenger dynamically:

```html theme={null}
<script type="module">
  import { createTinyBot } from 'https://cdn.tinytalk.ai/latest/tiny-talk-sdk.min.esm.js';

  createTinyBot({ botId: 'YOUR_BOT_ID' });
</script>
```

The ES module approach gives you access to the same messenger with full programmatic control via the `window.tinytalk` API (see [Controlling the widget](#controlling-the-widget) below).

## Shareable chat link (no website needed)

Every agent has a hosted chat page you can share directly — no website, no embed code. Send the link to clients, drop it in an email signature, or use it as a standalone agent:

```
https://dashboard.tinytalk.ai/bots/YOUR_BOT_ID/chat
```

Pair this with a [custom domain](/features/custom-domains) (e.g., `chat.yourcompany.com`) to serve the agent under your own brand.

<Tip>
  This is the fastest way to deliver an agent to a client when there's no website to embed it on — useful for content-generation agents, internal assistants, or one-off campaigns.
</Tip>

## Iframe embed

To embed the same hosted chat page inline within your page layout:

```html theme={null}
<iframe
  src="https://dashboard.tinytalk.ai/bots/YOUR_BOT_ID/chat"
  width="100%"
  height="660"
  style="border: none;"
></iframe>
```

This embeds the full chat experience inside any container on your page.

<Tip>
  Add rounded corners and a shadow to make the iframe feel more polished by replacing the style attribute with:

  ```
  style="border: none; border-radius: 0.5rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);"
  ```
</Tip>

## Platform-specific guides

<AccordionGroup>
  <Accordion title="WordPress">
    Install the official [Tiny Talk WordPress plugin](https://wordpress.org/plugins/tiny-talk/) for the best experience — it supports per-page agent rules, page overrides, and shortcodes.

    For a quick manual setup, paste the script embed code before the closing `</body>` tag using a plugin like **Insert Headers and Footers**.

    See the full [WordPress integration guide](/integrations/wordpress) for details.
  </Accordion>

  <Accordion title="Shopify">
    1. Go to **Online Store → Themes → Edit Code**
    2. Open `theme.liquid`
    3. Paste the script embed code before the closing `</body>` tag
    4. Save
  </Accordion>

  <Accordion title="Wix">
    1. Go to **Settings → Custom Code**
    2. Click **Add Custom Code**
    3. Paste the script embed code
    4. Set placement to **Body - End**
    5. Apply to **All Pages**
  </Accordion>

  <Accordion title="Webflow">
    1. Go to **Project Settings → Custom Code**
    2. Paste the script embed code in the **Footer Code** section
    3. Save and publish
  </Accordion>

  <Accordion title="Squarespace">
    1. Go to **Website → Pages → Website Tools → Code Injection**
    2. Paste the script embed code in the **Footer** section
    3. Save
  </Accordion>

  <Accordion title="Next.js / React">
    Add the script using the `next/script` component or a `useEffect` hook:

    ```jsx theme={null}
    import Script from 'next/script';

    export default function Layout({ children }) {
      return (
        <>
          {children}
          <Script
            src="https://cdn.tinytalk.ai/latest/tiny-talk-sdk.min.umd.js"
            data-tiny-bot-id="YOUR_BOT_ID"
            strategy="afterInteractive"
          />
        </>
      );
    }
    ```
  </Accordion>
</AccordionGroup>

## Custom positioning

By default, the widget appears in the bottom-right corner. You can change the position in the dashboard under **Messenger → Appearance → Messenger Position** (left or right).

## Controlling the widget

The SDK exposes a global `window.tinytalk` object for programmatic control. You can toggle the messenger open or closed from any element:

```html theme={null}
<button onclick="window.tinytalk.toggle()">
  Chat with us
</button>
```

For the full API and postMessage events, see the [SDK Reference](/sdk-reference).

## Dynamic knowledge base

You can inject page-specific content into your agent's knowledge base at runtime using the `data-tiny-options` attribute. This is useful for giving the agent context about the current page without uploading it to the Knowledge Base:

```html theme={null}
<script
  src="https://cdn.tinytalk.ai/latest/tiny-talk-sdk.min.umd.js"
  data-tiny-bot-id="YOUR_BOT_ID"
  data-tiny-options='{"knowledgeBase": {"content": "This page is about pricing. Plans start at $40/mo."}}'
  defer
></script>
```

The SDK watches for changes to `data-tiny-options` via a MutationObserver, so you can update the content dynamically — for example, when the user navigates to a different page in a SPA:

```js theme={null}
const script = document.querySelector('script[data-tiny-bot-id]');

script.dataset.tinyOptions = JSON.stringify({
  knowledgeBase: { content: 'Updated content for the new page.' }
});
```

## Allowed origins

For security, you can restrict which domains are allowed to load your agent. Go to **Settings → Domains → Allowed Origins** and add your domain(s). If no origins are configured, the agent can be embedded on any site.

## Custom domains

Serve your agent from your own subdomain (e.g., `chat.yourcompany.com`). The **Pro** plan includes one custom domain, and other paid plans can add custom domains as an add-on. See the full [Custom Domains](/features/custom-domains) setup guide.

## Mobile considerations

The chat widget is fully responsive and works on mobile browsers. A few notes:

* The widget automatically adjusts to mobile screen sizes
* On iOS Safari, the widget handles input focus and zoom behavior
* The launcher button is touch-friendly with appropriate tap targets

If you experience layout or zoom issues on mobile, make sure your page includes a proper viewport meta tag:

```html theme={null}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
```

This is a common fix for issues like the page zooming in when the chat input is focused, or the widget not sizing correctly on smaller screens.