Authentified Docs

Appearance

Styling ​

The JS Widget renders in its own isolated container (a shadow root), so your page's CSS can't accidentally style it and your selectors can't accidentally match its internals. To customise how it looks, set the CSS variables listed below on the slot element (or any ancestor) — CSS variables are the one thing that reaches through the isolation, so they always apply.

Default style ​

Widget

Default hover style ​

Widget Hover

Overriding the default styles ​

The widget shares its stylesheet with the React Widget via @authentified/shared-widget, so the same --authentified-* CSS custom properties apply. Declare any of them on the slot element (or one of its ancestors) and the value cascades into the shadow root.

css
[data-authentified-widget] {
  --authentified-button-bg-color: #fff;
  --authentified-button-border-color: #000;
  --authentified-button-color: #000;

  --authentified-button-bg-color--hover: #000;
  --authentified-button-color--hover: #fff;
}
Full example ​

A complete page with the widget script loaded, a slot per line item, and the button restyled to match a light theme:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Order #1024</title>
    <style>
      [data-authentified-widget] {
        --authentified-button-bg-color: #f5f5f5;
        --authentified-button-border-color: #d4d4d4;
        --authentified-button-border-radius: 6px;
        --authentified-button-color: #171717;

        --authentified-button-bg-color--hover: #171717;
        --authentified-button-border-color--hover: #171717;
        --authentified-button-color--hover: #f5f5f5;
      }
    </style>
    <script
      src="https://unpkg.com/@authentified/js-widget@alpha/dist/umd/index.js"
      async
    ></script>
  </head>
  <body>
    <h1>Order #1024</h1>
    <ul>
      <li>
        <h3>Vintage Levi's 501</h3>
        <div
          data-authentified-widget
          data-scope="lineItem"
          data-source="shopify"
          data-shop-id="1"
          data-customer-id="777"
          data-order-id="1024"
          data-line-item-id="5678"
          data-product-id="1234"
        ></div>
      </li>
    </ul>
  </body>
</html>
Default CSS variables ​
css
:host {
  --authentified-button-bg-color: #fff;
  --authentified-button-border-color: #000;
  --authentified-button-border-radius: 0px;
  --authentified-button-border-style: solid;
  --authentified-button-border-width: 1px;
  --authentified-button-color: #000;
  --authentified-button-max-width: 30em;
  --authentified-button-padding: 0.75em 2.5em 0.6em;
  --authentified-button-transition: all ease-in 0.13s;

  --authentified-button-bg-color--hover: #000;
  --authentified-button-border-color--hover: #000;
  --authentified-button-color--hover: #fff;

  --authentified-button-sold-bg-color: #fff;
  --authentified-button-sold-border-color: rgba(0, 0, 0, 0.2);
  --authentified-button-sold-border-style: solid;
  --authentified-button-sold-border-width: 1px;
  --authentified-button-sold-color: #525252;

  --authentified-button-sold-border-color--hover: #000;
  --authentified-button-sold-bg-color--hover: #000;
  --authentified-button-sold-color--hover: #fff;
}

Targeting the sold variant ​

When the item is sold, the anchor inside the shadow root receives a data-authentified-state="sold" attribute. Different defaults apply automatically (via the --authentified-button-sold-* variables above). You can override those without inspecting label text.

Content Security Policy ​

The widget applies its stylesheet via Constructable Stylesheets, which is not blocked by strict style-src CSP directives — you do not need to allow 'unsafe-inline' to use this widget.

Older browsers that lack Constructable Stylesheets automatically fall back to an inline <style> tag inside the shadow root.

© Authentified 2026