Tonetuned
Log inStart free

Add the chat to your website

One line of code, pasted once, puts a Chat button on every page. No plugin to update, no developer needed on most website builders. It usually takes about two minutes.

Your snippet

Replace YOUR_AGENT_ID with your assistant id, or open this page from your assistant's Install tab and it is filled in for you.

html
<script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

Every chat shows an “AI assistant” label. Only knowledge you marked public is ever sent to the model for visitors.

WordPress

Add the snippet to the site footer with a header-and-footer plugin, or from your theme.

  1. In WordPress admin, go to Plugins › Add New, search for “WPCode” (Insert Headers and Footers), then install and activate it.

  2. Open Code Snippets › Header & Footer and paste the snippet into the Footer box.

    html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  3. Click Save Changes. If you use a caching plugin, clear its cache, then open your site.

  4. Developers can skip the plugin and add this to a child theme’s functions.php instead:

    functions.php
    add_action('wp_footer', function () {
    echo '<script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>';
});
  • On WordPress.com, installing plugins needs a plan that allows plugins.
  • Optimisation plugins that delay JavaScript are fine: the widget appears once the script runs.

Shopify

Paste the snippet into your theme layout, just above the closing body tag.

  1. In Shopify admin, go to Online Store › Themes.

  2. Next to your live theme, click the ⋯ button, then Edit code.

  3. Under Layout, open theme.liquid. Find </body> near the end and paste the snippet on the line above it.

    html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  4. Click Save and open your store.

  • The snippet belongs to the theme. If you switch or reinstall a theme, paste it again.

Wix

Add it as custom code on all pages, loaded at the end of the body.

  1. In your site dashboard, go to Settings, then Custom Code (under Development & integrations).

  2. Click + Add Custom Code and paste the snippet.

    html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  3. Name it “Tonetuned”, choose All pages and Load code once, and set Place Code in to Body - end.

  4. Click Apply, then open your published site.

  • Wix runs custom code only on Premium sites with a connected domain.
  • The widget does not show inside the Wix editor. Check the published site.

Squarespace

Paste the snippet into site-wide code injection, in the footer.

  1. Open Settings, then Developer Tools › Code Injection (on older sites: Settings › Advanced › Code Injection).

  2. Paste the snippet into the Footer box.

    html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  3. Click Save and open your site in a private window.

  • Code injection is not available on the cheapest Squarespace plan.

Webflow

Add the snippet to the site-wide footer code, then publish.

  1. Open your project’s Site settings, then the Custom code tab.

  2. Paste the snippet into Footer code.

    html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  3. Click Save, then Publish the site. Custom code does not run in the Designer.

  • Site-wide custom code needs a paid Webflow site plan.

Framer

Add the snippet to the end of the body tag in site settings, then publish.

  1. Open Site Settings › General and scroll to Custom Code.

  2. Paste the snippet into the End of <body> tag box.

    html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  3. Click Save and publish. The editor canvas does not run scripts, so check the live site.

Google Tag Manager

Add a Custom HTML tag that fires on all pages.

  1. In your container, go to Tags › New › Tag Configuration › Custom HTML.

  2. Paste this version of the snippet (the assistant id is in the URL):

    html
    <script src="https://tonetuned.rjscode.com/embed.js?agent=YOUR_AGENT_ID" async></script>

  3. Under Triggering, choose All Pages. Save the tag.

  4. Click Submit, then Publish. Use Preview first if you want to test it.

Any HTML site

Paste one line before </body> on every page, or in the shared footer.

  1. Open the file that holds your site’s footer (or each HTML page) and paste the snippet just above </body>.

    html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  2. Upload the file and reload your site. A Chat button appears in the bottom-right corner.

  • Inside <head> works too. The script waits for the page to load.
  • The chat's buttons and labels follow the visitor's browser language (Slovenian, English, German, Italian, Croatian). To fix one language, add data-lang="sl" to the script tag.

React (Vite, Create React App)

Put the snippet in index.html. React does not need to know about it.

  1. Open index.html (Vite: project root; Create React App: public/index.html) and paste the snippet above </body>.

    index.html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  2. If you can’t edit the HTML file, load it once from your root component instead:

    App.tsx
    import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://tonetuned.rjscode.com/embed.js?agent=YOUR_AGENT_ID";
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return <>{/* your app */}</>;
}
  • The widget lives outside your React tree, so route changes keep the chat open. It never loads twice, even in Strict Mode.

Next.js

Load it with next/script in the root layout so it is on every page.

  1. App Router: add the Script component to app/layout.tsx, inside <body>.

    app/layout.tsx
    import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" strategy="lazyOnload" />
      </body>
    </html>
  );
}

  2. Pages Router: put the same <Script /> line in pages/_app.tsx, next to <Component {...pageProps} />.

Vue and Nuxt

Vue: paste into index.html. Nuxt: add it to the app head config.

  1. Vue (Vite): open index.html in the project root and paste the snippet above </body>.

    index.html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  2. Nuxt: add the script in nuxt.config.ts.

    nuxt.config.ts
    export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: "https://tonetuned.rjscode.com/embed.js?agent=YOUR_AGENT_ID", async: true, tagPosition: "bodyClose" }],
    },
  },
});

Angular

Paste the snippet into src/index.html.

  1. Open src/index.html and paste the snippet above </body>. Rebuild and deploy.

    src/index.html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

Svelte and SvelteKit

Paste the snippet into the app shell.

  1. SvelteKit: open src/app.html and paste the snippet above </body>. Svelte with Vite: use index.html.

    src/app.html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

Astro

Add the snippet to your base layout with is:inline so Astro leaves it alone.

  1. Open your base layout (often src/layouts/Layout.astro) and paste this above </body>:

    Layout.astro
    <script is:inline src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

Node, PHP, Python, Ruby and other server-rendered sites

Paste the snippet into the one layout or footer template every page uses.

  1. Find your shared layout template and paste the snippet above </body>:

    html
    <script src="https://tonetuned.rjscode.com/embed.js" data-agent="YOUR_AGENT_ID" async></script>

  2. Usual places: Express with EJS or Pug: views/layout.ejs or the footer partial. Laravel: resources/views/layouts/app.blade.php. Django and Flask: templates/base.html. Rails: app/views/layouts/application.html.erb. Plain PHP: footer.php. Hugo: layouts/_default/baseof.html. Jekyll: _layouts/default.html.

  3. Deploy and reload. No server code, package or API key is needed.

Check it works

  1. Open your site in a private window. A Chat button appears in the bottom-right corner.
  2. Ask a question you added as knowledge. The answer should use it.
  3. The conversation appears in your dashboard within a few seconds.

If the button doesn't appear

  • Check the id. It must match the one on your assistant's Install tab exactly. YOUR_AGENT_ID left in place shows nothing.
  • Clear caches. Caching plugins, CDNs and the browser can serve the old page for a while.
  • Look at the published site. Most builders don't run scripts inside their editor or preview.
  • Content Security Policy. If your site sends a CSP header, allow the widget: add https://tonetuned.rjscode.com to both script-src and frame-src.
  • The assistant replies that it is unavailable. The monthly message limit is reached. Your dashboard shows usage and how to continue.

Still stuck? Email the page address to rjs@rjscode.com and we'll look. Managing assistants from code? See the API and MCP reference.