Calculator embeds reference

The seller net sheet and the mortgage calculator are two custom HTML elements, <bna-net-sheet> and <bna-mortgage>. One script defines both. The builder writes the code for you; this page is for anyone who wants to set it by hand or wire it into their own site.

They don’t need an account. Leads are optional, and the lead form needs the widget key of a Broker & Agent website.

The snippet#

<script src="https://brokerandagent.com/embed/v1.js" async></script>
<bna-net-sheet states="FL" agent="Jordan Lee">
  Seller net sheet calculator by <a href="https://brokerandagent.com/tools/seller-net-sheet-calculator">Broker &amp; Agent Solutions</a>
</bna-net-sheet>

• The script can sit anywhere on the page and load async. Pasting it twice is harmless: the elements are only defined once.
• The text inside the element becomes the credit line under the calculator. Keep it as it is.
• Several calculators can share a page and one script.

Attributes#

Attributes are plain HTML, so the snippet stays readable. Changing theme, accent, radius, font, size, button-color, sticky or sticky-top after the page loads redraws the calculator; set the rest before the element is added to the page.

Both calculators#

<bna-net-sheet>#

Commissions are negotiable. Set the numbers you actually use.

<bna-mortgage>#

Leads#

The lead form appears when the calculator finds your website’s widget key. It looks, in order:

1. a key attribute on the element;
2. the data-key on the widget snippet’s tag (widget.js, the script that runs the website assistant), if it’s on the page;
3. the snippet’s own window.__baWidget.lead(), if the snippet was added another way.

With none of those, there’s no lead form at all, and the calculator still works on any site.

When a visitor presses Send, the calculator posts to our public lead endpoint with:

• their name, email and phone;
• a one-line summary of their numbers, as the note;
• intent: sell for the net sheet, buy for the mortgage calculator;
• the page they were on and the referrer;
• whether they agreed to texts, when they typed a phone number (the consent box appears then).

The lead lands in Site Manager → Leads as a website contact, and the agent gets an email. The widget key follows your site’s domain lock in Site Manager settings: with no domains listed, a key works anywhere, so list yours.

Events#

Both events bubble and cross the shadow boundary, so you can listen on the element or on document.

document.addEventListener('bna-lead', (e) => {
  analytics.track('Calculator lead', { calculator: e.detail.calculator });
});

Carrying the numbers to your own form#

With cta-href, the numbers never go in the link, where they would land in analytics and server logs. Instead, on click the calculator saves them in the visitor’s own browser, and your contact page can pick them up:

const saved = JSON.parse(sessionStorage.getItem('bna:numbers') || 'null');
if (saved && Date.now() - saved.at < 30 * 60 * 1000) {
  document.querySelector('textarea[name=message]').value = saved.summary;
}

Security settings#

If your site sends a Content-Security-Policy header, allow:

Frameworks and single-page apps#

The elements are standard custom elements, so they work in React, Vue, Svelte or plain HTML. Load the script once, then render the tag with string attributes. Elements added later, after a route change for example, set themselves up when they’re attached. In React, attach event listeners through a ref rather than an on… prop.

How it behaves#

• Isolated. Each calculator draws inside a shadow root: your CSS can’t break it, and its CSS can’t reach your page.
• Responsive. It sizes to its container, not the window, and moves to two columns at 680px wide.
• Light. About 32 KB compressed, most of it the state rules. It loads after your page and sets no cookies.
• Private until sent. Numbers a visitor types stay in their browser. Only pressing Send sends anything, and only then does it save a visitor ID in their browser, the same one the widget snippet uses, so a calculator lead joins that visitor’s history.
• Accessible. Every field works from the keyboard, the result is announced to screen readers, and motion stops for visitors who ask their device for less.
• Current. It uses the same state rules as our calculators, so tax changes reach your page with no new code.

Versions#

v1.js is a promise: attributes can be added, never renamed or removed. A breaking change would ship as v2.js, and v1.js keeps working.