JavaScript chat widget: add AI-powered live chat to any website with a single script tag
One line of JavaScript. No npm packages, no framework dependencies, no build steps. Paste a script tag into your HTML and your website gets an AI chat widget that reads your content and answers visitor questions — on any stack, in 36 languages.
See how AI answers questions on your website
Paste any website URL below. The AI reads your pages and starts answering visitor questions using your own content — no setup, no configuration files, no API keys to manage.
Most chat widgets force you to adopt an entire ecosystem before you can greet a visitor
Adding live chat to a website should be simple. Instead, most chat widget solutions pull in a chain of dependencies that turns a five-minute task into an engineering project. You need an npm package, which requires Node.js, which requires a build pipeline, which requires a bundler configuration that plays nicely with whatever framework you happen to be using. The React wrapper does not work with your Vue project. The Angular module does not support your version. The vanilla JavaScript option exists technically but the documentation assumes you are already running Webpack with a module loader. Before a single visitor has asked a single question, you have burned hours wrestling with package managers, resolving peer dependency conflicts, and debugging build errors that have nothing to do with chat. Your marketing site built on plain HTML and CSS? Now it needs a Node environment just to display a chat bubble in the corner. Your agency client's WordPress site? Good luck explaining why they need to install Node on their hosting. Meanwhile, your actual goal — letting visitors ask questions and get answers — sits in the backlog behind infrastructure work that should never have been necessary. A chat widget is a UI element, not a platform commitment. Asyntai treats it that way. One script tag in your HTML — the same line of code regardless of whether your site runs React, Vue, Angular, Svelte, Astro, Next.js, plain HTML, a static site generator, a CMS, or a server-rendered framework you built yourself. No packages to install. No build configuration to maintain. No runtime dependency that breaks when you upgrade something else. The script loads asynchronously, renders the widget, and starts answering visitor questions using the content on your website.
- Works on every stack without adaptationReact single-page app, server-rendered PHP site, static HTML portfolio, Jekyll blog, Hugo documentation site, Rails application — the embed code is identical in every case. You paste the script tag before the closing body tag and the chat widget appears. There is no framework-specific wrapper to configure, no integration guide to follow, and no compatibility matrix to check. If the browser can run JavaScript, the widget works.
- Zero impact on your existing build pipelineThe widget loads from an external CDN as a standalone script. It does not enter your dependency tree, does not appear in your package.json, and does not participate in your build process. Upgrading React, switching from Webpack to Vite, or migrating from Vue 2 to Vue 3 has no effect on the chat widget. It operates independently of your application code, which means it never causes a build failure and never needs a version bump.
- Loads asynchronously without blocking page renderThe script tag uses the async attribute, so your page content loads first and the chat widget appears once the browser has finished rendering. Visitors see your content immediately — the widget initializes in the background without adding to your page load time. There is no flash of unstyled content, no layout shift, and no render-blocking resource slowing down your Lighthouse score.
Connect your backend APIs and let the chat widget pull live data during conversations
The chat widget answers visitor questions from your website content out of the box — product pages, documentation, pricing tables, FAQ sections, about pages. But some questions need real-time data that does not live on a static page. Custom Tools — available on Standard ($139/month) and Pro ($449/month) plans — let the AI chat widget call your own REST APIs during a conversation, so visitors get live answers instead of stale information.
- Real-time inventory and availabilityConnect a Custom Tool to your product API. When a visitor asks "is the 256GB model in stock?", the AI queries your inventory system and responds with current availability, expected restock dates, and pricing — pulled live from your database, not cached from a crawled page.
- Order status without a support ticketLet visitors type their order number into the chat widget and get an instant update. The AI calls your order tracking API and returns the shipping status, tracking number, and estimated delivery date. No support queue, no email back-and-forth, no phone hold time.
- Account and booking lookupsFor SaaS products, service businesses, and appointment-based sites, Custom Tools let the chat widget check subscription status, upcoming appointments, or account balances by querying your backend. A visitor asking "when is my next appointment?" gets the answer from your scheduling system in real time.
- Dynamic pricing and quotingIf your pricing depends on configuration, quantity, or customer segment, a Custom Tool can calculate quotes on the fly. The AI collects requirements through conversation — size, quantity, delivery speed — and calls your pricing endpoint to return an accurate quote without the visitor filling out a form.
- 36 languages with automatic detectionA visitor browsing your English-language website in Tokyo gets answers in Japanese. A visitor in São Paulo gets answers in Portuguese. The AI detects the visitor's language automatically and responds in kind — 36 languages supported on every plan, at no additional cost. Your website content does not need to be translated.
Add the JavaScript chat widget to your site
No packages, no CLI tools, no build steps. Four steps and your website has an AI-powered chat widget answering visitor questions.
- Pick a plan at asyntai.com/pricing — the Free tier gives you 1 site and 100 messages per month to test with real visitor traffic.
- Add your website URL in the dashboard. The AI crawls up to 50 pages — product descriptions, documentation, FAQ sections, pricing pages, about pages — and builds its knowledge base from your existing content.
- Customize the chat widget appearance. Set your brand colors, avatar, greeting message, and position. Add any supplementary content — PDFs, knowledge base articles, policy documents — as uploaded files to cover information beyond what your web pages contain.
- Copy the single-line script tag and paste it into your HTML — before the closing
</body>tag, in your template header, or wherever your site loads external scripts. The widget goes live immediately.
<script src="https://asyntai.com/widget.js"
data-id="your-site-id" async>
</script>
# No npm. No bundler. No dependencies.
# Works on React, Vue, Angular, or plain HTML.
JavaScript Chat Widget — FAQs
Common questions from developers and site owners about adding a JavaScript chat widget to their website.
Does this work with React, Vue, Angular, and other frameworks?
Yes. The chat widget loads as a standalone script from an external source — it does not interact with your framework's component tree, state management, or rendering cycle. You paste the same script tag into a React app, a Vue project, an Angular application, a Svelte site, or a plain HTML page. There is no framework-specific wrapper, no adapter package, and no integration step. The widget renders independently in the DOM and does not conflict with your application code. If your site runs JavaScript in a browser, the widget works on it.
Will it slow down my website?
No. The script loads asynchronously, which means it does not block your page from rendering. Your HTML, CSS, and above-the-fold content load first — the chat widget initializes in the background after the page is interactive. The script itself is lightweight and served from a CDN, so load times are minimal regardless of your visitor's location. It does not add to your critical rendering path and does not affect your Core Web Vitals or Lighthouse performance score.
How does the AI know what to say about my website?
When you add your website URL in the dashboard, the AI crawls up to 50 pages and reads the content — product descriptions, documentation, pricing information, FAQ pages, about pages, policy documents, and anything else publicly accessible. It uses this content to answer visitor questions. It does not generate information that is not on your site. You can also upload additional documents — PDFs, knowledge base articles, internal guides — to expand what the chatbot knows beyond your published web pages.
Can I customize the appearance to match my brand?
Yes. The dashboard lets you set the widget's primary color, text color, avatar image, greeting message, chat bubble position (left or right), and placeholder text. You can match it to your brand palette so it looks like a native part of your website rather than a third-party add-on. The customization is done through the dashboard UI — no CSS overrides or JavaScript configuration objects required.
Does it work on static sites and single-page applications?
Yes to both. On a static HTML site, the widget loads when the page loads and stays active as long as the visitor is on the page. On a single-page application — where navigation happens client-side without full page reloads — the widget persists across route changes automatically. A visitor can navigate through your entire SPA and the chat conversation continues uninterrupted. There is no special configuration needed for client-side routing.
Can the chat widget connect to my backend APIs?
Yes, through Custom Tools on Standard ($139/month) and Pro ($449/month) plans. You define your API endpoint in the dashboard, specify what parameters the AI should extract from the conversation, and the chat widget calls your API during conversations to pull live data. Common uses include inventory checks, order status lookups, appointment scheduling, and account balance queries. The AI handles the conversation naturally — visitors just ask their question, and the chatbot calls your API behind the scenes to get the answer.
What languages does the chat widget support?
The AI supports 36 languages and detects the visitor's language automatically. A visitor who types in Spanish gets a response in Spanish. A visitor who types in Japanese gets a response in Japanese. Your website content does not need to be translated — the AI reads your English-language pages and delivers answers in the visitor's language. Language support is included on every plan at no additional cost.
How much does it cost?
The Free tier gives you 1 site and 100 messages per month — enough to test the chat widget with real visitor traffic and see how the AI handles questions on your site. Starter is $39/month with 2,500 messages and 2 sites. Standard is $139/month with 15,000 messages, 3 sites, and Custom Tools for API integrations. Pro is $449/month with 50,000 messages, 20 sites, and white-label branding. All plans are month-to-month, no contracts. You can upgrade or cancel at any time.
Do I need to update the script tag when the widget gets new features?
No. The script tag points to a hosted URL that always serves the current version. When new features or improvements ship, your widget gets them automatically — no code changes on your end. The embed code you paste into your HTML today is the same code that will work next year. You never need to update a package version, run a migration, or change your integration.
JavaScript chat widget: the case for one line of code
There is a specific kind of frustration that comes from trying to add a simple feature to a website and discovering that the "simple" version requires a package manager, a build tool, and three configuration files. Chat widgets hit this nerve regularly. You want a small floating button in the corner of your site that lets visitors ask questions. The implementation guide starts with "npm install" and ends with a Webpack plugin. Somewhere along the way, the project shifted from "add chat to the site" to "modernize the build pipeline to support the chat widget's requirements." The tail is wagging the dog, and the visitor who just wanted to ask about your return policy is still staring at an empty page corner.
The JavaScript ecosystem moves fast, and the collateral damage of that speed is dependency fragility. A chat widget distributed as an npm package inherits every problem that npm packages carry: version conflicts with other packages in your project, breaking changes in minor releases, peer dependency warnings that may or may not matter, and the quiet anxiety of knowing that your chat feature depends on a tree of transitive dependencies maintained by strangers. When one of those dependencies publishes a bad update — and eventually one will — your chat widget breaks through no fault of your own. You are debugging someone else's supply chain at 9 AM on a Monday because a visitor reported that the chat button disappeared.
A script tag eliminates this category of problems entirely. The chat widget loads from a hosted URL, runs in its own scope, and does not participate in your build process. It has no entry in your package.json, no line in your lock file, and no node in your dependency graph. When you upgrade React from 18 to 19, the chat widget is unaffected. When you switch from Create React App to Vite, the chat widget is unaffected. When you migrate your marketing site from Gatsby to Astro, the chat widget is unaffected. It is a script tag in your HTML — the same deployment mechanism that has worked since 1995 — and it carries none of the coupling that modern package distribution introduces.
Performance is the other axis where a standalone script tag outperforms a bundled package. When a chat widget lives inside your application bundle, it adds to your bundle size. Every visitor downloads the chat widget code as part of your main JavaScript file, whether they interact with the chat or not. The widget's initialization runs during your application's startup sequence, competing for the main thread during the critical rendering path. A script tag with the async attribute loads independently — the browser fetches it in parallel with your application code and executes it after the page is interactive. The chat widget never appears in your bundle size analysis, never contributes to your Time to Interactive metric, and never causes a layout shift during initial render.
Agencies and freelancers who build websites for clients face a particularly acute version of the dependency problem. A client's marketing site is built on WordPress, Squarespace, Wix, or plain HTML served from shared hosting. The client does not have Node.js installed. The client does not have a build pipeline. The client does not know what npm is, and explaining it would take longer than the chat widget setup should. When the chat solution requires a Node environment, the agency has two choices: set up a build process on the client's hosting (which the client cannot maintain) or tell the client their platform is not supported. A script tag requires neither. The agency pastes one line of code into the site template, and the chat widget works. The client can see it working immediately. The handoff is clean because there is no development environment to maintain.
Single-page applications present a subtle challenge that most chat widget installations handle poorly. When navigation happens client-side — React Router, Vue Router, Angular's router — a naive chat implementation loses conversation state on every route change. The visitor asks a question on the pricing page, navigates to the features page, and the chat window resets. The Asyntai widget persists across client-side navigation automatically. The conversation continues uninterrupted regardless of how many times the visitor navigates within the application. This is not a configuration option you need to enable — it is default behavior because losing conversation state during navigation is a bug, not a feature.
The question of what the chat widget actually does with your website content is where the gap between traditional live chat and an AI-powered widget becomes most apparent. A traditional JavaScript chat widget is a communication channel — it connects a visitor to a human operator. If no operator is available, the visitor gets a "leave a message" form or an automated response that says nothing useful. An AI-powered chat widget reads your website content — up to 50 pages, crawled automatically when you add your URL — and uses that content to answer questions directly. A visitor asking "what are your shipping rates?" gets the answer from your shipping policy page. A visitor asking "do you offer a free trial?" gets the answer from your pricing page. The AI does not invent information. It reads what you have published and delivers it conversationally, which is what the visitor would do themselves if they had the patience to find the right page and the right paragraph.
The technical implementation of the script tag is deliberately minimal. You copy one line of HTML from your dashboard, paste it into your page template — before the closing body tag, in a head section, or wherever your site typically loads external scripts — and the widget appears. The script accepts a single data attribute: your site ID. There are no configuration objects to define in JavaScript, no initialization functions to call, no event listeners to wire up. The dashboard handles all configuration — colors, greeting message, position, avatar, behavior settings — so changes do not require code deployments. Your marketing team can adjust the chat widget's appearance and greeting without touching a code editor or waiting for a developer to push an update.
Language support is another area where the simplicity of the implementation belies the sophistication of the result. The AI detects each visitor's language automatically and responds in kind — 36 languages, from Arabic to Vietnamese, with no additional configuration. A visitor browsing your English-language website from Seoul types a question in Korean and gets an answer in Korean. A visitor from Berlin types in German and gets an answer in German. Your website content does not need to be translated. The AI reads your English-language pages and delivers the answer in whatever language the visitor uses. This happens on every plan, including Free, with no language packs to install and no translation files to maintain.
For sites that need the chat widget to do more than answer from static content, Custom Tools on Standard and Pro plans let the AI call your own REST APIs during a conversation. A visitor asks "is my order shipped yet?" and the AI extracts the order number, calls your fulfillment API, and returns the tracking information. A visitor asks "do you have the blue version in medium?" and the AI queries your inventory endpoint. This turns the chat widget from a content-retrieval tool into a self-service interface for your backend systems — without building a chatbot framework, writing dialog flows, or managing conversation state. You define the API endpoint and the parameters. The AI handles the conversation naturally.
Security-conscious developers often ask about the implications of loading a third-party script. The widget runs in the browser's standard execution context — the same way analytics scripts, font loaders, and marketing pixels run. It does not access your application's JavaScript scope, does not read cookies set by your application, and does not modify your DOM beyond the container it creates for the chat interface. The widget communicates with the Asyntai backend over HTTPS to send visitor messages and receive AI responses. Conversation data is processed to generate answers and is not used to build profiles or sold to third parties.
The cost structure reflects the reality that most websites do not need enterprise-grade chat infrastructure. The Free tier — one site, 100 messages per month — lets you embed the widget on a personal project, portfolio site, or small business page and see how visitors interact with it. A hundred messages is enough to evaluate the quality of the AI's responses on your specific content. If it works, the Starter plan at $39 per month covers 2,500 messages and two sites, which handles the traffic of most small to mid-sized business websites comfortably. Standard at $139 per month adds Custom Tools for API integrations and 15,000 messages across three sites. Pro at $449 per month is designed for agencies and businesses running the widget on multiple properties — 20 sites, 50,000 messages, white-label branding, and full API integration capabilities.
Documentation sites are an underappreciated use case for an AI chat widget. Developers build documentation with static site generators — Hugo, Jekyll, Docusaurus, MkDocs, VitePress — and the result is dozens or hundreds of pages covering APIs, configuration options, tutorials, and troubleshooting guides. Visitors to documentation sites are looking for specific answers: "How do I authenticate with the API?" "What are the rate limits?" "Why does this error occur?" They have to navigate a sidebar, search through pages, and scan for the relevant section. An AI chat widget that reads the documentation content lets them ask the question directly and get the specific answer — pulled from the correct page, delivered in a sentence instead of a page. For open-source projects and developer tools, this turns documentation from a reference you search through into a resource you converse with.
The widget's behavior on mobile devices is worth mentioning because mobile is often where chat widgets fail. Screen real estate is limited, and a poorly implemented widget either covers the page content, creates scroll-trapping issues, or renders at an unusable size. The Asyntai widget is responsive by default — it adapts to the viewport, uses appropriate touch targets for mobile interaction, and opens as a full-screen overlay on small screens so the conversation is readable without squinting. Closing the chat restores the page exactly as it was. There is no special mobile configuration. The same script tag that works on desktop works on mobile, tablet, and everything in between.
One script tag. No dependencies. AI that reads your website and answers visitor questions in 36 languages. Start with the Free plan and see it working on your site in five minutes — or go to Standard for Custom Tools and API integration.