This app adds pixel code to your VTEX IO store to show a component in the storefront, enabling users to modify your site’s UI, design, and readability to meet their individual needs following ADA and WCAG accessibility guidelines.

To install the accessiBe app:

1. Open the VTEX App store.
2. Look for the accessiBe app.
3. Click on GET APP.
4. Type your account name.
5. Click on CONFIRM.

You will be redirected to your store’s accessiBe settings page. To setup your accessiBe account, please go to https://accessibe.com/a/lbbihws, log in to your accessibe account, and add your VTEX store URL as one of the managed sites. Accessibility parameters can be managed directly through the accessiBe platform after installing and configuring the app.

You need to have an accessiBe paid account to be able to use the app

After installing and adding your VTEX store URL on the accessiBe website, the accessibility button will be available on your store with the default configuration.

You can configure the accessiBe button and interface. To configure the accessiBe app in your store:

1. Log in to Admin.
2. On ACCOUNT SETTINGS, click on Apps.
3. Search for accessiBe.
4. Click on Settings.
5. Fill in the screen fields listed below according to your needs and click on Save.
   • Accessibility Statement Link: as an accessiBe client, you get a statement indicating remediations your website has undergone to achieve compliance. When this field is left blank, this default statement is shown in the component. You can either edit accessiBe’s statement with your information (see this accessiBe documentation on learning how to edit it) or insert a link to another published statement.
   • Feedback Form Link: add a feedback form.
   • Interface Footer: present your brand/company in the footer.
   • Interface Language: choose the different language options available for your interface. The default option is English.
   • Interface Lead Color: change the color of the interface to match your style. This field accepts hash color codes.
   • Trigger Button Color: change the color of the accessibility button that is used to open the interface. This field accepts hash color codes.
   • Interface Position: change the location of the interface. The default option is Left.
   • Hide on mobile?: choose whether to show the interface on mobile. The default option is Show.
   • Trigger horizontal position: choose the horizontal positioning of the accessibility button. The default option is Left.
   • Trigger vertical position: choose the vertical positioning of the accessibility button. The default option is Bottom.
   • Mobile trigger horizontal position: choose the horizontal positioning of the accessibility button on mobile. The default option is Left.
   • Mobile trigger vertical position: choose the vertical positioning of the accessibility button on mobile. The default option is Center.
   • Trigger button size: choose the size of the accessibility button. The default option is Medium.
   • Mobile trigger size: choose the size of the accessibility button on mobile. The default option is Small.
   • Trigger button shape: change the shape of the accessibility button. The default option is Round.
   • Trigger mobile shape: change the shape of the accessibility button. The default option is Square.
   • Hide trigger button: you can choose to hide the accessibility button, though accessiBe will still be present on your site. The default option is Show.
   • Trigger button icon: choose from a variety of symbols to represent the accessibility button on your site.
   • Trigger horizontal offset: make additional horizontal orientation adjustments for the accessibility button. The default option is 20.
   • Trigger vertical offset: make additional vertical orientation adjustments for the accessibility button. The default option is 20.
   • Mobile trigger horizontal offset: make additional horizontal orientation adjustments for the accessibility button on mobile. The default option is 0.
   • Mobile trigger vertical offset: make additional vertical orientation adjustments for the accessibility button on mobile. The default option is 0.
   • Useful Website Links: add a helpful website link. Click on + ADD MORE, insert a label and the form URL.

Once saved, all your configuration choices will be applied to the component in your store.

You can uninstall and/or delete the accessiBe app from your store. When doing so, consider that:

• If the app is uninstalled without being deleted: the app will be removed from the workspace, but all saved settings will remain protected, meaning that if you reinstall, all previous settings will be applied.
• If the app is deleted: all saved configurations will be deleted from all workspaces, and the app will also be uninstalled.

To delete the app:

1. Log in to Admin.
2. On ACCOUNT SETTINGS, click on Apps.
3. Search for accessiBe.
4. Click on Settings.
5. Click on the DELETE button on the upper right portion of the screen.
6. Wait for the dialog box to appear.
7. Confirm the deletion by clicking on DELETE.

To uninstall the app:

1. Log in to Admin.
2. On _ ACCOUNT SETTINGS_, click on Apps.
3. Search for accessiBe.
4. Click on Settings.
5. Click on the UNINSTALL button on the upper right portion of the screen.
6. Wait for the dialog box to appear.
7. Confirm by clicking on UNINSTALL.