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……..
STEP 1
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;
STEP 2
Please kindly scroll down to File manager and click on it
STEP 3
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.
STEP 4
Open the folder and right-click on the index.html file to directly get access to the markup
STEP 5
kindly login to your ADA Bundle account and click on the report page to copy the WIDGET ANALYZER CODE
STEP 6
On the report page, kindly click on the “get embed code” button at the top of the page
STEP 7
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.
STEP 8
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