MODX installation

Plugin installation

Step 1: Register your site and obtain a token

Log in or register on the DockWCAG website, then enter your site address.

After saving the address, a unique token will appear, which you can copy to the clipboard.

Step 2: Adding the DockWCAG plugin in MODX

To add a plugin in MODX, go to the “Elements” tab, then “Plugins” and the add plugin button.

Give a name, for example, “DockWCAG”, and in the “Plugin Code (PHP)” field, paste the following code:

<?php

function loadAccessibility($token, $config) {
    $url = "https://wcag.dock.codes/api-frontend/accessibility/index.js?key=" . urlencode($token);
    $html = '<script src="' . $url . '" defer></script>';
    $html .= '<script>const aic=setInterval(()=>{if(window.Accessibility){clearInterval(aic);new Accessibility('. json_encode($config) . ')}},100)</script>';
    return $html;
}

$modx->regClientHTMLBlock(loadAccessibility('***', [
    'contrast' => true,
    'inverse' => true,
    'zoom' => true,
    'template' => 1,
    'loadCss' => true,
    'maxZoom' => 3,
    'selectors' => [
        'appendTo' => 'body',
    ],
    'translations' => []
]));

Paste code and replace *** with your unique token that was generated in the previous step.

Finally, in the “System Events” tab, check the “OnWebPagePrerender” option and click “save”.

Step 3: Preview the site

After adding the script, test your site to make sure the widget is properly installed and works as expected. Check all the widget’s functions to verify that the installation was successful.