Web Agent Developer

Use these optional website integrations when the same Web Agent needs different page copy, custom controls, or analytics. Start with the installation steps on Web Agent before adding code-level behavior.

Page-level Overrides

Options passed to QuerygenChat.init override saved settings for that page. Keep the generated channel ID and API base, then set only the copy or colors that should differ.

Page-level overrides

const chat = QuerygenChat.init({
  channelId: "YOUR_PUBLIC_CHANNEL_ID",
  apiBase: "https://app.querygen.ai",
  title: "Ask the Acme team",
  greeting: "Hi! What can we help you find?",
  theme: "system",
  panelPosition: "bottom-right",
  primaryColor: "#0f766e",
  launcherLabel: "Chat with us",
  suggestionPills: ["Track my order", "Show popular products"]
});

You can also override individual header, launcher, visitor bubble, and agent bubble colors. Use a HTTPS image URL for a custom launcher icon.

Control the Widget

Keep the object returned by init when your page needs to open, close, send through, or change the theme of the widget from its own controls.

Runtime controls

chat.open();
chat.send("I need help with my order");
chat.setTheme("dark");
chat.close();

Events and Cleanup

Subscribe to open, close, message, escalated, or error for analytics or page coordination. Each subscription returns an unsubscribe function.

Events and teardown

const stopListening = chat.on("message", (message) => {
  analytics.track("web_agent_message", { role: message.role });
});

// Run when the page or component unmounts.
stopListening();
chat.destroy();