← Back to Documentation
Bots and Space Logo
Bots and Space

API Documentation

Everything you need to integrate the Bots and Space widget into your website

Basic Integration

Add the Bots and Space chatbot to any website by including a single script tag.

Standard Embed

<script
  src="https://www.botsandspace.com/widget.js"
  data-bot-id="your-bot-id"
></script>

Replace your-bot-id with your actual bot ID from the dashboard.

Tip: Place this code just before the closing </body> tag for optimal performance.

Configuration Options

Customize The widget behavior using data attributes.

Advanced Configuration

<script
  src="https://www.botsandspace.com/widget.js"
  data-bot-id="your-bot-id"
  data-api-key="your-api-key"
  data-session-token="custom-session-id"
></script>

data-bot-id (required)

Your unique bot identifier. Find this in your dashboard under "Embed Code".

data-api-key (optional)

Your production API key for authenticated requests. Use this for production environments to track usage properly.

data-session-token (optional)

Custom session identifier for tracking specific users across visits. Useful for authenticated user tracking.

Customization

Most customization is done through the dashboard, but you can override certain settings programmatically.

Dashboard Settings

Configure these options in the "Appearance" tab of your bot dashboard:

  • •
    Primary Color:Customize button and accent colors to match your brand
  • •
    Logo Upload:Replace the default icon with your company logo
  • •
    Welcome Message:Set a custom greeting message
  • •
    Suggested Prompts:Add quick-start questions for users
  • •
    Widget Position:Choose bottom-right or bottom-left placement

Platform-Specific Integration

WordPress

  1. 1. Go to Appearance → Theme Editor
  2. 2. Open footer.php or theme functions
  3. 3. Add the embed code before </body>
  4. 4. Save and publish

Shopify

  1. 1. Go to Online Store → Themes
  2. 2. Click Actions → Edit code
  3. 3. Open theme.liquid
  4. 4. Paste code before </body>

Next.js / React

  1. 1. Add script to _document.js (Next.js)
  2. 2. Or use useEffect to load dynamically
  3. 3. Perfect for SPAs and SSR apps

HTML / Custom Sites

  1. 1. Open your HTML file
  2. 2. Add script before </body>
  3. 3. Works with any static site

Best Practices

✓ Performance

Load the widget asynchronously using the defer attribute to prevent blocking page load.

✓ Security

Use the data-api-key attribute for production to ensure proper usage tracking and access control.

✓ User Experience

Test the widget on mobile devices and ensure it doesn't overlap with other floating elements like cookie banners or live chat buttons.

Need Help?

If you're having trouble integrating the widget, we're here to help.