Integrate Purple Dot

In general, to add the Purple Dot button to your product pages, you need to:

  1. Load the Purple Dot JavaScript SDK. The SDK is used to configure and load the button.

  2. Conditionally show the Purple Dot button for pre-order products. Typically, it will be replacing the Add to Cart button. The pre-order status of a product can be indicated by stock being 0 or a pre-order tag on the product.

  3. Style the button to match your store's branding. The button is highly customisable and can match the look and feel of your Add to Cart button.

  4. (Optional) Forward events to your analytics. The SDK emits events that let you forward key user actions like making an order to your analytics or CRM tools.

Note that in order for the button to load, the product you're using has to have a Waitlist set up (you can do this in the Merchant Portal).