SiteLint documentation and guidelines

Add SiteLint to your site

To integrate your site with SiteLint Audits, you need to be able to update the HTML code of the website you want to audit.

To install the script you have 3 options:

  1. Insert the code snippet between the <head> and </head> HTML tags of your site. You can generate ready to use code snippet by going to Sites, More, View site settings and following the link Installation API Token. The Installation API Token section will help you to generate the SiteLint code snippet.
  2. WordPress user? Use our SiteLint WordPress plugin.
  3. To inject a script tag in Google Tag Manager, you can use Google Tag Manager Custom Tags. This feature allows you to inject the code snippet generated under the Installation API Token section. You can find more information on how to use Custom Tags in Google Tag Manager by visiting the official Google support page.

We recommend also adding the following code to speed up loading even further:

The preconnect link code
<link rel="preconnect" href="https://auditor.sitelint.com/" crossorigin>

Where to find your JavaScript snippet?

To set up the SiteLint code snippet, follow these steps:

  1. Log In to the Platform. Don’t have an account? Sign Up to create an account. The SiteLint code snippet will also be available on the Sign Up Welcome page.
  2. Go to Sites, then select More, View site settings.
  3. Follow the link Installation API Token. This should lead you to the section where you’ll be able to create the code snippet for your site.
  4. Copy the entire content of the text box to the clipboard (or use the Copy script to clipboard button for that purpose).
  5. Insert the code snippet between the <head> and </head> HTML tags of your site.

How do I verify if the audits work?

Once the code snippet is placed on your site you should start receiving audit results, and they should be available under Sites section. The reports will be visible typically within 24-48 hours.

See also How to check if SiteLint is working for troubleshooting potential issues.

Configuration options for the code snippet

The SiteLint code snippet with audits is also configurable under Sites, More, View site settings and following the link Installation API Token.

Sitelint code snippet options: start loading on event, loading delay in ms, no delay checkbox, include hidden elements, remove sensitive data

There are the following options:

  1. Start loading on the event – you can choose on which event the code should start loading: onload or DOMContentLoaded. Default: DOMContentLoaded
  2. Loading delay in ms – for any reason, you may want to delay the loading code with a specific delay time. Default: no delay.
  3. Include hidden elements – this option allows you to include or exclude invisible elements while auditing the site. Default: true.
  4. Remove sensitive data – this option allows you to remove all texts as well as all form controls value. Default: false.
Your site needs to be updated with a new code snippet to apply the configuration options. Simply replace the current code or insert it between the <head> and </head> HTML tags of your site, if it’s generated for the first time.

Technical details

The SiteLint code snippet is lazy-loaded and does not impact the initial page loading performance. It uses the defer attribute, but you can change that to async when you need.

How does the async and defer attribute works?

This is all summarized in the schematic diagram below:

With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing, but once it finishes, parsing is interrupted to execute the script. The story for <script type="module"> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type="module" async> is similar to <script async> with the extra dependency fetching.

Source: WHATWG