Add IntelliDesk to your website or app

<script src="https://YOUR_APP/widget.js" data-agent="AGENT_SLUG_OR_ID" async></script>

<script>
  // Lets your code call intellidesk(...) before widget.js has loaded: calls wait in a queue.
  window.intellidesk = window.intellidesk || function () {
    (window.intellidesk.q = window.intellidesk.q || []).push(arguments);
  };
  window.intellideskConfig = {
    showFloatingInitialMessages: true,
    floatingInitialMessagesDelay: 2,
    floatingMessagesOncePerSession: true
  };
</script>
<script src="https://YOUR_APP/widget.js" data-agent="AGENT_SLUG_OR_ID" async></script>

<iframe
  src="https://YOUR_APP/embed/AGENT_SLUG_OR_ID"
  title="Chat"
  width="420" height="720"
  allow="microphone; clipboard-write"
  style="border:0;border-radius:16px"
></iframe>

// app/layout.tsx (Next.js App Router): the queue, then the widget, once for every page.
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="intellidesk-queue" strategy="beforeInteractive">
          {`window.intellidesk = window.intellidesk || function () {
            (window.intellidesk.q = window.intellidesk.q || []).push(arguments);
          };`}
        </Script>
        <Script src="https://YOUR_APP/widget.js" data-agent="AGENT_SLUG_OR_ID" strategy="afterInteractive" />
      </body>
    </html>
  );
}

"use client";
// Signs the user in to the chat once your app knows who they are.
import { useEffect } from "react";

declare global {
  interface Window { intellidesk?: (...args: unknown[]) => void }
}

export function ChatIdentity({ user }: { user: { id: string; name: string; email: string } | null }) {
  useEffect(() => {
    if (!user) return;
    // Your server signs the user id (see /docs/identity) and returns { user_id, user_hash }.
    fetch("/api/intellidesk-identity")
      .then((r) => r.json())
      .then((signed) => window.intellidesk?.("identify", { ...signed, name: user.name, email: user.email }));
  }, [user?.id]);
  return null;
}

// In your logout handler:
window.intellidesk?.("resetUser");

window.intellidesk.open();                        // open the chat
window.intellidesk.open({ message: "Hi" });        // open it and send a message
window.intellidesk.close();
window.intellidesk.resetChat();                    // new conversation, same visitor
window.intellidesk.setInitialMessages(["Welcome back."]);
window.intellidesk.identify({ user_id: "u_123", user_hash: "…", name: "Ada" });
window.intellidesk.resetUser();                    // on logout: a new anonymous visitor
window.intellidesk.addEventListener("ready", (e) => console.log("chat loaded", e.agentId));
window.intellidesk.addEventListener("open", () => analytics.track("chat_opened"));
window.intellidesk.addEventListener("user-message", (e) => console.log(e.message));
window.intellidesk.addEventListener("assistant-message", (e) => console.log(e.message, e.conversationId));
window.intellidesk.addEventListener("error", (e) => console.warn("chat unavailable:", e.reason));

// The same calls in the queue form, which also works before widget.js has loaded:
window.intellidesk("open");
window.intellidesk("identify", window.intellideskUserConfig);

<script>
  window.intellideskConfig = { hideLauncher: true };   // or data-launcher="hidden" on the script tag
</script>
<script src="https://YOUR_APP/widget.js" data-agent="AGENT_SLUG_OR_ID" async></script>

<button onclick="window.intellidesk('open')">Chat with us</button>

window.intellideskUserConfig = {
  user_id: "u_123",
  user_hash: "HMAC_SHA256_HEX_FROM_YOUR_SERVER",
  name: "Ada",
  current_page: location.pathname,
};
window.intellidesk("identify", window.intellideskUserConfig);