Skip to main content
The simplest way to add Tiny Talk to your website. Paste this snippet before the closing </body> tag: 
<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: 
<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 below).

​
Iframe embed

If you prefer to embed the agent inline within your page layout: 
<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.
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);"

​
Platform-specific guides

Install the official Tiny Talk WordPress plugin 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 for details.
  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
  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
  1. Go to Project Settings → Custom Code
  2. Paste the script embed code in the Footer Code section
  3. Save and publish
  1. Go to Website → Pages → Website Tools → Code Injection
  2. Paste the script embed code in the Footer section
  3. Save
Add the script using the next/script component or a useEffect hook:
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"
      />
    </>
  );
}

​
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: 
<button onclick="window.tinytalk.toggle()">
  Chat with us
</button>
For the full API and postMessage events, see the 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: 
<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: 
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 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: 
<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.