Install the chat widget

The widget is one script that loads asynchronously from sdk.chatisto.com. It does not block your page, and it is safe to include more than once.

1. Find your public key

Every website you connect is an integration, and each one has its own public key.

1. Open the Chatisto app and select your integration.
2. Go to Settings → General.
3. Copy the snippet under Integration Snippet. It already contains your public key.

The public key is not a secret. It only identifies which integration the widget belongs to.

2. Add the snippet

Plain HTML (works everywhere)

Paste this just before the closing </body> tag on every page where the chat should appear:

<script>
(function () {
    var script = document.createElement('script');
    script.src = 'https://sdk.chatisto.com/chatisto-sdk.js';
    script.async = true;
    script.onload = function () {
        window.chatistoLoader.LoadChatisto({
            publicKey: 'YOUR_PUBLIC_KEY',
            autoOpen: false
        });
    };
    document.body.appendChild(script);
})();
</script>

Next.js (App Router)

Create a client component and render it once in your root layout:

// components/Chatisto.tsx
'use client';
import { useEffect } from 'react';

export default function Chatisto() {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://sdk.chatisto.com/chatisto-sdk.js';
        script.async = true;
        script.onload = () =>
            window.chatistoLoader.LoadChatisto({ publicKey: 'YOUR_PUBLIC_KEY' });
        document.body.appendChild(script);
    }, []);

    return null;
}

// app/layout.tsx
import Chatisto from '@/components/Chatisto';

export default function RootLayout({ children }) {
    return (
        <html>
            <body>
                {children}
                <Chatisto />
            </body>
        </html>
    );
}

React

Use the same component as for Next.js (without 'use client') and render <Chatisto /> once near the root of your app.

Nuxt

Create plugins/chatisto.client.ts. Nuxt loads it automatically, on the client only:

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('app:suspense:resolve', () => {
        const script = document.createElement('script');
        script.src = 'https://sdk.chatisto.com/chatisto-sdk.js';
        script.async = true;
        script.onload = () =>
            window.chatistoLoader.LoadChatisto({ publicKey: 'YOUR_PUBLIC_KEY' });
        document.body.appendChild(script);
    });
});

Shopify

1. In Shopify admin go to Online Store → Themes.
2. On your current theme click ⋯ → Edit code.
3. Open layout/theme.liquid and paste the HTML snippet just before </body>.
4. Save.

WordPress

Use the Chatisto WordPress plugin. No theme edits needed. If you prefer not to use a plugin, paste the HTML snippet into your theme footer or a "header & footer scripts" plugin.

Framer

Install the Chatisto plugin from the Framer plugin marketplace, paste your public key and click Install Widget. Then publish your site.

Loader options

LoadChatisto() accepts these options:

Embedding inline, for example on a dedicated "Support" page:

window.chatistoLoader.LoadChatisto({
    publicKey: 'YOUR_PUBLIC_KEY',
    targetElement: '#support-chat',
    fitToTargetElement: true
});

Tip: You can also make the window open automatically for every visitor with Settings → Client Settings → Open Window Automatically, without touching code.

3. Check it works

Open your website in a private browser window. Within a few seconds the chat bubble should appear in the corner. Send a test message and it shows up in your Inbox.

If the widget doesn't appear:

• Wrong key. Compare the publicKey with the one under Settings → General.
• Script stripped. Some caching and "optimization" plugins defer or remove third-party scripts. Exclude sdk.chatisto.com from them.
• Content Security Policy. If your site sends a CSP header, allow https://sdk.chatisto.com in script-src and frame-src, and allow https://fresh-api.chatisto.com and wss://ws-api.chatisto.com in connect-src.
• Console errors. Open the browser developer tools. Failed to load Chatisto SDK means the script couldn't be downloaded.

Next steps

• Customize the widget to match your brand.
• Train the AI agent on your website and documents.
• Pass user data from your app, so operators know who they're talking to.