Customizing your accessWidget installation lets you align the widget with your brand while keeping your site accessible for your visitors. Once installed, you can adjust the widget's interface and accessibility button so it matches your website's design and preferences. Changes are published instantly to your site.

Before customizing, make sure the widget is already installed on your website. See our Website Onboarding Guide for instructions.

How to customize your installation

1. On the accessiBe home page, select Login in the top right corner, and log in to your account.
2. Select My Licenses and select the specific license to customize the widget.
3. In the side menu, select Install and Customize widget and then select the Widget Customization tab.
4. Under Customizing accessWidget Interface, set the following:
   • Interface lead color: the main color used in the widget interface. The default color is accessiBe blue.
   • Interface footer content: type text to appear in the widget footer to present your brand/company or leave it blank.
   • Interface position: choose the position on the screen where you want to place the widget.
   • Accessibility statement link: type the link to display your accessibility statement or leave blank for the default accessiBe statement.
   • Interface language: select the widget display language. The default language is English.
5. The trigger is the accessibility button on your website that opens accessWidget for your users. Under Customizing accessWidget Trigger, set the following:
   • Trigger button color: set the color of the accessibility button that is used to open the interface. The default color is accessiBe blue.
   • Trigger vertical position: select the vertical position of the accessibility button. The default is bottom.
   • Trigger button shape: select the shape of the accessibility button. The default is round.
   • Trigger horizontal offset: set the horizontal offset of the accessibility button from the edge of the screen. The default is 20.
   • Trigger horizontal position: select the horizontal position of the accessibility button. The default is right.
   • Trigger button size: select the size of the accessibility button. The default is small. Show/hide trigger button - show/hide the accessibility button. The default is shown.
   • Trigger vertical offset: set the vertical offset of the accessibility button from the edge of the screen. The default is 20.
   • Trigger button icon: select an icon to represent the accessibility button
6. Under Customizing accessWidget Trigger for Mobile, set the following:
   • Show/hide on mobile: show/hide the accessibility button on mobile.
   • Mobile trigger vertical position: select the vertical position of the accessibility button. The default is center.
   • Mobile trigger shape: select the shape of the accessibility button. The default is square.
   • Mobile trigger vertical offset: set the vertical offset of the accessibility button from the edge of the screen on mobile. The default is 0.
   • Mobile trigger horizontal position: select the horizontal position of the accessibility button. The default is right.
   • Mobile trigger size: select the size of the accessibility button on mobile. The default is small.
   • Mobile trigger horizontal offset: set the horizontal offset of the accessibility button from the edge of the screen on mobile. The default is 0.
7. Under Website help details add your website’s contact details and/or a link to your Contact Us page, support page, or other self-help resources. These details are used to present a consistent help panel when activating the Dyslexia or Cognitive profiles in accessWidget.
   • Select a help type.
   • Enter the help details
8. Once you have finished customizing, select Publish Changes.
9. In the pop-up window select Publish Now to override any existing customizations and instantly apply the changes to your site.

See also

How to customize the widget manually using config.json