Det'on Cho WIR Widget — Embed Examples

This page demonstrates how to embed the Workplace Concern Resolution Portal on your own site.

1. Iframe Embed

The simplest way to embed the widget. Copy the code below and adjust the src URL to your deployment.

<iframe
  src="/embed?mode=light&start=home&company=DetonCho"
  width="100%"
  style="min-height: 600px; border: none;"
  title="Det'on Cho Workplace Concern Resolution Portal"
></iframe>

Live preview:

2. Script Embed

Automatically mounts the widget into a div. The script handles iframe creation and auto-resizing.

<div id="dc-wir-widget"
  data-mode="light"
  data-start="home"
  data-company="DetonCho"
></div>
<script src="/embed/widget.js"></script>

Live preview:

3. Parent Page Listener

Listen for postMessage events from the widget:

window.addEventListener('message', function(event) {
  if (!event.data || !event.data.type) return;

  switch (event.data.type) {
    case 'DC_WIR_SUBMITTED':
      console.log('Case submitted:', event.data.caseId);
      console.log('Created at:', event.data.createdAt);
      break;
    case 'DC_WIR_NAV':
      console.log('Navigation:', event.data.step);
      break;
    case 'DC_WIR_HEIGHT':
      console.log('Height update:', event.data.height);
      break;
  }
});

Event log:

Listening for widget events...

Query Parameters

?mode=light|dark     — Theme mode (default: light)
?start=home|informal|formal — Starting view (default: home)
?company=DetonCho    — Company identifier