Alcedo AI Assistant Integration Guide

Follow this guide to add the Alcedo AI Assistant widget to your application. You can use it in plain HTML websites, React apps, Next.js, and other popular frameworks.

Script Snippet

Add this script snippet to your site. Replace ALCEDO_ID with the ID provided to you.

You can configure the widget using data attributes:

data-auto-open="true" → open the chat automatically
data-delay-s="3" → optional number of seconds to delay before opening the chat
data-mobile-size="medium" → widget button size on mobile
data-desktop-size="large" → widget button size on desktop
data-b-m="medium" → mobile bottom offset bucket
data-r-m="medium" → mobile right offset bucket
data-b-d="xlarge" → desktop bottom offset bucket
data-r-d="medium" → desktop right offset bucket
data-theme="light" → set the chat interface theme to light or dark
data-z-index="9999" → optional z-index for the widget

<script
  src="https://alcedo.loopspeed.co.uk//api/ALCEDO_ID/widget.js"
  data-auto-open="true"
  data-delay-s="3"
  data-theme="light"
  data-mobile-size="medium"
  data-desktop-size="large"
  data-b-m="medium"
  data-r-m="medium"
  data-b-d="xlarge"
  data-r-d="medium"
  data-z-index="9999"
  defer></script>

Usage

Plain HTML

Paste the snippet before the closing </body> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body>
    <h1>Hello World</h1>

    <!-- Alcedo AI Assistant -->
    <script
      src="https://alcedo.loopspeed.co.uk/api/ALCEDO_ID/widget.js"
      data-auto-open="true"
      data-delay-s="3"
      data-mobile-size="medium"
      data-desktop-size="large"
      data-b-m="medium"
      data-r-m="medium"
      data-b-d="xlarge"
      data-r-d="medium"
      data-z-index="9999"
      defer></script>
  </body>
</html>