Widget and hosted links

The assessment runs in an iframe served by Inspecta and dropped onto your page by a single script tag. Nothing is bundled into your site, there is no npm package, and updates reach every installation without you touching the page again.

If you would rather not embed anything, the same assessment has a hosted address you can link to from anywhere.

Install the widget

1
Copy your widget ID
Open the widget in your dashboard. The ID is a short random string such as V1StGXR8Z5jdHi6B, shown alongside a ready-made snippet. Each widget has its own, and the ID is public by design: it identifies which assessment to show, and grants nothing else.
2
Paste the script tag where the assessment should appear
The assessment is inserted directly after the script tag, so put the tag exactly where you want the form, not in the page head.
3
Load the page and start an assessment
Answer a question or two and submit a test lead. It will appear in your dashboard within a few seconds, which confirms the whole path end to end.

HTML

<script src="https://getinspecta.com/api/embed.js"
  data-inspecta-widget="V1StGXR8Z5jdHi6B" async></script>

The script tag

src: Always https://getinspecta.com/api/embed.js. Do not copy the file onto your own server: it carries the origin it was served from, and a stale copy will point somewhere that no longer answers.
data-inspecta-widget: Required. The widget ID. A script tag without it is ignored, which is silent rather than an error.
async: Recommended. The loader does not need to block rendering, and the assessment is inserted relative to the script tag either way.

There are no other attributes

Colours, logo, wording, questions and the call to action all come from the widget configuration in your dashboard, not from the page it is embedded on. That keeps one widget consistent across every site it appears on, and means a marketing change never requires a developer.

What the loader does

The loader is a few dozen lines and does exactly four things. Knowing them makes styling around the widget predictable.

It finds every script tag with data-inspecta-widget and marks each one data-inspecta-mounted="true", so a script included twice mounts once.
It inserts a <div data-inspecta-container="WIDGET_ID"> immediately after the script tag, spanning the full width available.
Inside it goes an iframe pointing at /embed/WIDGET_ID, titled Mold assessment, lazy loaded, with allow="clipboard-write", no border, full width, a starting minimum height of 620px and scrolling switched off.
It listens for height messages from that frame and resizes it, so the assessment grows and shrinks with the question on screen instead of scrolling inside a box.

Styling around it

Both the container and the iframe carry data attributes you can select on. The widget fills whatever width its parent gives it, so constrain the parent rather than the iframe. Do not set a fixed height: the loader manages height, and anything you set will be overwritten on the next resize message.

CSS

/* Keep the assessment to a comfortable reading width. */
[data-inspecta-container] {
  max-width: 720px;
  margin: 0 auto;
}

Content Security Policy

If your site sends a Content Security Policy, the widget needs the script and the frame allowed. Nothing else is loaded from us.

Header

Content-Security-Policy:
  script-src 'self' https://getinspecta.com;
  frame-src  'self' https://getinspecta.com;

More than one widget on a page

Include the tag once per widget. Each mounts its own frame beside its own script tag, and each resizes independently.

HTML

<!-- Water damage page -->
<script src="https://getinspecta.com/api/embed.js"
  data-inspecta-widget="V1StGXR8Z5jdHi6B" async></script>

<!-- Further down, a second widget with its own ID -->
<script src="https://getinspecta.com/api/embed.js"
  data-inspecta-widget="9pQmT3Yw2LkXeR7c" async></script>

Hosted assessment links

Every widget also has an address of its own. It is the whole assessment as a normal page, which makes it the right choice for an email, a paid ad, a QR code on a van, or a text message to someone who just called.

Link formats

https://getinspecta.com/a/{company-slug}/{widget-slug}: The hosted assessment. Both parts are the readable slugs from your dashboard, so the link survives a widget being renamed only if you keep the slug.
https://getinspecta.com/embed/{widget-id}: The frame the loader uses. You can point your own iframe at it if you need to control the placement yourself, but then sizing becomes your responsibility.
https://getinspecta.com/report/{token}: The finished assessment, as the homeowner sees it. Anyone with the link can read it, so treat the token as the secret it is.

Where a lead's source comes from

Every assessment records where it started. Those five fields arrive in the assessment.source block of both webhook events, and they behave differently depending on how the assessment was opened.

assessment.source

pageUrl: For a hosted link, the full address the assessment was opened at, query string included. For an embedded widget the frame cannot read its parent, so this is the referrer the browser handed it instead: normally the page the widget sits on, but see the note below.
referrer: The referrer the browser reported to whatever is running the assessment. On a hosted link that is usually the search engine or the site that linked through. In an embedded widget it is your own page, so it holds the same value as pageUrl. Null when the browser sends nothing.
utmSource, utmMedium, utmCampaign: Read from utm_source, utm_medium and utm_campaign in the query string of the page running the assessment.

Attribution is weaker inside an embed

The loader does not copy your page's query string into the frame, so campaign tags on an embedded widget always arrive as null. There is no attribute that changes this.

The landing page is not guaranteed either. Because an embedded assessment reads the browser's referrer rather than your address bar, a strict Referrer-Policy on your site can reduce pageUrl to your origin with no path, or leave it empty. It is usually the full page address, but do not build reporting that depends on it.

When you need campaign or landing page attribution you can rely on, use a hosted link and put the tags on it directly: https://getinspecta.com/a/ridgeline-mold/homepage?utm_source=google&utm_medium=cpc. Those are read from the address bar and arrive in full.

When nothing appears

Nothing at all on the page. Check the browser console for a blocked request. An ad blocker, a strict Content Security Policy or a tag manager that strips data attributes will all stop the loader before it runs.
The script loads but no frame appears. The data-inspecta-widget attribute is missing or empty. The loader exits quietly in that case rather than writing an error.
The frame appears but shows an error. The widget ID does not match a live widget. Copy it again from the dashboard, and check the widget has not been paused.
The frame stays 620px tall and scrolls internally. Resize messages are not arriving. This is almost always a proxy or a browser extension rewriting the frame's origin.
It works on your machine and not for a colleague. The loader is cached for five minutes. Wait, or load the page with the cache disabled.

Shell

# Confirm the loader is being served and points at the right origin.
curl -sS https://getinspecta.com/api/embed.js | head -3

If a lead reaches your dashboard but not your own systems, the widget is doing its job and the problem is downstream. Continue with webhooks.

Webhooks

Events, exact payloads, signature verification, retries, delivery history and testing.

Errors, limits and security

The error shape, which routes are rate limited, and the rules applied to webhook targets.