How to Embed a Chat Widget on Any Web Page

How the Embed Code Works

Every chatbot you create gets a unique URL that loads the chat interface. The URL follows this pattern:

https://api.aiappsapi.com/{yourAccountID}/chatbot/loadchatbot/{chatbotID}

Your account ID and chatbot ID are filled in automatically when you copy the embed code from your admin panel. The URL loads a self-contained chat interface with the message input, conversation history, and connection to your chatbot's AI model and knowledge base. No additional scripts or stylesheets are needed on your end.

The platform provides a CSS file and a small JavaScript file that create the floating button and slide-out panel. When a visitor clicks the button, the panel opens and loads your chatbot's iframe inside it. The JavaScript handles opening, closing, and positioning the panel, so you do not need to write any custom code.

Embedding on Different Platforms

Static HTML Sites

Paste the embed code directly before the closing </body> tag in each HTML file where you want the chatbot to appear. If you use a shared template or include file for your layout, add it there once and it will show on every page.

WordPress

Go to Appearance, then Widgets (or the Theme Customizer), and add a Custom HTML widget to your footer area. Paste the embed code there. Alternatively, many themes have a "Custom Scripts" or "Footer Code" section in their settings where you can paste code that appears on every page. If your theme does not offer either option, you can add the code to your theme's footer.php file directly.

Shopify

Go to Online Store, then Themes, click Actions, and select Edit Code. Open the theme.liquid file and paste the embed code just before the closing </body> tag. Save the file and the chatbot will appear across your entire store.

Squarespace, Wix, and Other Builders

Most website builders have a "Code Injection" or "Custom Code" section in their settings. Look for the option to add code to the footer of every page. Paste your embed code there. Squarespace puts this under Settings, then Advanced, then Code Injection. Wix allows custom code through the Velo developer tools or through their Custom Code section in Site Settings.

Single-Page Applications (React, Vue, Angular)

Add the embed code to your root HTML file (usually index.html) before the closing body tag. Since SPAs load once and handle routing internally, the chatbot widget will persist across all views without reloading. If you need to conditionally show or hide the chatbot on certain routes, you can toggle the visibility of the chat wrapper element using your framework's DOM manipulation.

Customizing Widget Appearance

The default chat button appears in the bottom-right corner of the page with a "Support Chat" label. You can adjust the button text, position, and colors by modifying the CSS classes that come with the embed code. The main classes are #chat-launcher for the button and #chat-panel for the conversation panel.

Common customizations include changing the button color to match your brand, moving the button to the bottom-left corner, changing the button text from "Support Chat" to something like "Ask Us Anything" or "Chat with AI", and adjusting the panel width on desktop screens.

Mobile Behavior

The chat widget is responsive by default. On mobile devices, the panel expands to fill most of the screen width so visitors can type comfortably. The chat button scales down slightly to avoid blocking important page content. Test the widget on a phone after embedding to make sure it does not cover navigation elements or call-to-action buttons on your specific layout.

Multiple Chatbots on One Site

If you need different chatbots on different pages (for example, a sales chatbot on product pages and a support chatbot on help pages), you can use different embed codes on different page templates. Each chatbot has its own unique URL and operates independently with its own knowledge base and system prompt.