The Widget analyzer is a new feature on ADA Bundle which allows your website visitors or audience to enter their email and website URL in other to generate their website compliance report.
In this article, I will walk you through how to embed the website analyzer widget on a page built with HTML
Here are a few steps to do this……..
Log into your host account where you can easily edit your website file through the file manager; for the case of this tutorial I would be working with My Namecheap Host in other to work you through this;
Please kindly scroll down to File manager and click on it
On the file manager page, access your website files by clicking on the website folder or the public_Html folder if the website file is located there, however, my website file is located in the test.pempodglobal.com folder.
Open the folder and right-click on the index.html file to directly get access to the markup
kindly login to your ADA Bundle account and click on the report page to copy the WIDGET ANALYZER CODE
On the report page, kindly click on the “get embed code” button at the top of the page
After clicking on the Get embed code, a modal will pop up, please copy the embed script by clicking on the blue button on the modal, that script is the widget analyzer script.
Note: Please note that this script will be pasted in the closing header or footer tag on your index.html page but we choose to add it on a section, but any of these mentioned area could do the job.
You can add the widget either on the closing header or footer tag, but for the case of this tutorial I need the element to be on the section of my page so I added it in the header section of my page which is before the closing body tag, please see the red highlighted area in the screenshot below;
Please click on save
Finally, kindly visit the site to see how this looks, here is how my site looks with this new awesome tool called website widget analyzer