The On any page tab in PRO gives you one script line, already carrying the button settings from your Reading tools tab. Press Copy the line and paste it into any HTML page, on this domain or any other: a sales page, a funnel, a static site. Just before the closing body tag works; inside the page head is better, because a visitor's remembered choices, such as Dark or larger text, are then in place before the page first appears.
How it works:
The panel is loaded from your WordPress site. After it loads it makes no server calls and sets no cookies, and a visitor's choices stay in their browser for that site only. The reading fonts are served from your WordPress site too, so nothing goes to any outside service. It brings the same question, profiles, colour modes, text controls, reading aids, page map and Listen as your WordPress pages. The reading bar and In short belong to your WordPress posts and are not added.
Three ways to place it:
- In a corner: data-pos.
- Inside an element of your own page, such as your menu bar: data-target.
- Opened from a link or button you already have, with no button of ours printed: data-trigger.
Every option on the line:
- data-pos: the corner, one of br, bl, tr, tl, mr or ml (bottom right, bottom left, top right, top left, middle right, middle left). Bottom right when left out.
- data-target: a CSS selector for an element to put the button inside, for example #menu. If that element is not on the page, the button floats in its corner instead.
- data-trigger: a CSS selector for your own link or links that open the panel. Our button is never shown.
- data-style: label (symbol and word), icon (round symbol only) or text (word only).
- data-size: s, m or l.
- data-colour: gold, dark, white, or your own colour as a hex code such as #1d4ed8. The symbol and word turn white or dark on their own.
- data-label: the word on the button and at the top of the panel.
- data-offset: the distance in pixels from the edges for a corner button. 0 sits it flush to the edge.
- data-statement: the address of your Accessibility Statement page, linked at the foot of the panel. Filled in for you when your WordPress site has one.
- data-prose: CSS selectors for where the article text is, tried in order, if Listen or Focus miss it.
- data-question="0": skip the first-visit question.
- data-listen="0", data-hide="0" and data-brand="0": switch off Listen, Hide the button for today, or the ResultsAiX line.
- data-lang: the language Listen reads in, for example en, for a page that does not declare one.
Change the attributes on the line and nothing else needs touching. If you change your button settings on the Reading tools tab later, copy the line again for new pages; pages that already have it keep the attributes written on them.
Keep data-statement on every page:
The law expects a statement people can reach from every page. One Accessibility Statement page on your WordPress site can cover every domain it names.