Add an AI chatbot to React / Vue / SPA

How to add the IntelliDesk AI support chatbot to React / Vue / SPA, step by step. It answers from your own content, captures leads and hands off to your team. Your snippet, with your agent filled in, is in the dashboard under Deploy → Install; it also confirms when the chat is live on your site.

Steps

Add this hook to your root component (App.tsx).
The widget survives client-side navigation, so load it once.

tsx

import { useEffect } from "react";

export function useIntelliDesk() {
  useEffect(() => {
    if (document.querySelector('script[data-agent="AGENT_SLUG_OR_ID"]')) return;
    const s = document.createElement("script");
    s.src = "https://YOUR_APP/widget.js";
    s.async = true;
    s.dataset.agent = "AGENT_SLUG_OR_ID";
    document.body.appendChild(s);
  }, []);
}

Open the chat from your own button with window.intellidesk.open().

Replace AGENT_SLUG_OR_ID with your agent's slug or id, and YOUR_APP with your IntelliDesk address.

Lock the chat to your domains: Deploy → Chat widget → Embed → Allowed domains.
Signed-in users? Identify them so the agent knows who it's talking to.
Open the chat from your own button, or react to messages: JavaScript API.
All guides: Platform guides.

Add an AI chatbot to React / Vue / SPA

Steps

Next