Web SDK

Render Disco offers on any web page you control. The Web SDK is the serving integration behind two setups:

• Publishers adding DiscoOffers to their own post-purchase pages, such as order confirmation and order tracking.
• DiscoBeat channel partners serving offers on the web surfaces of the publishers on their channel. If that's you, start with How your DiscoBeat launch works for the full picture, then come back here for the build.

The steps below are the same for both.

DiscoBeat channel partners: one key per publisher

Offers serve per publisher, so the SDK loads with each publisher's own ad-serving key, created when Disco approves that publisher. Publisher keys follow the same environment split: _sandbox_ keys in staging, _live_ keys in production. Creating publishers and managing their keys is covered by Channel Management and the Channel API.

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	conditional	Plain-text email. Provide email or email_hash
email_hash	String	conditional	SHA-256 hash (lowercased, trimmed). Provide email_hash or email
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