Developer Quick Start

Add contextual AI assistance to your web application with a single script tag.

Choose your integration method

Appilot offers two integration paths:

Method	Best for	Setup time
Embeddable Widget	Your web application's pages	~5 minutes
Chrome Extension	Internal tools across your organization	~10 minutes

Most developers start with the Widget: it's the fastest way to give your users AI assistance without asking them to install anything.

Widget Quick Start

1. Register your domain

Go to the Backoffice and register the domain where the widget will run. This is what tells Appilot which organization the widget belongs to. (For localhost/dev, generate a wk_test_ Widget Key instead, since there is no registered domain locally. See Do I need an API key?.)

2. Add the script tag

On a registered domain, no key is needed:

<script src="https://cdn.appilot.com/widget/v1/appilot.js" async></script>

3. That's it

The widget renders a floating assistant button on your page. Users click it to open the side panel and ask questions. No orgId or API key needed in the script: the domain selects your organization.

4. (Optional) Configure behavior

<script
  src="https://cdn.appilot.com/widget/v1/appilot.js"
  data-position="bottom-right"
  data-theme="light"
  data-language="en"
  async
></script>

What happens next?

1. Populate your knowledge base: the widget is only as helpful as the knowledge behind it. Go to the Backoffice to add knowledge content for your domains and pages.

2. Configure domains: register the domains and URL patterns where Appilot should be active. See Domain Configuration.

3. Upload documentation: if you have existing docs (PDFs, SOPs), upload them as RAG files so the assistant can reference them. See RAG Files.

Architecture overview

┌─────────────────────────────┐
│     Your Web Application    │
│                             │
│  ┌───────────────────────┐  │
│  │   Appilot Widget      │  │
│  │   (Web Component)     │  │
│  │   ┌─────────────────┐ │  │
│  │   │  Shadow DOM      │ │  │
│  │   │  (Isolated UI)   │ │  │
│  │   └─────────────────┘ │  │
│  │   │                   │  │
│  │   │ Reads page DOM    │  │
│  └───┼───────────────────┘  │
│      │                      │
└──────┼──────────────────────┘
       │ HTTPS
       ▼
┌──────────────────────────────┐
│     Appilot Backend API      │
│  ┌──────────┐ ┌───────────┐  │
│  │Knowledge │ │    AI     │  │
│  │  Base    │ │ Provider  │  │
│  └──────────┘ └───────────┘  │
└──────────────────────────────┘

The Widget uses Web Component with Shadow DOM technology:

• DOM access: Reads the host page's forms, fields, and structure for context
• Style isolation: Shadow DOM prevents CSS conflicts between your app and Appilot
• No iframes: Direct DOM access means better performance and full page awareness

For a deeper dive, see Architecture.