Website components

toolaby-web.js defines one element, <toolaby-user>, and reads a set of data-toolaby-* attributes on your page. Together they cover sign-in, content by sign-in state or by what the buyer owns, and selling, with no code of your own.

This page lists every attribute, part, custom property and event, then complete recipes. It assumes the script is on the page; see Your website.

<toolaby-user>

<toolaby-user></toolaby-user>

The menu opens on a click or ↓. ↑ ↓ Home End move between its items, Esc closes it and returns focus to the button, and a click outside closes it.

Attributes

Styling

The button draws in its own shadow root: your CSS does not reach inside it, and its CSS does not reach your page. It uses your page's font. Style it with these custom properties, set on toolaby-user or any ancestor:

For anything else, each part is exposed to ::part():

toolaby-user { --toolaby-accent: #635bff; --toolaby-radius: 999px; }
toolaby-user::part(avatar) { width: 36px; height: 36px; }

Events

Content by state

<div data-toolaby-signed-out hidden>
  <button data-toolaby-signin>Sign in</button>
</div>
<div data-toolaby-signed-in hidden>
  Welcome back, <span data-toolaby-name></span> (<span data-toolaby-email></span>)
</div>
<div data-toolaby-owns="word-count" hidden>Thanks for buying Word Count.</div>

Elements with these attributes are hidden until the first answer arrives, then shown or hidden by it. Give them the hidden attribute in your HTML as well, so nothing shows before the script runs.

data-toolaby-owns hides an element from a buyer who does not hold the tool. It does not keep the element's content from them: anyone can read your page's HTML. Keep content that must stay private on your server.

Buttons

<button data-toolaby-signin>Sign in</button>
<button data-toolaby-signout>Sign out</button>
<button data-toolaby-checkout="word-count">Buy</button>
<button data-toolaby-checkout="word-count" data-toolaby-plan="yearly">Subscribe yearly</button>
<button data-toolaby-trial="word-count">Try it free</button>
<button data-toolaby-portal>Manage billing</button>

• data-toolaby-checkout opens Stripe Checkout for the tool, on your Stripe account.
• data-toolaby-trial starts the tool's free trial for the signed-in buyer, then opens the after-purchase page, which signs the extension in to the buyer's account.
• data-toolaby-portal opens the Stripe customer portal for a signed-in buyer.

The trial needs no card. It lasts as long as the longest trial your plans offer, and unlocks what that plan does, with the Free plan's features. When several plans offer it, it is the one that unlocks the fewest features. One buyer has one trial of a tool.

A subscription and a trial need a signed-in buyer; a lifetime licence does not. Clicked signed out, they open the sign-in page. When the buyer returns, the checkout or the trial continues without another click. It continues once: if the page still cannot see the session, it fires toolaby:error instead of sending the buyer round again.

Attribute reference

A button that fails fires toolaby:error on itself, with event.detail.message.

Content your visitors write

If your page shows HTML that visitors write, such as comments, posts or profiles, wrap it in an element with data-toolaby-ignore. Otherwise a visitor can write <button data-toolaby-trial="word-count">, and one click by a buyer starts that buyer's only trial. Inside the wrapper, the attributes on this page do nothing.

<section data-toolaby-ignore>
  <!-- comments rendered from your database -->
</section>

Recipes

A header with the account button

<header>
  <a href="/">Word Count</a>
  <nav><a href="/pricing">Pricing</a></nav>
  <toolaby-user after-sign-out-url="/"></toolaby-user>
</header>
<script src="https://accounts.example.com/client/toolaby-web.js" defer></script>

A pricing section

<section id="pricing">
  <h2>Word Count Pro</h2>
  <p>€3 a month, or €29 once.</p>
  <button data-toolaby-checkout="word-count" data-toolaby-plan="monthly">Subscribe</button>
  <button data-toolaby-checkout="word-count">Buy once</button>
  <button data-toolaby-trial="word-count">Try it free for 7 days</button>
  <p data-toolaby-owns="word-count" hidden>You have Pro. <button data-toolaby-portal>Manage billing</button></p>
</section>

Plan ids are on the tool's Pricing page. The default plan needs no data-toolaby-plan.

A page the extension sends buyers to

An extension's Buy can open your page with ?ext=<extension id>. Pass it on, and the purchase unlocks that extension while the buyer is still looking:

<button id="buy" data-toolaby-checkout="word-count">Buy</button>
<script>
  const ext = new URLSearchParams(location.search).get('ext');
  if (ext) document.getElementById('buy').setAttribute('data-toolaby-ext', ext);
</script>

A sign-in form of your own

On your domain, a form with an email field sends the link from your page:

<form>
  <input type="email" name="email" required>
  <button data-toolaby-signin>Email me a sign-in link</button>
</form>
<p id="sent" hidden>Check your inbox.</p>
<script>
  window.addEventListener('toolaby:sent', () => { document.getElementById('sent').hidden = false; });
</script>

Through a proxy or in development the same button opens the hosted sign-in page.

See also

• Your website
• Website JavaScript
• Buyer pages