The site widget

The Web agent is your customer service placed directly on your pages, in a chat bubble. You build it, dress it in your colors, install it in one line, then review and rate every conversation from a single screen. Here is everything you control.

Create a website agent

A website agent is a brain that lives on your site, in a chat window at the bottom of the screen. It’s the same engine as your social agents: same instructions, same knowledge base, but with a channel of its own, your site, and an appearance you control entirely.

You build it in the editor, with a live preview on the right: the real widget, always open, replaying your brain and re-styling itself with every setting. The "Deployment" tab brings together everything that shapes its presence on the site: its appearance, its proactive engagement, and the embed code.

Appearance

The "Appearance" section tunes the look of the widget on your site. Every change shows up instantly in the preview on the right, without saving anything, so you can fine-tune until you get exactly the look you want.

None of this requires touching your site’s code: the appearance is driven entirely from here, and the preview gives you a faithful rendering.

Proactive engagement

By default, the widget waits to be clicked. Proactive engagement invites it to reach out to the visitor. Two levers, each enabled separately.

Teaser message: a small bubble appears above the widget after a delay you set in seconds, with the text of your choice, for example "A question? We’re here". A click opens the chat.

Automatic opening: the window opens on its own after a delay, without the visitor having to click.

Both only fire if the visitor hasn’t yet started the conversation: the moment they open the window or dismiss the bubble, they go quiet. We never push someone who has already responded.

Embed

To place the agent on your site, a single line is enough. The "Embed" section gives you the ready-to-copy code; paste it just before the </body> tag of your pages, and the widget appears on its own.

<script src="https://app.magnitude-ai.com/widget.js" data-key="your_key"></script>

The key (data-key) identifies your agent; the code is already filled in with yours in the editor. No style changes are needed on the site side: everything is driven from the "Deployment" tab. Adjusting the appearance or engagement later? The widget in place updates itself, without touching this line.

The site’s conversations

The "Web Agent" page brings together all the sessions held by your website agents. On the left, the list of sessions, with the number of exchanges, the visitor’s name or the label "Visitor", the first question, and topic tags added automatically. A search field and, if you have several agents, a per-agent filter help you find an exchange.

Open a session to review the chat exactly as the visitor saw it: their messages, the agent’s replies, the buttons offered, the product cards. Everything is read-only. The agent replied on its own, in the moment; this page is for reviewing, understanding, and rating, not for taking over.

What the agent did to reply

Below the replies, you’ll find the agent’s work, reserved for your team: every lookup of your knowledge and your data is traced. Expand a trace to see what the agent searched for and what it got back.

Each tool carries a clear name: "Knowledge base" for a search in your documents, "Data" for a query on a connected source, "Transfer to an agent" when it hands off to a human, and the names of your custom tools. Identical calls that follow one another are grouped into a single line, with a counter, to stay readable.

Sometimes a session ends on a lookup with no written reply: the agent searched but composed no message. This case is flagged "No reply" at the bottom of the thread. It’s a useful clue: often, the information was missing from the knowledge base, or an instruction needed to be sharpened.

Rate a session and take notes

To the right of an open session, a panel lets you judge the exchange and document it for the team. "Rate" offers two verdicts, "Positive" or "Negative", with one click (click again to remove your rating). A rated session carries a dot in the list, letting you spot at a glance the cases to review.

Below, "Internal notes" collects your remarks: what worked well, what needs fixing, a case to bring up in a meeting. These notes stay with you, with their author’s name, and never appear on the visitor side. Together, the rating and the notes turn your real conversations into raw material for improving the agent.

What you spot here, a reply that misses the mark or a missing piece of information, gets fixed in the agent’s instructions or its knowledge base, then verified in the sandbox and the scenarios before going back live.

What the agent can show

These elements exist for the website only. Messenger and Instagram can only display buttons and cards: the editor therefore offers neither single select, nor multi select, nor date picker, nor form to a messaging agent, and a messaging agent will never receive one.

How you ask for them

In the agent’s brain (the instructions editor), type /: the menu offers the elements by name, Buttons, Carousel, Contact form, Single select, Multi select, Date picker. Each element sits in the instructions as a pill, where you want the agent to use it: "Ask for the bike type {Single select: Road, Mountain}". The agent reads the pill as an instruction and picks the moment.

It does not have to be spelled out for everything: an agent asking a question that two or three short answers can settle draws buttons on its own, when its instructions declare them. An open question ("what is your name?") stays without buttons.

A list is not a row of buttons

The two look alike and do not serve the same purpose. Buttons are quick replies: short, few, under a question. A list is an input: it accepts up to forty options; with single select the visitor taps one, with multi select they tick several, then confirm. Once the choice is made, the list folds away and the choice appears as your message, exactly like a button. When the agent shows a list or a date picker, it does not also show the same options as buttons.

The contact form, and what it unlocks

The form creates the visitor’s contact card. From there, the agent recognises them from one message to the next within the same visit, does not ask again for what it knows, and can do two more things:

• send a cart: the selection leaves with the contact details, in a ticket;
• open a follow-up ticket (complaint, return, incident) if the "Open a ticket" automation is on for the agent. See the Tickets page, "When the AI opens a ticket".

You can also ask for the card before the conversation: in the widget settings, the pre-chat form (name, email, phone, each optional or required) is shown when the bubble opens, and the card follows the visitor even if they restart the conversation.

The cart

The cart is turned on in the agent editor, Skills tab, Automations section, Visitor cart switch. It only exists for the website agent.

When it is on, every carousel card carries a cart icon at the top right; a tap adds the item and the icon confirms it with a tick. The cart icon at the top of the bubble shows the number of items; it opens the selection, where the visitor sets quantities (minus, plus), removes an item, and sends their request to the team in one gesture. Sending creates a ticket in your workspace, in the visitor’s name, with the list of items and the link to the conversation. The drawer confirms on the spot (ticket number, "the team will get back to you"), a status line is written into the conversation, and the agent confirms in one sentence without asking another question. The visitor can also ask the agent in plain words ("send my selection"): the agent sends it itself, with the same ticket as a result, and never says it is done without having done it. Without a contact card, sending first asks for contact details: a selection with nobody to call back would be useless.

What happens on sending: the cart exit

Each agent chooses its exit (editor, Skills, Visitor cart, "On sending"):

For an order link to work, the cards must carry the reference the store expects (the Shopify variant, the product reference): the agent copies it from the catalog when it has it, never from memory. In every case, the cart.submitted event goes to your webhooks with the selection, the contact, the ticket number and the exit used.

The agent knows what the cart contains during the conversation: it can talk about it, suggest an addition, or offer to send it. In the editor preview, everything works the same way, except sending, which is simulated: no ticket is created.

What does not exist yet

• No payment. The cart sends a selection to your team; it does not sell.
• No computed prices. The total is not displayed; the cards carry the text the agent puts on them.
• The date picker books nothing. It collects a date; the booking itself happens in your tool, by your team or by a tool connected to the agent.