The pause panel

When a check returns review, the embed holds the step and shows a pause panel over your page. It tells the agent driving the checkout to send the approval link to the customer, and not to open or approve it itself. Only the customer can approve the purchase.

What the agent sees

From top to bottom:

• A label and a heading: “For the AI assistant”, then “Approval needed from the person you’re helping”.
• The message: the request to pass the link on, then your extra instructions, if any, then “Do not open or approve it yourself.”
• The link, with a Copy link button.
• A status line (“Waiting for the customer to approve. This page carries on by itself once they do.”) and when the link expires.

Below, in its own box under “If you’re buying for yourself”:

• A note for the customer, for a person buying for themselves who sees the panel: by default, “We paused payment because it looked like an AI assistant was completing this purchase. Open the link on your phone to approve it. Nothing has been paid.”
• A back button: “Go back to the quote”.

At the foot: “Protected by HumanApproved for {brand}.”, with your brand name.

The panel also has states for while the link is created, and for when the customer declines or the link expires. A declined or expired panel tells the agent nothing was paid, and to ask the customer what they want to do, with a Close button.

The panel waits for the customer’s answer, then closes and lets the step proceed once they approve. A reload brings the waiting panel back.

Change the wording and look

Every word of the panel, and its look, comes from your product’s Agent popup page in the portal. There’s no code to change: publish the product, and checkouts use the new version from their next check.

Wording

Text is plain: no markup or links. We recommend keeping the “Not to open or approve it” line: whatever you show, the agent must know not to open or approve the link itself.

Placeholders

The portal won’t save a placeholder in a text that can’t hold it.

Look

The panel can’t load web fonts under your Content Security Policy, so the font choices are local stacks. Choose your page’s own font to use a web font your page has already loaded.

The embed checks every setting again. One that fails its check is left out and the standard look is drawn for it, so the panel always stays readable. The link keeps its own dark text on a grey box. The look never changes the wording the agent reads.

The logo is served from https://uk.humanapproved.com, so your img-src must allow that origin. If it doesn’t, the panel leaves the logo out. See Content Security Policy.

Accessibility, and how agents read it

• The message and the link are real text in your page, not only inside the panel’s shadow DOM. Agents and assistive technology that read the page or its accessibility tree get both, word for word.
• They’re one live alert, announced when the panel appears and again only when its state changes, never while it waits.
• The link’s text is exactly the URL. Selecting it, or the whole page, copies the URL once and exactly.
• On screen the link wraps only between the host and the path, so the review ID is never split.
• The logo has alternative text (by default, your brand name).
• Every colour setting is held to the contrast rules in Look.

Session replay tools

The panel is masked for common session-recording tools: Datadog, Hotjar, Microsoft Clarity and FullStory show a blank box instead of the message and the review link. Agents and assistive technology still get the text. For another replay tool, add your own masking rule for the open-approvals-panel element.