Skip to main content

Practical Examples

1) Auto-open after 10 seconds

setTimeout(() => window.homieBot.open(), 10_000);

2) Trigger an intent on a PDP

window.homieBot.sendMessage({
  text: 'Show me similar drills.',
  setId: 'pdp-questions-set-123',
});

3) Open after scroll depth

function openAfterScroll(px = 600) {
  const onScroll = () => {
    if (window.scrollY > px) {
      window.homieBot.open();
      window.removeEventListener('scroll', onScroll);
    }
  };
  window.addEventListener('scroll', onScroll, { passive: true });
}
openAfterScroll();

Robust loading: event-first, polling fallback

The embed dispatches browser events when it is ready. Prefer listening for these instead of polling. When the API is available (window.homieBot is set), the embed fires homiebot:api-ready:
window.addEventListener('homiebot:api-ready', (e) => {
  const { chatbotId } = e.detail;
  console.log('Homie API ready', chatbotId);
  window.homieBot.open();
});
When the assistant is fully ready (e.g. for sendMessage / getHistory), listen for homiebot:assistant-ready:
window.addEventListener('homiebot:assistant-ready', () => {
  window.homieBot.sendMessage({ text: 'Hello', newChat: false });
});
If your script runs after the embed may already be ready, check once and then listen:
if (window.homieBot) {
  if (window.homieBot.isReady()) {
    window.homieBot.open();
  } else {
    window.addEventListener('homiebot:assistant-ready', () => window.homieBot.open(), { once: true });
  }
} else {
  window.addEventListener('homiebot:api-ready', () => window.homieBot.open(), { once: true });
}
Fallback (older embed versions without events): use a small polling helper:
function waitForHomie() {
  return new Promise((resolve) => {
    if (window.homieBot) return resolve(window.homieBot);
    const iv = setInterval(() => {
      if (window.homieBot) {
        clearInterval(iv);
        resolve(window.homieBot);
      }
    }, 200);
  });
}
await waitForHomie();
window.homieBot.open();