Usage — Order level

At order level, you place a single marker element above or below the customer's order details. The customer picks which items to consign on the Authentified flow.

1. Load the widget script

Add the script once per page. It auto-initialises on DOMContentLoaded and scans the page for any element marked with data-authentified-widget.

<script src="https://unpkg.com/@authentified/js-widget@alpha/dist/umd/index.js" async></script>

2. Add a single marker per order

Drop a <div data-authentified-widget> near the order summary with data-scope="order". Omit data-product-id, data-line-item-id, and data-variant-id — they're ignored at order scope. Pick the tab below that matches how your shop integrates with Authentified — the attributes are the same, only data-source changes.

For shops that have installed the Authentified Shopify App, set data-source="shopify" (the default) and supply the Shopify data-order-id.

<section>
  <h2>Order #{{ order.id }}</h2>

  <div
    data-authentified-widget
    data-scope="order"
    data-source="shopify"
    data-order-id="{{ order.id }}"
    data-customer-id="{{ customer.id }}"
    data-shop-id="{{ shop.id }}"
  ></div>

  <!-- order details / line item list / etc. -->
</section>

See the Props page for the full list of required and optional attributes.