You can customize the widget’s appearance and behavior by editing settings in the config.json file.
Manual customization requires editing your site’s code. If you're not comfortable doing this yourself, we recommend working with your developer or someone familiar with your site's structure.
You can also customize accessWidget in the Customer Portal.
To manually customize accessWidget on your website
Contact Customer Support to activate manual customization for your account. This option must be turned on before any code-level changes will take effect.
Locate the accessWidget installation code that was added to your website. The code is most likely in the footer section or just before the closing
/bodytag. The snippet typically looks like this:<script> (function(){ var s = document.createElement('script'); var h = document.querySelector('head') || document.body; s.src = 'https://acsbapp.com/apps/app/dist/js/app.js'; s.async = true; s.onload = function(){ acsbJS.init(); }; h.appendChild(s); })(); </script>Edit the script as needed to add the configuration keys. If the script appears on multiple pages, repeat the changes everywhere the snippet is present.
Save your changes, and publish your website.
Need help customizing? Contact us through our website chat.
Configuration keys
These are the keys that can be configured to customize your widget.
Note:
- Widget trigger: The icon on the webpage that when clicked, opens the widget interface.
- Widget interface: The panel that is opened after selecting the widget icon.
Accessibility statement link
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| statementLink | When clicking on the Statement button in the widget, will open a new tab with this link. | String | false | "" |
Footer content and link
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| footerHtml | Custom content and link for the widget's footer. If not provided, the default content is used. The string is sanitized from potentially malicious elements. | String | false | Powered by accessiBe |
Note:
Allowed HTML tags: "a", "b", "br", "div", "em", "i", "img", "p", "path", "span", "strong", "svg", "u".
Forbidden attributes: "on*", "[href^=javascript:]", "[src^=javascript:]", "[href^=data:]", "[src^=data:]"
Hide widget trigger
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| hideMobile | Whether to hide the widget trigger on mobile devices. | Boolean | false | false |
| hideTrigger | Whether to hide the widget trigger when the widget initializes. | Boolean | false | false |
Deactivate keyboard navigation and screen-reader adjustments
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| disableBgProcess | Deactivate keyboard navigation corrections and screen-reader adjustments. | Boolean | false | false |
Set widget interface language
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| language | Set the interface language that the widget will be initialized with. | "en", "he", "ar", "de", "fr", "it", "ja", "nl", "pt", "pl", "ru", "tw", "ua", "zh", "tr", "sl", "sk", "hu", "cs", "sv", "no", "sq", "bs", "hr", "fi", "el", "ga", "lb". "ro", "sr", "es" | false | en |
| languageOptions | Optional: Override the flag icon and hide specific languages. | [SupportedLanguageCode.PL]: { hidden: true,},[SupportedLanguageCode.PT]: {flag: SupportedFlagCode.BR,} | false | undefined |
Set widget interface and trigger position
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| position | Set the position of the widget interface on the screen. | left, right | false | right |
| triggerPositionX | Set the horizontal position of the widget trigger. | left, right | false | right |
| triggerPositionY | Set the vertical position of the widget trigger. | top, center, bottom | false | bottom |
| triggerOffsetX | Set the horizontal offset for the widget trigger. | Number | false | 20 |
| triggerOffsetY | Set the vertical offset for the widget trigger. | Number | false | 20 |
Set widget interface and trigger colors
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| leadColor | Set the lead color for the widget interface. | HEX color string | false | #146FF8 |
| triggerColor | Set the background color for the widget trigger. | HEX color string | false | #146FF8 |
Set widget trigger size
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| triggerRadius | Set the radius of the widget trigger. | string | false | 50% |
| triggerSize | Set the size of the widget trigger. | small, medium, big | false | medium |
Set widget trigger icon
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| triggerIcon | Set the icon to display as the widget trigger. | checkmark, display, display2, display3, help, people, people2, settings, settings2, wheels, wheels2 | false | people |
Set mobile trigger size and position
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| mobile.triggerSize | Set the size of the widget trigger on a mobile device. | small, medium, big | false | medium |
| mobile.triggerPositionX | Set the horizontal position of the widget trigger on a mobile device.. | left, right | false | right |
| mobile.triggerPositionY | Set the vertical position of the widget trigger on a mobile device. | top, center, bottom | false | bottom |
| mobile.triggerOffsetX | Set the horizontal offset for the widget trigger on a mobile device. | Number | false | 3 |
| mobile.triggerOffsetY | Set the vertical offset for the widget trigger on a mobile device. | Number | 3 | |
| mobile.triggerRadius | Set the radius of the widget trigger on a mobile device. | string | false | 50% |
Hide widget adjustments in the interface
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| hideComponents | The adjustments to hide in the widget interface. |
Array of possible values: ["search", "profilesSection", "accessibilityStatement", "adjustment_zoom", "adjustment_readableFont", "adjustment_emphasizeTitles", "adjustment_emphasizeLinks", "adjustment_magnifier", "adjustment_fontSize", "adjustment_textAlignCenter", "adjustment_lineHeight", "adjustment_textAlignLeft", "adjustment_letterSpacing", "adjustment_textAlignRight", "adjustment_darkContrast", "adjustment_lightContrast", "adjustment_highContrast", "adjustment_highSaturation", "adjustment_textColor", "adjustment_monochrome", "adjustment_titleColor", "adjustment_lowSaturation", "adjustment_backgroundColor", "adjustment_mute", "adjustment_hideImages", "adjustment_readMode", "adjustment_readingGuide", "adjustment_usefulLinks", "adjustment_stopAnimations", "adjustment_readingMask", "adjustment_emphasizeHover", "adjustment_emphasizeFocus", "adjustment_bigBlackCursor", "adjustment_bigWhiteCursor"] |
false | [] |
Activate complex menus
| Key | Description | Possible values | Required | Default value |
|---|---|---|---|---|
| complexMenu | Whether to use alternative dropdowns when remediating complex menus on a page. | Boolean | false | false |