Docs

Embed docs

Two ways to add a calculator. Both are free, set no cookies and need no account. Use the builder to fill in the values for you.

Script tag

The main way in. The script adds the calculator right after itself and resizes the frame to fit.

HTML

<script src="https://offerscratch.barakatlabs.com/embed.js"
  data-calc="mao" data-accent="#2747D9"
  data-logo="https://example.com/logo.png"
  async></script>

Plain iframe

For site builders that strip scripts. Set a height that suits your layout; 720 pixels is a good start, and a taller value avoids an inner scrollbar.

HTML

<iframe src="https://offerscratch.barakatlabs.com/w/mao?accent=2747D9&amp;logo=https%3A%2F%2Fexample.com%2Flogo.png"
  title="Max offer calculator"
  style="width:100%;border:0;height:720px"></iframe>

Settings

Script attribute	Iframe query	Meaning
`data-calc`	the path: `/w/mao`	One of `mao` (max offer), `arv`, `repairs` or `fee` (assignment fee). Required.
`data-accent`	`accent`	A six-digit hex color, with or without the #. Default 2747D9. Anything else is ignored.
`data-logo`	`logo`	An https image address, 512 characters at most. Shown 24 pixels tall at the top. Anything else is ignored.
`data-theme`	`theme`	`light` or `dark`. Default light.

If your accent color is too pale to read as text on white, the text stays dark and the color is used on the result bar and borders only.

Pinned version and integrity

embed.js follows the latest version. If your site checks Subresource Integrity, use the pinned file, which never changes.

HTML

<script src="https://offerscratch.barakatlabs.com/embed.v1.js"
  integrity="sha384-ZsN2C2JXT6GjY4+fONACQ86Zl/oCNJU8GFt91SIlD80fwTd9INfqLHxm7iOAt9om" crossorigin="anonymous"
  data-calc="mao" data-accent="#2747D9"
  data-logo="https://example.com/logo.png"
  async></script>

Content Security Policy

If your site sends a Content-Security-Policy header, allow our origin for the frame, and for the script if you use the script tag:

Script tag

frame-src https://offerscratch.barakatlabs.com;
script-src https://offerscratch.barakatlabs.com;

Plain iframe

frame-src https://offerscratch.barakatlabs.com;

The frame loads its own logo and, only if the visitor starts the signup, a bot check from challenges.cloudflare.com. Those load inside our frame, so your policy does not need them.

Size and speed

The script is under 2 KB gzipped and makes no request except the frame itself.
The frame is lazy loaded, so it costs nothing until it is near the screen.
The math runs in the visitor's browser. Nothing is sent to us as they type.

Accessibility

Every field has a visible label, and everything works by keyboard with a visible focus ring.
The result sits in a polite live region, so a screen reader announces it as it changes.
The frame has a title that names the calculator. Add your own surrounding heading so the page reads well.
Contrast is checked against your accent color, as described above.

What visitors see

A small “Free calculator by OfferScratch” link under each calculator, and an optional box inviting visitors to join the early list for our underwriter. Those signups are OfferScratch's, not yours. See the privacy page.

Questions

Email adham@barakatlabs.com.

Want to talk it through first? Request a 15-minute intro call.