Skip to content

The rule builder in your app

Let your customers build their own photo checks without leaving your product. Sight's rule builder (the same one as in the Sight console) shows inside a page of your app, for one company at a time, with no Sight sign-in.

Your customer can list the company's rule sets, change one, preview it on recent jobs, and make it live. Every change is recorded as made by your API key through the builder in your app.

How it works

  1. Your server makes a token. With your API key, it asks Sight for an embed token for one company and one web address: the page of your app that will show the builder. The token lasts 30 minutes by default (at most 60).
  2. Your page shows the builder. It puts Sight's builder in a frame using the link that came with the token. The browser gets the token, never your API key.
  3. The builder tells your page what happened: ready, a version saved, a version made live, and its height, so the frame always fits.

On your server

You need an API key allowed Check templates (Company → API keys). A reseller's key can make a token for any client company it sells to.

import { ChecksClient } from "@raku-technologies/sight";   // 0.8.0 or later

const checks = new ChecksClient({ apiKey: process.env.SIGHT_API_KEY! });

// In the route that serves your "Photo rules" page:
const embed = await checks.createEmbedToken("https://app.example.com", {
  account: clientCompanyId,   // leave out for your own company
  minutes: 30,
});
// send embed.url to the page

curl https://sightapi.raku.so/checks/embed-tokens \
  -H "X-Api-Key: $SIGHT_API_KEY" -H "Content-Type: application/json" \
  -d '{"origin": "https://app.example.com", "account": "<client company id>"}'

The answer:

{
  "token": "sight_embed_…",
  "url": "https://sight.raku.so/embed/rules?origin=https%3A%2F%2Fapp.example.com#token=sight_embed_…",
  "expires_at": "2026-10-12T09:30:00+00:00",
  "origin": "https://app.example.com",
  "account": "<client company id>",
  "can": ["rules"]
}

origin is the web address of your page as a browser writes it: https://, the host name, and a port only if you use one; no path. While you build, http://localhost:<port> works too.

Make a new token each time the page loads, and only for the company the person looking at the page belongs to. Deciding that is your app's job: Sight trusts your key to have asked.

In your page

import { mountRuleBuilder } from "@raku-technologies/sight";

const builder = mountRuleBuilder(document.getElementById("photo-rules")!, {
  url: embedUrlFromYourServer,
  onEvent: (event) => {
    if (event.type === "live") showToast(`Version ${event.version} of ${event.key} is live`);
  },
});

// When the person leaves the page:
builder.destroy();

<iframe id="photo-rules" src="EMBED_URL_FROM_YOUR_SERVER"
        title="Rule builder" style="width: 100%; border: 0; height: 640px"></iframe>
<script>
  const frame = document.getElementById("photo-rules");
  window.addEventListener("message", (message) => {
    // Only Sight's own frame, and only Sight's own messages.
    if (message.origin !== "https://sight.raku.so" || message.source !== frame.contentWindow) return;
    if (message.data?.source !== "sight") return;
    if (message.data.type === "height") frame.style.height = `${Math.ceil(message.data.height)}px`;
  });
</script>

What the builder tells your page

type With When
ready company: its name The builder has loaded the company's rule sets
saved key, version A version was saved as a draft. Nothing uses it yet
live key, version A version was made live. New jobs use it from now on
height height, in pixels The builder's height changed. The SDK resizes the frame for you
error message The builder could not open, for example because the token expired

Each message also carries source: "sight".

What a token can and cannot do

A token… What that means
works for one company the one named when it was made
only builds rules list, read, save, preview and make live rule sets; nothing about photos or results
works only inside your page the browser refuses to show the builder framed by any other website, and every call it makes names your website, which must match
lasts at most an hour then the builder says the token has expired; reload the page for a new one
stops with your key revoke the key, or take away its Check templates permission, and every token it made stops at once
is shown once Sight keeps only a fingerprint of it (a SHA-256 hash), like an API key

Treat the token like a short-lived password: anyone holding it can change that company's rule sets until it expires, so never put it in a link you share or a log you keep. Your API key itself must never reach a browser.

What gets recorded

Each saved version and each version made live appears in the company's Activity, for example:

The reseller's API key, through the rule builder in its app, made version 2 of the check template "site-completion" live (it was version 1).

The same rules apply as everywhere else: a new version must be previewed on recent jobs before it can be made live, and jobs already started keep the version they started with. See Writing templates.