Widget Integration Guide

Quick Start

Add the GuidMe widget to your website with a single script tag:

<script 
  src="https://widget.guidme.ai/v1/loader.js" 
  data-key="gm_live_xxxxxxxxxxxx"
></script>

That's it! The widget will appear as a floating button in the bottom-right corner.

Configuration Options

Basic Configuration (Data Attributes)

<script 
  src="https://widget.guidme.ai/v1/loader.js"
  data-key="gm_live_xxxxxxxxxxxx"
  data-api-url="https://api.guidme.ai"
  data-position="bottom-right"
  data-theme="auto"
  data-default-input="voice"
  data-default-output="voice"
  data-allow-text-input="true"
  data-allow-text-output="true"
  data-enable-screen-share="true"
  data-accent-color="#537FE7"
></script>

Configuration Reference

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | data-key | string | required | Your API key (starts with gm_live_) | | data-api-url | string | https://api.guidme.ai | Backend API URL | | data-position | string | bottom-right | Widget position: bottom-right, bottom-left, top-right, top-left | | data-theme | string | auto | Theme: light, dark, auto | | data-button-size | string | medium | Button size: small (40px), medium (48px), large (56px) | | data-default-input | string | voice | Default input mode: voice, text | | data-default-output | string | voice | Default output mode: voice, text | | data-allow-text-input | boolean | true | Allow users to switch to text input | | data-allow-text-output | boolean | true | Allow users to switch to text output | | data-enable-screen-share | boolean | true | Enable screen sharing for context | | data-show-transcript | boolean | false | Show live transcript with voice | | data-accent-color | string | #537FE7 | Brand color (hex) | | data-auto-open | boolean | false | Open widget on page load | | data-greeting | string | - | Custom greeting message | | data-z-index | number | 999999 | CSS z-index for widget | | data-container | string | - | CSS selector for custom container element |

Programmatic API

Initialization

window.GuidMe.init({
  apiKey: 'gm_live_xxxxxxxxxxxx',
  apiUrl: 'https://api.guidme.ai',
  position: 'bottom-right',
  theme: 'auto',
  defaultInputMode: 'voice',
  defaultOutputMode: 'voice',
  allowTextInput: true,
  allowTextOutput: true,
  enableScreenShare: true,
  accentColor: '#537FE7',
  
  onReady: () => console.log('Widget is ready'),
  onSessionStart: (session) => {},
  onSessionEnd: (session) => {},
  onMessage: (message) => {},
  onError: (error) => console.error('Widget error:', error)
});

Control Methods

window.GuidMe.open();
window.GuidMe.close();
window.GuidMe.toggle();
window.GuidMe.setInputMode('text');
window.GuidMe.setOutputMode('voice');
window.GuidMe.endSession();
window.GuidMe.destroy();

Get State

const isOpen = window.GuidMe.isOpen();
const session = window.GuidMe.getSession();
const config = window.GuidMe.getConfig();

Permissions

The widget will request:

  1. Microphone: Required for voice input
  2. Screen Sharing: Optional, for screen context (only during session)

Security

  • Use widget-scoped API keys (prefix: gm_live_). Never expose admin keys on the client.
  • Your domain must be in the app's allowed origins in the dashboard.
  • For strict CSP, add: frame-src https://widget.guidme.ai; connect-src https://api.guidme.ai https://generativelanguage.googleapis.com;

Support

  • Dashboard: https://guidme.ai
  • Email: support@guidme.ai