GuideAI

v0.5.5-15

An AI-powered voice assistant for any web page. Add GuideAI with a single script tag to help users navigate and complete tasks in your application.

Install

Drop two script blocks anywhere in your HTML — usually right before </body>. Everything the widget needs is included in the script.

<script src="https://cdn.getguide.ai/guideai/0.5.5-15/GuideAI.standalone.js"></script>
<script>
  GuideAI.embed({
    authKey: 'your-access-key',
    workspace: 'your-workspace',
  });
</script>

Props

The argument to GuideAI.embed() is an options object. Every widget prop listed below is supported.

Position Top

Place the floating mic with CSS offsets. Default is bottom-right:

GuideAI.embed({
  authKey: 'your-access-key',
  position: { bottom: '20px', right: '20px' },
});

position?: {
  top?: string;
  right?: string;
  bottom?: string;
  left?: string;
  marginTop?: string;
  marginRight?: string;
  marginBottom?: string;
  marginLeft?: string;
  transform?: string;
  zIndex?: number;  // base for GuideAI UI (default: 1300)
}

GuideAI.embed({
  authKey: 'your-access-key',
  position: { bottom: '20px', left: '20px' },
});

GuideAI.embed({
  authKey: 'your-access-key',
  position: {
    bottom: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
  },
});

GuideAI.embed({
  authKey: 'your-access-key',
  position: { top: '20px', right: '20px' },
});

Launcher Top

Choose how users open GuideAI: a floating mic (default) or an edge-docked side tab.

GuideAI.embed({
  authKey: 'your-access-key',
  launcher: { variant: 'tab' },
});

launcher?: {
  variant?: 'mic' | 'tab';   // default: 'mic'
  side?: 'left' | 'right';   // tab only (default: 'right')
}

GuideAI.embed({
  authKey: 'your-access-key',
  launcher: { variant: 'mic' },
  position: { bottom: '20px', right: '20px' },
});

GuideAI.embed({
  authKey: 'your-access-key',
  launcher: { variant: 'tab', side: 'left' },
});

Themes Top

Set the widget color palette with the theme option. All presets ship inside GuideAI.standalone.js — no extra scripts or CDN files are required.

GuideAI.embed({
  authKey: 'your-access-key',
  workspace: 'your-workspace',
  theme: 'dark',
});

Omit theme for the default palette (Studio blue, same as theme: 'dark').

Built-in presets

Light: light-ivory, light-snow, light-sand, light-mist, light-mint, light-sky, light-coral, light-rose, light-plum, light-slate

Dark: dark (Studio blue), dark-muted-gray, dark-midnight, dark-ocean, dark-forest, dark-teal, dark-violet, dark-ember, dark-carbon, dark-ruby, dark-graphite

Complete example Top

<script src="https://cdn.getguide.ai/guideai/0.5.5-15/GuideAI.standalone.js"></script>
<script>
  GuideAI.embed({
    authKey: 'your-access-key',
    workspace: 'your-workspace',
    environment: 'production',
    position: { bottom: '40px', right: '40px' },
  });
</script>

Signed-in users Top

If people sign in on your site, pass getUserInfo so GuideAI can recognize them across visits.

function getUserInfo() {
  if (!window.currentUser) return null;
  return { username: window.currentUser.email };
}

GuideAI.embed({
  authKey: 'your-access-key',
  getUserInfo: getUserInfo,
});

GuideAI.embed({
  authKey: 'your-access-key',
  workspace: 'your-workspace',
  initializeUserId: window.currentUser.id,
  getUserInfo: getUserInfo,
});

<script src="https://cdn.getguide.ai/guideai/0.5.5-15/GuideAI.standalone.js"></script>
<script>
  function getUserInfo() {
    if (!window.currentUser) return null;
    return {
      username: window.currentUser.email,
      displayName: window.currentUser.name,
    };
  }

  GuideAI.embed({
    authKey: 'your-access-key',
    workspace: 'your-workspace',
    getUserInfo: getUserInfo,
  });

  // After login or logout:
  // window.dispatchEvent(new CustomEvent('GUIDEAI_HOST_USERINFO_REFRESH'));
</script>

Workspaces Top

Each GuideAI workspace has a short slug — a stable id like sales or onboarding — that identifies it in the embed. Your GuideAI contact can provide the slugs for your account (alongside your access key).

workspace force-opens that workspace when the widget starts. Omit it to use your account default. Because it is just an embed option, you can add it conditionally in your own code (for example only on certain pages or for certain signed-in users).

// Always open a specific workspace
GuideAI.embed({
  authKey: 'your-access-key',
  workspace: 'sales',
});

// Conditionally force a workspace
GuideAI.embed({
  authKey: 'your-access-key',
  ...(shouldOpenSupport ? { workspace: 'support' } : {}),
});

workspaces (plural) is optional and limits which workspaces appear in the catalog — pass a slug, a comma-separated string, or an array. Omit it to load all workspaces for your account.

Getting your access key Top

To use GuideAI you need an access key. Contact the GuideAI team to get set up — they can also provide your workspace slugs.

Support Top

For questions, issues, or feature requests, contact the Guide AI team.

Last updated 2026-07-30 18:36 UTC. Pinned to v0.5.5-15.