Web Agent

Web Agent adds your Querygen Full Agent to a website as a responsive chat widget. Querygen hosts the browser SDK and the chat service; your site only needs the installation snippet generated for the selected agent.

Before You Install

In AI Agent, create and activate a Full Agent.
Open Settings > Channels > Web Agent and select the agent that should answer website visitors.
Add every website that will host the widget under Allowed origins, then enable and save the channel.

Important: Enter one exact origin per line, including the protocol and port when applicable—for example, https://www.example.com or http://localhost:3000. Paths and wildcards are not accepted.

Install the SDK

Copy the installation snippet shown in Web Agent settings and paste it before the closing </body> tag on your site. The channel ID is public and identifies the selected agent; do not replace it with an API key.

Browser SDK installation

<script src="https://mediafiles.querygen.ai/widget-sdk/querygen-chat/v1/widget.js"></script>
<script>
  QuerygenChat.init({
    channelId: "YOUR_PUBLIC_CHANNEL_ID",
    apiBase: "https://app.querygen.ai"
  });
</script>

Publish the page, then open it from an allowed website address and send a test message. You can also use Preview widget in Web Agent settings before publishing. A visitor can continue the same chat while moving between pages on your site.

Customize in Querygen

The Appearance and content panel is the recommended place for shared branding. You can change the header title, welcome message, input placeholder, launcher text and icon, launcher position, chat window position, suggestion pills, and the header, launcher, visitor, and agent bubble colors. Choose a light, dark, or automatic visitor theme and optionally provide separate dark-mode colors.

Saved changes are fetched whenever the SDK loads, so you do not need to replace the installation code. The preview checks color contrast and shows both light and dark appearances before you save.

Tip: Use the centered window for a focused, modal conversation. Choose bottom right for a compact chat that leaves the page visible; in that mode, the launcher and panel stay on the right.