SDK Integration

The Appilot SDK lets your application declare which view (page/section) the user is currently on. This gives the AI assistant perfect context without relying on URL matching or DOM scraping.

Quick Start

Add this to your application:

<script>
  window.__appilot = { view: 'dashboard' };
</script>

The view value should match the slug or path of a view configured in your Appilot backoffice.

Reactive Updates (SPAs)

For single-page applications where the user navigates without full page reloads:

Option 1: Update the property directly

// When user navigates to a new page
window.__appilot = { view: 'modules/editor' };

Option 2: Use the CustomEvent API

window.dispatchEvent(new CustomEvent('appilot:viewchange', {
  detail: { view: 'modules/editor' }
}));

The extension and widget listen for this event and immediately re-detect the view.

Framework Examples

React

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function AppilotViewSync() {
  const location = useLocation();

  useEffect(() => {
    const viewMap = {
      '/': 'home/dashboard',
      '/modules': 'modules/list',
      '/settings': 'settings/general',
    };

    const view = viewMap[location.pathname];
    if (view) {
      window.dispatchEvent(new CustomEvent('appilot:viewchange', {
        detail: { view }
      }));
    }
  }, [location.pathname]);

  return null;
}

Vue 3

<script setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

watch(() => route.path, (path) => {
  const viewMap = { '/': 'home/dashboard', '/modules': 'modules/list' };
  const view = viewMap[path];
  if (view) {
    window.dispatchEvent(new CustomEvent('appilot:viewchange', {
      detail: { view }
    }));
  }
});
</script>

Vanilla JavaScript

// After any navigation or page transition
function notifyAppilot(viewPath) {
  window.dispatchEvent(new CustomEvent('appilot:viewchange', {
    detail: { view: viewPath }
  }));
}

// Example: after loading a new section
notifyAppilot('services/appointments/step-2');

When to Use the SDK

Scenario	Recommended Strategy
Traditional multi-page app	URL Pattern (auto-detected)
SPA with meaningful URLs	URL Pattern (auto-detected)
SPA where URL doesn't change (Vaadin, GWT)	SDK or DOM Selector
App you control the source code of	SDK (most reliable)
Third-party app you can't modify	DOM Selector or URL Pattern

The SDK is always the most reliable detection method because it's an explicit declaration from your application, not an inference from the DOM or URL.

Fallback Behavior

If the SDK is not integrated, the extension and widget automatically fall back to:

1. URL pattern matching
2. DOM selector matching
3. Page title matching

These are configured per-view in the Appilot backoffice.