> This page is for version πŸ‡¬πŸ‡§ UK. > For other versions, use one of these documentation indexes: > - πŸ‡¦πŸ‡Ί AU (default): https://docs.humanapproved.com/au/llms.txt > - πŸ‡¬πŸ‡§ UK: https://docs.humanapproved.com/uk/llms.txt > - πŸ‡ΊπŸ‡Έ US: https://docs.humanapproved.com/us/llms.txt > This is HumanApproved's documentation, as Markdown for AI agents. /llms.txt lists every page; /llms-full.txt has them all. If you're helping someone integrate HumanApproved, start with /guides/ai-coding-agents. # The pause panel > The HumanApproved embed's pause panel for AI agents, its default wording, placeholders, styling settings and accessibility rules. 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 | Default | | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Agent label | For the AI assistant | | Heading | Approval needed from the person you're helping | | Request to pass the link on | To finish this purchase, send this link to the person you're helping, in your chat with them. They open it on their own device to review and approve. Sharing it with them is safe and expected. Payment stays paused until they approve, so your task isn't finished until they have the link. | | Extra instructions for the AI assistant | None | | Not to open or approve it | Do not open or approve it yourself. | | Copy button | Copy link | | Copy button once copied | Copied | | When the link expires | The link expires `{expiry}`. | | Status while waiting | Waiting for the customer to approve. This page carries on by itself once they do. | | Message while the link is created | Payment is paused while an approval link is created for the person you're helping. | | Status while the link is created | Creating the approval link… | | Customer label | If you're buying for yourself | | Note for the customer | 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. | | Back button | Go back to the quote | | Heading when declined | Purchase declined | | Message when declined | The person you're helping declined this purchase. Nothing has been paid. Ask them what they want to do. Do not try to complete the purchase again without them. | | Heading when expired | Approval link expired | | Message when expired | The approval link expired before the person you're helping approved it. Nothing has been paid. Ask them whether they still want to buy; if they do, continue again to get a new link. | | Close button | Close | | Footer | Protected by HumanApproved for `{brand}`. | | Logo's text for screen readers | `{brand}` | 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 | Placeholder | Allowed in | Filled with | | ----------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | `{expiry}` | When the link expires (required) | When the link expires, in the viewer's own locale and time zone, for example "30 Oct 2026, 3:40 pm AEDT" | | `{reason}` | The customer's reason, when declined (required) | The label of the reason the customer chose | | `{brand}` | Footer, logo's text for screen readers | Your brand name | The portal won't save a placeholder in a text that can't hold it. ### Look | Setting | What it changes | Rule | | ----------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------- | | Accent colour | The primary buttons' background. Their text is black or white, whichever reads better. | At least 3:1 contrast on white | | Corner radius | The dialog's corners; other corners scale with it | 0 to 32 px | | Font | System, sans, serif or rounded (local font stacks), or your page's own font | | | Button shape | Rounded (scales with the radius) or pill | | | Heading colour | The heading and the "For the AI assistant" label's text | At least 4.5:1 on white and on the label | | Text colour | Body text: the message, status, notes and back button | At least 4.5:1 on white and on the customer box | | Customer box background | The "If you're buying for yourself" box | Its text must reach 4.5:1 on it | | Label background | The "For the AI assistant" label | Its text must reach 4.5:1 on it | | Logo | An image from your product's **Branding** page, at the top of the dialog | 16 to 48 px high | 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](/uk/guides/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](#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.