Add live chat to your website

The most direct way to try tkit.ai is to put the widget on a real page: create a workspace, copy its generated snippet, paste it into your site, and send a test message.

This guide walks through the first install — for a plain HTML site and for a Next.js app. The code change is small, but allow time to deploy and test it in your own environment.

1. Create a workspace

Your workspace is where conversations, settings, teammates, and domains live. If you run more than one product or client site, create one workspace per brand. That keeps messages and settings from blending together later.

After the workspace is ready, open the settings area for that workspace.

2. Copy the widget snippet

The widget snippet contains a widget ID tied to your workspace, so it tells tkit.ai where new messages should go. It looks like a small script tag:

<script
  src="https://cdn.tkit.ai/widget.js"
  data-widget-id="your-widget-id"
  async
></script>

Use the snippet from your own workspace rather than copying the placeholder above.

3. Add the chat widget to your site

For a plain HTML site, paste the snippet before </body>. That lets the page load first and the widget initialize after the main content is available.

<body>
  <main>
    <!-- Your site -->
  </main>
 
  <script
    src="https://cdn.tkit.ai/widget.js"
    data-widget-id="your-widget-id"
    async
  ></script>
</body>

For a Next.js app, use next/script and load the widget after the page becomes interactive:

import Script from "next/script";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.tkit.ai/widget.js"
          data-widget-id="your-widget-id"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

afterInteractive keeps the widget out of the initial server-rendered HTML work. As with any third-party script, the real performance effect depends on your page and visitors' devices, so measure the deployed page instead of assuming a score.

A note from our own integration work

We use the same https://cdn.tkit.ai/widget.js URL and data-widget-id attribute in tkit.ai's generated Setup screen. Keeping those two values exactly as generated has prevented the most common documentation problem we have seen: a valid script paired with the wrong workspace identifier.

4. Send a test message

Reload your site, open the widget, and send a short message. You should see the conversation appear in your tkit.ai inbox.

If it does not show up, check three things:

• The script is present on the page
• The widget ID matches the generated snippet for your workspace
• The deployed website domain is allowed in your widget configuration

Frequently asked questions

Will the chat widget slow down my website?

The raw script uses async, so its download does not block HTML parsing. The Next.js example uses afterInteractive. Those loading choices reduce contention with initial rendering, but no third-party script can promise zero effect on Core Web Vitals. Test the deployed page with your normal performance tooling and representative devices.

Can I install the widget on more than one website?

Yes. Use the same snippet on each site, or create a separate workspace per site if the conversations should stay separated.

Does it work with React, Vue, or other frameworks?

Yes. The widget is a plain script tag, so it works anywhere HTML does. The Next.js example above translates directly to other frameworks' script-loading patterns.

Do I need a credit card to try it?

No credit card is required to create a workspace. See pricing for indicative plans and contact details.

What to do next

Once the first message lands, invite teammates and decide who owns new tickets. The goal is simple: every website conversation should have one obvious place to go, and your team should know where to answer it.

New to tkit.ai? Start with what tkit.ai is and why we built it.

Before announcing the widget, work through the live chat widget testing checklist for mobile layout, a round-trip conversation, navigation, and failure states. Still deciding how visitors should contact you? Compare live chat and contact forms.

Placing the tag in a Next.js layout or a Webflow footer is covered in add live chat to Next.js or Webflow.

For the product pages behind this install, read about the live chat widget, the shared inbox, AI website chat, and live chat for SaaS. If you already have a snippet, run it through the widget install check before you publish.