Web SDK

Display DiscoOffers on your order confirmation page to monetize post-purchase traffic.

1. Load the SDK

Add this script to your <head>.

Recommended — replace disco_pk_live_... with your Disco public key.

<script
  src="https://d1zcmvsklxjbur.cloudfront.net/static/disco-sdk.js"
  type="text/javascript"
  api_key="disco_pk_live_..."
></script>

Legacy — replace PUBLISHER_ID with your ID.

<script
  src="https://d1zcmvsklxjbur.cloudfront.net/static/disco-sdk.js"
  type="text/javascript"
  publisher_id="PUBLISHER_ID"
></script>

Environment

Add environment="staging" to hit the staging environment instead of production. When using api_key with staging, use a _sandbox_ key — _live_ keys are not accepted in staging.

2. Add the mount point

Place this where you want DiscoOffers to appear. The top of the page is recommended.

<div id="disco-widget"></div>

3. Pass order data

Call loadWidget() as soon as order data is available. The more context you pass, the more relevant the recommendations Disco can serve your shoppers — which is also what drives your earnings.

window.discoLauncher.loadWidget({
  email: "shopper@example.com",     // required (or email_hash)
  email_hash: "sha256...",          // required (or email)
  first_name: "Monica",             // required
  order_id: "67890XYZ",             // required
  page_type: "thank_you",           // "thank_you" | "order_status"
  purchases: [                      // required
    { product_id: "PROD123", name: "Headphones", type: "Electronics", quantity: "1" }
  ],
  cost: "124.00",
  phone: "+1 (415) 123-4567",
  shipping: { address_line_1: "123 Main St", city: "San Francisco", state: "CA", zip: "94105" }
});

info

page_type only accepts "thank_you" or "order_status".

GTM setup

Integrate via Google Tag Manager. Direct SDK integration (above) is recommended for best results.

1. Push data to the Data Layer

window.dataLayer.push({ email: "shopper@example.com" });

2. Create a Data Layer Variable — In Google Tag Manager, go to Variables → User-Defined Variables → New, set type to Data Layer Variable, enter the key name (e.g. email) and save.

3. Create a Custom HTML Tag

<script
  src="https://d1zcmvsklxjbur.cloudfront.net/static/disco-sdk.js?publisher_id=PUBLISHER_ID"
  type="text/javascript"
></script>

info

Enable Support document.write in the tag settings.

4. Set the trigger — Single-page app: use a History Change trigger set to Some History Changes, matched to your confirmation-page URL. Multi-page app: use a Page View trigger set to Some Page Views, matched to your confirmation-page URL.

Field reference

Complete field definitions for loadWidget().

Customer fields

Field	Type	Required	Details
`email`	String	✓	Plain-text email
`email_hash`	String	✓	SHA-256 hash (lowercased, trimmed)
`first_name`	String	✓	Shopper first name
`last_name`	String		Shopper last name
`phone`	String		Phone number (any format)
`order_id`	String	✓	Unique order identifier
`confirmation_id`	String		Confirmation identifier
`cost`	String		Total order cost
`page_type`	Enum	✓	`"thank_you"` or `"order_status"`
`purchases`	Array	✓	Purchased items array
`shipping`	Object		Shipping address
`billing`	Object		Billing address
`click_id`	String		Click identifier for attribution

Purchase item fields

Field	Type	Details
`product_id`	String	Unique product ID
`name`	String	Product name
`type`	String	Product category
`description`	String	Product description
`variant`	String	Color, size, etc.
`quantity`	String	Quantity purchased

Address fields (used for both shipping and billing)

Field	Type	Details
`address_line_1`	String	Street address
`address_line_2`	String	Apt, suite, unit
`city`	String	City
`state`	String	State or province
`zip`	String	ZIP / postal code

1. Load the SDK​

2. Add the mount point​

3. Pass order data​

GTM setup​

Field reference​

1. Load the SDK

2. Add the mount point

3. Pass order data

GTM setup

Field reference