Documentation Index
Fetch the complete documentation index at: https://docs.inploi.com/llms.txt
Use this file to discover all available pages before exploring further.
Accessibility Plugin
The Accessibility plugin adds an overlay with tools to help users customize their viewing experience.
Installation
npm install @inploi/plugin-accessibility
pnpm add @inploi/plugin-accessibility
<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-accessibility/cdn/index.js"></script>
Basic usage
import { initialiseSdk } from '@inploi/sdk';
import { accessibilityPlugin } from '@inploi/plugin-accessibility';
const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const accessibility = sdk.register(accessibilityPlugin({
widget: {
colors: { interface: '#222222', trigger: '#5fbb46' },
},
}));
accessibility.initialiseWidget();
<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-accessibility/cdn/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const accessibility = sdk.register(inploi.accessibilityPlugin({
widget: {
colors: { interface: '#222222', trigger: '#5fbb46' },
},
}));
accessibility.initialiseWidget();
});
</script>
Features
The accessibility overlay includes:
- Font size adjustment — Increase or decrease text size
- Contrast modes — High contrast and dark mode options
- Reading aids — Line focus, reading guide
- Motion controls — Reduce animations
Configuration
Colors
Colors are required. They control the widget’s interface and trigger button appearance.
type Colors = {
interface: string; // Main UI color (hex)
trigger: string; // Floating button color (hex)
};
| Option | Type | Description |
|---|
interface | string | Hex color for the overlay interface elements |
trigger | string | Hex color for the floating trigger button |
Language
Set the widget language. Defaults to 'en'.
const accessibility = sdk.register(accessibilityPlugin({
widget: {
colors: { interface: '#222222', trigger: '#5fbb46' },
language: 'fr',
},
}));
| Code | Language | Code | Language |
|---|
en | English | nl | Dutch |
es | Spanish | hu | Hungarian |
fr | French | sl | Slovenian |
de | German | sk | Slovak |
pl | Polish | cs | Czech |
it | Italian | tr | Turkish |
pt | Portuguese | ja | Japanese |
he | Hebrew | zh | Chinese |
ru | Russian | tw | Taiwanese |
ar | Arabic | | |
Position
Control the trigger button placement on desktop and mobile independently.
const accessibility = sdk.register(accessibilityPlugin({
widget: {
colors: { interface: '#222222', trigger: '#5fbb46' },
position: {
x: { desktop: 'left', mobile: 'right' },
y: { desktop: 'bottom', mobile: 'bottom' },
offsetX: { desktop: 20, mobile: 10 },
offsetY: { desktop: 20, mobile: 10 },
},
},
}));
| Option | Type | Default | Description |
|---|
x | { desktop: 'left' | 'right', mobile: 'left' | 'right' } | 'right' | Horizontal position |
y | { desktop: 'top' | 'center' | 'bottom', mobile: 'top' | 'center' | 'bottom' } | 'bottom' | Vertical position |
offsetX | { desktop: number, mobile: number } | desktop: none, mobile: 4 | Horizontal offset in pixels |
offsetY | { desktop: number, mobile: number } | desktop: none, mobile: 4 | Vertical offset in pixels |
Trigger visibility
Hide the floating trigger button if you want to open the widget programmatically or through your own UI.
const accessibility = sdk.register(accessibilityPlugin({
widget: {
colors: { interface: '#222222', trigger: '#5fbb46' },
showTrigger: false,
},
}));
API
Injects the accessibility overlay into the page. Safe to call multiple times — subsequent calls are no-ops if the widget is already loaded.
accessibility.initialiseWidget();
Full configuration reference
type AccessibilityWidgetConfig = {
colors: {
interface: string;
trigger: string;
};
language?: 'en' | 'es' | 'fr' | 'de' | 'pl' | 'it' | 'pt'
| 'nl' | 'hu' | 'sl' | 'sk' | 'cs' | 'tr'
| 'ja' | 'tw' | 'zh' | 'he' | 'ru' | 'ar';
showTrigger?: boolean;
position?: {
x?: { mobile: 'left' | 'right'; desktop: 'left' | 'right' };
y?: { mobile: 'top' | 'center' | 'bottom'; desktop: 'top' | 'center' | 'bottom' };
offsetX?: { mobile: number; desktop: number };
offsetY?: { mobile: number; desktop: number };
};
};
