Action Toolkit

Embeddable State Comparison Widget

A drop-in HTML/JS snippet for coalition partner websites. Select any two states to compare key home care workforce metrics side-by-side. Responsive, lightweight, no dependencies.

Live demo

Try the widget

Select two states below to see the comparison. This is the same widget your visitors will see when you embed it.

Embed code

Copy and paste into your website

The widget below is fully self-contained — no external stylesheets, no frameworks, no dependencies. Paste it into any HTML page, WordPress post, or Squarespace code block.

Embed snippet

Copy the entire code block below and paste it where you want the widget to appear on your site.

<div id="ccorg-compare"></div>
<script>
(function(){
  var D={
    "CA":{n:"California",w:"$17.28/hr",o:"Full OT",h:"47.5%",p:"Top tier",k:"700K+"},
    "CT":{n:"Connecticut",w:"$18.83/hr",o:"Full OT",h:"~58%",p:"Mid-upper",k:"56K+"},
    "HI":{n:"Hawaii",w:"~$17.26/hr",o:"Full OT",h:"~67%",p:"Mid-upper",k:"11K+"},
    "IL":{n:"Illinois",w:"$17.09/hr",o:"Full OT",h:"49.4%",p:"Mid",k:"139K+"},
    "MA":{n:"Massachusetts",w:"$18.54/hr",o:"Full OT",h:"69.5-77%",p:"#6",k:"114K+"},
    "MD":{n:"Maryland",w:"$17.43/hr",o:"Full OT",h:"69.5%",p:"~#14",k:"65K+"},
    "MI":{n:"Michigan",w:"$16.92/hr",o:"Partial",h:"~57%",p:"~#22",k:"168K+"},
    "MN":{n:"Minnesota",w:"$16.64/hr",o:"Full OT",h:"84.0%",p:"Upper",k:"139K+"},
    "NV":{n:"Nevada",w:"$25.00/hr",o:"Full OT",h:"~57%",p:"Improving",k:"15K+"},
    "NJ":{n:"New Jersey",w:"$17.54/hr",o:"Full OT",h:"~67%",p:"#5",k:"105K+"},
    "NY":{n:"New York",w:"$18.26/hr",o:"Full OT",h:"76.6%",p:"Top tier",k:"623K+"},
    "OR":{n:"Oregon",w:"$18.50/hr",o:"Full OT",h:"80.5%",p:"#3",k:"33K+"},
    "PA":{n:"Pennsylvania",w:"~$14.09/hr",o:"Agency only",h:"~42%",p:"Lower-mid",k:"217K+"},
    "VT":{n:"Vermont",w:"~$17.00/hr",o:"Full OT",h:"~70%",p:"Mid-upper",k:"8K+"},
    "WA":{n:"Washington",w:"$19.50/hr",o:"Full OT",h:"82.7%",p:"#1",k:"79K+"},
    "WI":{n:"Wisconsin",w:"$15.75/hr",o:"No state OT",h:"~60%",p:"Lower",k:"48K+"},
    "CO":{n:"Colorado",w:"$16.50/hr",o:"Full OT",h:"~65%",p:"Mid-upper",k:"42K+"},
    "FL":{n:"Florida",w:"$14.23/hr",o:"No state OT",h:"~45%",p:"Lower",k:"230K+"},
    "TX":{n:"Texas",w:"$13.59/hr",o:"No state OT",h:"~50%",p:"Lower",k:"370K+"},
    "OH":{n:"Ohio",w:"$15.10/hr",o:"No state OT",h:"~55%",p:"Mid",k:"165K+"}
  };
  var M=[["w","Median/Mean Wage"],["o","OT Protections"],["h","HCBS % of LTSS"],["p","PHI Ranking"],["k","Workforce Size"]];
  var el=document.getElementById("ccorg-compare");if(!el)return;
  var ks=Object.keys(D).sort(function(a,b){return D[a].n.localeCompare(D[b].n)});
  var ss='padding:8px 12px;font-size:14px;border:1px solid #d4cdc4;background:#faf8f5;min-width:180px;';
  var c=document.createElement("div");c.style.cssText="display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;font-family:-apple-system,sans-serif;";
  var a=document.createElement("select");a.style.cssText=ss;
  var b=document.createElement("select");b.style.cssText=ss;
  a.innerHTML=b.innerHTML='<option value="">Select state...</option>';
  for(var i=0;i<ks.length;i++){var o='<option value="'+ks[i]+'">'+D[ks[i]].n+'</option>';a.innerHTML+=o;b.innerHTML+=o;}
  var v=document.createElement("span");v.textContent="vs.";v.style.cssText="font-size:13px;color:#718096;font-weight:600;";
  c.appendChild(a);c.appendChild(v);c.appendChild(b);el.appendChild(c);
  var out=document.createElement("div");el.appendChild(out);
  function r(){var sa=D[a.value],sb=D[b.value];if(!sa||!sb){out.innerHTML="";return;}
    var h='<table style="width:100%;border-collapse:collapse;font-family:-apple-system,sans-serif;font-size:14px;">';
    h+='<thead><tr><th style="text-align:left;padding:8px 12px;border-bottom:2px solid #1a1a1a;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#718096;background:#f5f0e8;">Metric</th>';
    h+='<th style="text-align:left;padding:8px 12px;border-bottom:2px solid #1a1a1a;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#1a6b5a;background:#f5f0e8;">'+sa.n+'</th>';
    h+='<th style="text-align:left;padding:8px 12px;border-bottom:2px solid #1a1a1a;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#c23b22;background:#f5f0e8;">'+sb.n+'</th></tr></thead><tbody>';
    for(var i=0;i<M.length;i++){h+='<tr><td style="padding:8px 12px;border-bottom:1px solid #e8e2d9;font-weight:600;">'+M[i][1]+'</td><td style="padding:8px 12px;border-bottom:1px solid #e8e2d9;">'+sa[M[i][0]]+'</td><td style="padding:8px 12px;border-bottom:1px solid #e8e2d9;">'+sb[M[i][0]]+'</td></tr>';}
    h+='</tbody></table><p style="font-size:11px;color:#718096;margin-top:8px;">Source: <a href="https://caregivercrisis.org/states/" style="color:#1a6b5a;">CaregiverCrisis.org</a> | BLS 2024 | PHI 2024</p>';
    out.innerHTML=h;}
  a.addEventListener("change",r);b.addEventListener("change",r);
})();
</script>
Platform-specific instructions

WordPress: Add a “Custom HTML” block in the block editor and paste the code above.

Squarespace: Add a “Code” block and paste the code. Ensure “Display Source” is unchecked.

Raw HTML: Paste anywhere in your page’s <body>. The widget creates its own container and styles.

Customization

Modifying the widget

Change the color scheme

The widget uses three colors: #1a6b5a (teal, for State A headers), #c23b22 (red, for State B headers), and #f5f0e8 (warm paper, for header backgrounds). Find and replace these hex values in the embed code to match your site’s brand.

Add or remove metrics

The metrics displayed are defined in the M array. Each entry is a pair: ["key", "Label"]. The data keys are: w (wage), o (OT status), h (HCBS %), p (PHI rank), k (workforce size). To remove a metric, delete its entry from the M array. To add a metric, add a new key-value pair to each state in the D object and a corresponding entry in M.

Set default states

To pre-select states when the widget loads, add these lines before the closing })();:
a.value = "WI"; b.value = "MN"; r();
Replace “WI” and “MN” with the two-letter abbreviations of your preferred default states.

Data updates

The widget data is hardcoded in the embed snippet. When CaregiverCrisis.org updates state data (BLS annual releases, new state profiles), we will update this page with a refreshed embed snippet. Check back periodically or follow the project for update notifications. The widget currently includes data for 20 states.

Resources

Related tools

State data

State Profiles

Full 89-metric profiles for each state. The widget surfaces key metrics; the profiles provide the complete picture with source citations.

→ Browse state data
Data

Research Spreadsheet

90+ metric template with all the data behind the widget. Build your own analyses and visualizations.

↓ Download .xlsx
Coalition building

For Coalitions

Framing guides and campaign resources for organizations embedding this data on their own sites.

→ Coalition resources
Press

For Journalists

Key data points, story frameworks, and citable statistics. The widget complements newsroom data needs.

→ Press resources

← Back to Action Toolkit