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? Ask for support

Option 1: Manual Insertion into Theme

  1. Open your site's HTML file

    • 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

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

  1. Access the administration panel

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

  2. Edit theme file

    • Open the file theme.liquid.

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

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

    • Check that the widget is working properly.

  1. Sign in to your Wix account

    • Go to your site's editor.

  2. Add widget code

    • Go Up 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

    • Verify that the widget is active.

  1. Access the administration panel

    • Go Up Settings > SEO.

  2. Enter the widget code

    • In the section Footer code, paste:

				
					<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 Up 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 Up Structure > Blocks.

  2. Create a new custom 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

    • Verify that the widget is working.

  1. Access the administration panel

    • Go Up Content > Design > Configuration.

  2. Change the layout

    • Select the theme you are using and click on Edit.

  3. Enter the widget code

    • Paste the following code into the section HTML Footer:

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

    • Save the changes and verify that the widget works.

  1. Open your site's HTML file

    • 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 out the form to receive a personalized 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