Skip to main content

BetaEncludo is in open beta and free to use while it is. Tell us what breaks.

Product documentation

Everything needed to install Encludo, configure it, and understand what it does on your pages — including what it deliberately does not do.

Encludo changes nothing on load. Every adjustment below happens because a visitor asked for it. If you add the script tag and reload, your site renders exactly as you built it.

Install the widget

One script tag, before </body>. No build step, no package to install, no framework requirement.

<script src="https://api.encludo.com/widget/sdk/encludo.js"
        data-encludo-key="YOUR_KEY"
        defer></script>

Works with WordPress, Shopify, Webflow, React, Next.js, Angular, Vue and plain HTML. In a tag manager, add it as a Custom HTML tag firing on All Pages.

Verify it is running

Load any page on the domain the key was issued for. A circular trigger appears in the bottom-right corner. If it does not:

  • Check the browser console for a 401 — the key is bound to one domain and will refuse others.
  • Confirm your CSP allows api.encludo.com in script-src and connect-src.
  • The bundle is 53 KB brotli-compressed and served with defer, so it never blocks first paint.

Script tag attributes

AttributeValuePurpose
data-encludo-keyrequiredem_…Your widget key, from Dashboard → Websites. Bound to the domain it was issued for.
data-encludo-endpointhttps://api.encludo.comOverride the API host. Only needed for self-hosted or staging environments.
data-encludo-consentnone | functional | analyticsSet the analytics tier directly instead of inheriting from a CMP.
deferrequiredAlways defer. The widget mounts after parsing and never blocks your render.

AI assistance

A visitor types or speaks what is wrong in their own words — “I can’t read this”, “the screen is too bright” — and the widget applies the matching adjustment and says what it did.

It answers in the language the visitor wrote in, in that language’s own script. Someone typing Hindi in Latin letters (“mujhe padhne mein dikkat ho rahi hai”) gets a reply in Devanagari, because a romanised reply is both harder to read and unusable by a text-to-speech voice.

It can also navigate: “take me to the contact section” moves the page there and announces the destination. Links, in-page anchors and menu buttons only — never a form submission, and never a purchase.

Accessibility controls

Text size to 200%, line height, letter and word spacing, three reading typefaces (Lexend, Atkinson Hyperlegible, OpenDyslexic), dark and high-contrast modes, colour-blind filters, reduced motion, focus outlines, link highlighting, larger targets and a reading guide.

Dark mode derives its palette from your site rather than imposing one: lightness is inverted in OKLCH while hue and chroma are held, so a warm page darkens warm and your link colour stays your link colour.

Translation & read aloud

The whole page — navigation, headings, buttons, alt text and captions — in 21 languages, written in everyday register rather than the formal one machine translation defaults to.

Any reply can then be read aloud. Indian languages use neural voices rather than a browser voice stumbling through an unfamiliar script. Nothing is spoken until the visitor presses the button.

Bind your own language picker

Give any element the class encludo-language-selector and it opens the language panel. Add data-encludo-language-label to any child and its text is kept in sync with the active language’s native name.

<button class="encludo-language-selector">
  <span data-encludo-language-label>English</span>
</button>

Bind as many as you like — header, footer, a menu. They all stay in sync.

Keyboard shortcuts

MacWindows / LinuxDoes
⌥ Option + AAlt + AOpen and close the panel
⌥ Option + Shift + AAlt + Shift + AOpen the panel and put the cursor straight in the chat box
EscEscClose and return focus to where it was

On a Mac the key marked Alt is Option — the same key, and either label works.

Arrow keys move between tabs; the panel traps focus while open and releases it on close.

Dashboard guide

Add domains, issue and revoke widget keys, restrict which languages appear in the picker, toggle features per site, and read usage. Each domain carries its own key and its own settings.

Reading the audit

The audit is advisory. It reports what is broken and gives your developers the fix, in your dashboard — it never edits your pages, never injects ARIA, and never writes alt text into your markup.

That is a deliberate limit. A scanner can machine-check roughly a third of WCAG; the rest needs a person. Anything claiming a one-line path to compliance is selling you the third and implying the whole.

Something missing?

Email contact@purpleaware.com and we will answer, and add it here.