Use this code (and your Siteimprove API KEY) to embed your scorecard to a php page / site. See it live at https://www.larimer.org/accessibility

siteimprove-embed

// as seen at https://www.larimer.org/accessibility/
// Crafted mostly Jim Vogl and Gregg Turnbull

<?php
$headers = array(
'Content-Type:application/json',
'Accept: application/json',
'Authorization: Basic FINDYOURKEYTHROUGHTHESITEIMPROVEAPI'
);

//Gather DCI metrics
$ch = curl_init();
$DCIURL='https://api.siteimprove.com/v2/sites/YOURSITEID/dci/overview';
curl_setopt($ch, CURLOPT_URL,$DCIURL);
curl_setopt($ch, CURLOPT_TIMEOUT, 30); //timeout after 30 seconds
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$dciresult=curl_exec ($ch);

//Gather Metrics
$UTURL='https://api.siteimprove.com/v2/utilization';
curl_setopt($ch, CURLOPT_URL,$UTURL);
$utilityresult=curl_exec ($ch);

/* echo $dciresult;
echo '<br />Utility: '.$utilityresult;
echo '<br />'; */

$json = json_decode($dciresult, true);
$categories=array("Accessibility","Quality Assurance","SEO");
$benchmark=array(79.5,65.5,74.3,73.1);

$catText = array("This score indicates how well the site meets the standards set out in WCAG (Web Content Accessibility Guidelines) 2.0.", "This score indicates how credible and usable the user-facing aspects of the site are.", "This score indicates how well the user-facing and technical aspects of your site contribute to search engine optimization, and ultimately, higher rankings and organic traffic.", "This overall score measures the quality and potential impact of the site's digital presence, including its accessibility and usability, its credibility and trustworthiness, and how well-poised it is to respond to SEO challenges. The final DCI Score is calculated as an overall score of points awarded in three categories: Accessibility, Quality Assurance, and SEO.");

$terms=array();
$terms[]=array("A weighted measure of how well your site conforms to WCAG, based on the proportion of pages which have two or more Level A or AA errors.", "How well your site adheres to WCAG 2.0, as determined by the number of automatically detected failures to meet success criteria at Levels A, AA, and AAA.", "How well your site meets best practices at Levels A, AA, and AAA of WCAG 2.0. Non-conformance to best practices are measured by the number of 'warnings' on your site.");

$terms[]=array("The quality of your site's content, which affects how quickly and accurately users are able to comprehend it.", "How up-to-date a site's content is, which affects user retention and engagement. It also impacts a site's SEO rankings.", "How vigilant your site has been in only linking to safe domains and in keeping users' personal information private.","How conducive content is to the usability of your site.");

$terms[]=array("The quality of a site's visitor-facing content with respect to how it engages users, and whether meta content is optimized for search engines and users.", "How responsive or adaptable a site is to being used and displayed on a mobile device.", "How well the technical elements of a site enable it to be accessed, crawled, and indexed by search engine bots.", "How effectively embedded information like links and visuals is used to enhance the user experience.");

$dci=array();
$labels=array();
$values=array();
$total=array();
$i=0;
foreach($json as $obj){
    if($i<sizeof($categories)) {
        $dci[$categories[$i]]=$obj;
        if($i==0) {
            $totalKey=2;
        } else {
            $totalKey=3;        
        }
        $labels[$categories[$i]]=array_keys($obj);
        $values[$categories[$i]]=array_values($obj);
        $total[$i]=$values[$categories[$i]][$totalKey];     
        unset($labels[$categories[$i]][$totalKey]);
        unset($values[$categories[$i]][$totalKey]);
    }
    if($i==3) {
        $overall=$obj;
    }
    $i++;
}
$json2 = json_decode($utilityresult, true);
$labels2=array();
$values2=array();
$labels2=array_keys($json2);
$values2=array_values($json2);
?>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<style>h6 { margin-bottom: 0px; }
.charts h3 { margin-top: 0px; }
.pie-chart { width: 100%; height: 180px; } 
.bar-chart { width: 100%; height: 230px; }
.benchmark { font-size: .85em; }
.big-label { font-size:3.5em;color:#555; }
</style>
<div class="row charts">
    <div class="col-sm-4 col-xs-12">
        <div id="pie-access3" class="pie-chart"></div>
        <div class="text-center benchmark">Government Benchmark:<br><span class="badge badge-inverse"><?=$benchmark[3] ?>%</span></div>
    </div>
    <div class="col-sm-8 col-xs-12">
        <div style="width: 100%">
        <h3>Digital Certainty Index</h3>
        <?php
        print "<p>".$catText[3]."</p><hr/>";
        for ($i=0;$i<3;$i++) { 
            print '<strong class="ttl-label">'.ucwords($labels2[$i]).':</strong> <span class="">'.number_format($values2[$i])."</span> &nbsp; &nbsp; &nbsp; ";
        }
        ?>
        </div>
    </div>
</div>

<?php
$c=0;
foreach($categories as $cat){
?><hr/> 
<div class="row charts">
    <div class="col-sm-4 col-xs-12">
        <div id="pie-access<?=$c?>" class="pie-chart"></div>
        <div class="text-center benchmark">Government Benchmark:<br><span class="badge badge-inverse"><?=$benchmark[$c] ?>%</span></div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <?php echo '<h3>'.$categories[$c].'</h3><p>'.$catText[$c].'</p>';
        echo '<p><span class="btn btn-xs" style="background: #666">Terms</span> ';
        $b=0;
        foreach($labels[$categories[$c]] as $lbl) {
            echo '<a class="btn btn-xs btn-white" href="javascript:void(0)" data-toggle="popover" data-placement="top" data-html="true"  data-trigger="hover" title="'.$lbl.'" data-content="'.$terms[$c][$b].'">'.$lbl.'</a> ';
            $b++;
        }   
        echo '</p>';
        ?>
    </div>
    <div class="col-sm-4 col-xs-12">
        <div id="line-access<?=$c?>" class="bar-chart"></div> 
    </div>
</div>
<?php 
$c++;
} ?>
<script>    
Highcharts.chart('pie-access3', {
    chart: {
            type: 'solidgauge'
        },
        title: null,
        pane: {
            center: ['50%', '50%'],
            size: '100%',
            startAngle: 0,
            endAngle: 360,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '85%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#DF5353'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#55BF3B'] // red
            ],
            min: 0,
            max: 100,
            lineWidth: 2,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: 25,
                text: 'DCI'
            },
            labels: {
                enabled: false
            }
        },
    credits: {
        enabled: false
    },
        plotOptions: {
            solidgauge: {
             innerRadius: '85%',
                dataLabels: {
                    y: -20,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },
        

        series: [{
            name: '%',
            data: [<?=round($overall,1)?>],
            dataLabels: {
                format: '<div class="text-center big-label">{y}</div>'             
            },
            tooltip: {
                valueSuffix: '% Score'
            }
        }]
}); 
<?php
$c=0;
foreach($categories as $cat){
// ucwords(
    $label= "'".implode("','",$labels[$cat])."'";
    $value= implode(",",$values[$cat]);
?>
Highcharts.chart('line-access<?=$c?>', {
    chart: {
        type: 'bar'
    },
    title: {
        y: 25,
        text: '<?=$categories[$c]?>'
    },
//    subtitle: {
//        text: 'Source: <a href="https://www.SiteImprove.com">SiteImprove.com</a>'
//    },
    xAxis: {    
        categories: [<?=ucwords($label)?>],
        title: {
            text: null
        }
    },
    yAxis: {
        stops: [
                [0.1, '#DF5353'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#55BF3B'] // red
        ],
        min: 0,
        max: 100,
        title: {
            text: '% Score',
            align: 'high'
        },
        labels: {
           overflow: 'justify'
        }
    },
    min: 0,
    max: 100,   
    borderWidth: 0,
    credits: {
        enabled: false
    },
    tooltip: {
            enabled: false
     },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    series: [{
        name: '<?=$categories[$c]?>',
        data: [<?=$value?>],
        color: '#005569'
    }
    ]
});

Highcharts.chart('pie-access<?=$c?>', {
    chart: {
            type: 'solidgauge'
        },
        title: null,
 pane: {
            center: ['50%', '50%'],
            size: '100%',
            startAngle: 0,
            endAngle: 360,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '85%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#DF5353'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#55BF3B'] // red
            ],
            min: 0,
            max: 100,
            lineWidth: 2,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: 25,
                text: '<?=$categories[$c]?>'
            },
            labels: {
                enabled: false
            }
        },
    credits: {
        enabled: false
    },
        plotOptions: {
            solidgauge: {
             innerRadius: '85%',
                dataLabels: {
                    y: -20,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },
        

        series: [{
            name: '%',
            data: [<?=round($total[$c],1)?>],
            dataLabels: {
                format: '<div class="text-center big-label">{y}</div>'             
            },
            tooltip: {
                valueSuffix: '% Score'
            }
        }]
}); 
<?php
$c++;
} ?>
</script>