Status UI pattern

A beginner-friendly pattern assembled from shipped helpers so your page can explain connection and allow-list state clearly.

RTO_helpers Copy/paste ready Product-grade integration

Best for

The first useful operator-facing status strip on a real page.

Built from

RTO_connector.js, RTO_domainList.js, and small page-side markup.

Why it matters

It turns extension state into a friendly, trust-building UI.

Summary

Beginner-friendly status banner pattern (detect + allow-list).

Exports: (none) — this page documents a small pattern, not a shipped standalone helper file
Depends on: RTO_form_api.js, RTO_connector.js, RTO_domainList.js
Uses data attributes: none

What it is

A very small, beginner-friendly status UI pattern that shows:

Extension detected / not detected
Host allowed / not allowed

There is no standalone RTO_status_ui.js file in the current local helper set. Use the shipped helpers below and build the banner directly in your page.

Files to load

../RTO_helpers/RTO_form_api.js
../RTO_helpers/RTO_connector.js
../RTO_helpers/RTO_domainList.js

Example

<div id="rtoStatus" style="padding:12px;border:1px solid #d0d7de;border-radius:12px">Checking RTO...</div>

<script src="../RTO_helpers/RTO_form_api.js"></script>
<script src="../RTO_helpers/RTO_connector.js"></script>
<script src="../RTO_helpers/RTO_domainList.js"></script>
<script>
RTOconnectOnce(1500).then(function(connected){
  var host = location.hostname;
  var box = document.getElementById("rtoStatus");

  if(!connected){
    box.textContent = "RTO extension not detected.";
    return;
  }

  return RTOAllowlist.has(host).then(function(allowed){
    box.textContent = allowed
      ? "RTO ready on " + host
      : "RTO detected, but " + host + " is not allow-listed yet.";
  });
});
</script>

Why this page exists