How to Embed an AI Chatbot on Any Website: Universal 1-Click Code Guide

Integrating an AI assistant on your website does not require complex API integrations or backend proxy servers. ChatCraft packages the entire interactive widget into a lightweight, standalone client bundle served from a global edge CDN.

Every bot created in ChatCraft generates a dedicated embed tag:

<!-- ChatCraft Universal AI Assistant -->
<script async src="https://chatcraftstdo.com/widget.js" data-bot-id="YOUR_BOT_ID"></script>

When the host browser encounters this tag, it loads the launcher button without blocking page rendering, initializes websocket or REST streaming connections, and paints the chat modal on demand when clicked.

WordPress powers over 40% of the web. Adding your ChatCraft chatbot to any WordPress theme takes under two minutes:

Method A: Via Theme File Editor (Recommended)

1. In your WordPress Admin sidebar, navigate to Appearance > Theme File Editor.
2. In the right-hand template list, click on footer.php (Theme Footer).
3. Scroll to the bottom and locate the </body> tag.
4. Paste your ChatCraft embed code on the line immediately above </body>.
5. Click Update File.

Method B: Via Free Header & Footer Plugin

1. Install and activate the free plugin WPCode (Insert Headers and Footers).
2. Go to Code Snippets > Header & Footer.
3. Paste your embed tag in the Footer section.
4. Click Save Changes.

Equipping your Shopify e-commerce store with an AI shopping concierge reduces cart abandonment and automates return questions:

1. Log in to your Shopify Admin and go to Online Store > Themes.
2. Click the ... (Three dots) next to your current active theme and select Edit code.
3. In the left navigation, open Layout > theme.liquid.
4. Scroll to the bottom of the file to find the closing </body> tag.
5. Paste your ChatCraft script immediately before </body>.
6. Click Save in the top right corner. The floating chat launcher will appear immediately across all product pages, collections, and checkout previews.

Modern visual design platforms make script injection effortless:

In Webflow:

1. Open your Webflow Project Dashboard.
2. Navigate to Project Settings > Custom Code.
3. In the Footer Code block, paste your ChatCraft script tag.
4. Click Save Changes and Publish to your selected domains.

In Framer:

1. Open your project settings in Framer.
2. Go to General > Custom Code.
3. Under End of <body> tag, paste the snippet.
4. Publish the updated build.

For custom web applications built with React or Next.js, use the native script component or a useEffect hook:

Next.js App Router (next/script):

import Script from 'next/script';

export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://chatcraftstdo.com/widget.js"
data-bot-id="YOUR_BOT_ID"
strategy="lazyOnload"
/>
</body>
</html>
);
}

Using strategy="lazyOnload" instructs Next.js to fetch the chat widget during browser idle time, preserving a perfect 100 Lighthouse performance score.

Google rewards websites with fast Core Web Vitals (CWV). An unoptimized widget that causes layout shifts or delays Largest Contentful Paint (LCP) damages organic rankings.

ChatCraft's widget architecture is engineered specifically for CWV protection:

• Zero CLS: The launcher button uses fixed viewport positioning (position: fixed; bottom: 24px; right: 24px;), ensuring zero Cumulative Layout Shift to existing content elements.
• Asynchronous Execution: Scripts load with the async attribute, meaning HTML parsing is never interrupted.
• Tiny Initial Footprint: The initial launcher shell weighs under 18 kB gzipped; chat history and streaming components are loaded dynamically only when the visitor opens the widget.