Make your site compliant and inclusive today.
Free Consultation
Free Consultation

Widget Integration Guide

Quick and easy

How to install the
Accessibi widget

The Accessibi widget helps improve the accessibility of your website. This guide provides detailed instructions for integrating the widget on different platforms: HTML, WordPress, Shopify, Wix, Weebly, Joomla, Drupal, Magento, Angular, React, and Laravel.
Can't? Request support

Option 1: Manual Insertion into Theme

  1. Open the HTML file of your site

    • Use a text editor or IDE to edit the HTML file.

  2. Add widget code

    • Paste the following script before the tag </body> :

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>
  1. Save and verify
    • Save the file and reload the page to check that the widget works

Option 2: Using Elementor

    1. Go to Elementor > Custom Code

      • Click on Add Custom Code.

    2. Enter the code

      • Paste the following script:

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>
  1. Save and publish

    • Publish the code and verify that the widget is visible.

  1. Access the administration panel

    • Go to Online Store > Themes > Actions > Edit Code.

  2. Edit the theme file

    • Open the file theme.liquid.

    • Paste the code before the </body>:

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>
  1. Save and verify

    • Check that the widget works correctly.

  1. Sign in to your Wix account

    • Go to your site's editor.

  2. Add widget code

    • Go to Settings > Advanced > Custom Code.

    • Paste the code into the Body:

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>
  1. Save and publish

    • Check that the widget is active.

  1. Access the administration panel

    • Go to Settings > SEO.

  2. Enter the widget code

    • In the section Footer codepaste:

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>
  1. Save and verify

    • Check that the widget is visible.

  1. Access the control panel

    • Go to Extensions > Templates > Templates.

  2. Edit the template file

    • Select the template in use and edit the file index.php.

    • Paste the widget code before the tag </body>:

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>
  1. Save and verify

    • Save the changes and check that the widget is visible.

  1. Access the administration panel

    • Go to Structure > Blocks.

  2. Create a new customised block

    • Paste the widget code into the HTML field:

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>

  1. Assign block

    • Place the block in the footer.

  2. Save and verify

    • Check the functioning of the widget.

  1. Access the administration panel

    • Go to Content > Design > Configuration.

  2. Change the layout

    • Select the theme in use and click on Edit.

  3. Enter the widget code

    • Paste the following code into the HTML Footer:

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>
  1. Save and verify

    • Save the changes and verify the widget's functioning.

  1. Open the HTML file of your site

    • Use a text editor or IDE to edit the HTML file.

  2. Add widget code

    • Paste the following script before the tag </body>:

				
					<script src="https://app.accessibi.com/dist/accessibi.min.js" defer></script>
  1. Save and verify

    • Save the file and reload the page to check that the widget works.

Request your free consultation

Fill in the form to receive a personalised consultation and find out how we can help you make your website accessible and compliant with regulations. Our team of experts is ready to guide you step by step, offering solutions tailored to your needs