Integrations Guide

Connect Bots and Space to your favorite platforms with our simple one-line embed script. No complex API setup required.

HTML / Vanilla JS

Add Bots and Space to any static website or custom-built CMS.

Copy the script tag from your dashboard "Embed" tab.

Paste the code just before the closing </body> tag of your website.

Refresh your browser – the chat widget will appear automatically.

<script 
  src="https://botsandspace.com/loader.js" 
  data-bot-id="YOUR_BOT_ID" 
  data-api-key="YOUR_API_KEY" 
  defer
></script>

Pro Tip

You can customize the color and position of your widget in the Appearance settings of your dashboard without changing this code.

WordPress

Integration guide for WordPress sites using the block editor or plugins.

Navigate to Appearance > Theme File Editor or use a "Header and Footer" plugin.

Paste your Bot script tag into the footer section.

Save changes and clear your site cache.

<!-- Use a "Custom HTML" block or Header/Footer plugin -->

Pro Tip

You can customize the color and position of your widget in the Appearance settings of your dashboard without changing this code.

Shopify

Enable AI chat features on your Shopify store in minutes.

In Shopify Admin, go to Online Store > Themes.

Click "..." and select "Edit Code".

Open the theme.liquid file.

Scroll to the bottom and paste the script before </body>.

Save the file.

<!-- Add to theme.liquid before </body> -->

Pro Tip

You can customize the color and position of your widget in the Appearance settings of your dashboard without changing this code.

React / Next.js

Optimal implementation for modern React-based frameworks.

Import the Script component from next/script.

Add the script to your Root Layout file.

Ensure strategy="afterInteractive" for best performance.

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://botsandspace.com/loader.js"
          data-bot-id="YOUR_BOT_ID"
          data-api-key="YOUR_API_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pro Tip

You can customize the color and position of your widget in the Appearance settings of your dashboard without changing this code.

Need help with a different platform?

Our support team is available to help you integrate Bots and Space into any technical environment.

Get Started Free

import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://botsandspace.com/loader.js" data-bot-id="YOUR_BOT_ID" data-api-key="YOUR_API_KEY" strategy="afterInteractive" /> </body> </html> ) }