Build with EchoAI

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  textConfig: {
    inputPlaceholder: 'Ask me anything...',
    sourcesLabel: 'Knowledge Sources',
    searchingText: 'Searching...',
    toolsText: 'Processing...',
    loadingText: 'Thinking...'
  }
});

const echoWidget = new EchoSDK({
  assistantIdentifier: 'dovjmm372762',
  floatingButton: {
    enabled: true,
    position: 'bottom_right',
    tooltip: 'Chat with us!',
    width: '400px',
    height: '600px'
  }
});

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  starterQuestions: [
    { question: 'What are your pricing plans?' },
    { question: 'How do I get started?' },
    { question: 'Can I see a demo?' }
  ]
});

// Dynamic questions based on current page
function getStarterQuestions() {
  const path = window.location.pathname;

  if (path.includes('/pricing')) {
    return [
      { question: 'Compare pricing plans' },
      { question: 'Do you offer discounts?' },
      { question: "What's included in each plan?" }
    ];
  }

  if (path.includes('/docs')) {
    return [
      { question: 'How do I install the SDK?' },
      { question: 'Show me code examples' }
    ];
  }

  // Use dashboard defaults
  return undefined;
}

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  starterQuestions: getStarterQuestions()
});

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  userContext: 'Company size: 50-100 employees, Industry: Healthcare, Plan: Pro'
});

// Structured context with JSON (recommended)
const user = await fetchCurrentUser();

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  userContext: JSON.stringify({
    userId: user.id,
    membershipTier: 'gold',
    companySize: '50-100 employees',
    accountAge: '2 years',
    cartItems: 3,
    rewardPoints: 1250
  })
});

// Dynamic context based on application state
function buildContext() {
  const user = getCurrentUser();
  const cart = getCartState();

  return JSON.stringify({
    name: user.firstName,
    plan: user.subscription.plan,
    cartTotal: cart.total,
    itemCount: cart.items.length,
    preferredLanguage: user.locale
  });
}

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  userContext: buildContext()
});

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  urlContextOptions: {
    // Pass the current page URL to the AI so it can ground answers in
    // the page the visitor is looking at. Currently disabled by default.
    autoDetect: true,
    // Or pin a specific URL regardless of the actual page:
    // customUrl: 'https://example.com/pricing'
  }
});

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  mode: 'preview',
  textConfig: {
    startButtonLabel: 'Start chatting'
  }
});

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  header: {
    enabled: true
  }
});

// Reset the conversation and start a fresh thread
await window.echoInstance.resetThread();

// Reset and set new context for the new thread at the same time
await window.echoInstance.resetThread({
  userContext: 'Plan: Pro, just upgraded'
});

// Update the context that the next new thread will use.
// Note: context is fixed for the lifetime of a thread — call this
// before resetThread() so the new thread picks up the change.
window.echoInstance.setUserContext('Plan: Pro, cart items: 3');

// Read back the current context
const ctx = window.echoInstance.getUserContext();

// Then start a new thread that uses it
await window.echoInstance.resetThread();

// Update options on a live instance (re-renders the widget)
window.echoInstance.update({
  theme: 'blue',
  textConfig: { inputPlaceholder: 'How can we help?' }
});

// Remove the widget entirely (cleans up the DOM and listeners)
window.echoInstance.unmount();

// Re-mount it into a (new) container
window.echoInstance.mount('#echo-chat');

// Catch errors raised by the auto-initialized instance
window.addEventListener('echo:error', (event) => {
  console.error('Echo error:', event.detail.error);
});

// React when the conversation is reset
window.addEventListener('echo:reset-thread', (event) => {
  console.log('New thread started with context:', event.detail.userContext);
});

// Mobile: the on-screen keyboard opened or closed
window.addEventListener('echo:keyboard-state', (event) => {
  console.log('Keyboard open:', event.detail.open);
});