Website widget

5 steps

1. Pick the agent

   Use the wise-pup sample (agent code A23WJF0199) while you build. For your own agent, keep Anonymous Share on in its sharing settings: the widgets open the agent’s public link, and its sessions bill your account.

   Expected

   https://bithuman.ai/A23WJF0199 opens the avatar in a browser tab.

   Done: step 1

2. Add the floating widget

   Paste this before </body>:

   <script src="https://www.bithuman.ai/widgets/bithuman-gadget.js"></script>
   <script>
     BitHumanGadget.init({
       agentUrl: "https://bithuman.ai/A23WJF0199?deployment=gadget",
       position: "bottom-right",
       buttonText: "Talk to us",
     });
   </script>

   Expected

   A button in the bottom-right corner. Select it: the avatar opens in a floating frame you can drag and resize, asks for the microphone, and answers when you speak.

   Done: step 2

3. Or add the chat widget

   The chat widget opens a side panel where visitors type, talk, or switch to video:

   <script src="https://www.bithuman.ai/widgets/bithuman-chat-widget.js"></script>
   <script>
     BitHumanChat.init({
       agentUrl: "https://bithuman.ai/A23WJF0199",
       defaultChatMode: "text",
       welcomeMessage: "Hi! How can I help?",
     });
   </script>

   Expected

   A floating card in the corner. Opening it shows the panel with the welcome message; the mode switch moves between text, voice and video.

   Done: step 3

4. Load it in React or Next.js

   In Next.js, load the script with next/script and call init when it has loaded:

   "use client";
   import Script from "next/script";
   
   declare global {
     interface Window { BitHumanGadget?: { init: (options: Record<string, unknown>) => void } }
   }
   
   export function AvatarWidget({ code }: { code: string }) {
     return (
       <Script
         src="https://www.bithuman.ai/widgets/bithuman-gadget.js"
         strategy="afterInteractive"
         onLoad={() => window.BitHumanGadget?.init({ agentUrl: `https://bithuman.ai/${code}?deployment=gadget` })}
       />
     );
   }

   Render <AvatarWidget code="A23WJF0199" /> once, in your root layout. In other React apps, add the two <script> tags to the page’s HTML, or put the web embed in an <iframe> (Web).

   Expected

   The widget's button appears on every page of the app. A second init call is ignored, so a re-render does not add a second widget.

   Done: step 4

5. Give it your persona and model

   The widget runs the agent’s managed conversation, so the persona and the model are settings on the agent, not code on your page. Set the persona as the agent’s system_prompt (Persona). To answer with your own model, connect any OpenAI-compatible endpoint with Providers and point the agent’s llm at it.

   Expected

   The next session answers in the new persona, with your model. Nothing on your page changed.

   Done: step 5

All steps done. Next: make it your own.