Integrate Purple Dot in React

Also see the React reference docs.

1. Install the library

npm install @purple-dot/purple-dot-react

2. Include the PurpleDot context in your app

Include the PurpleDot context in your app and pass it your API key, which you can find in your Merchant Portal. All other Purple Dot components must be children of the context.

import { PurpleDot } from '@purple-dot/purple-dot-react';
const App = () => {
return (
<PurpleDot apiKey="87d9920c-c9d4-4a17-9b77-cfd71a2d4f1a">
// Your app code
</PurpleDot>
);
}

3. Use the Purple Dot components

Use the individual Purple Dot elements anywhere in your app. Pass them the currently selected sku.

You can use the usePurpleDot() hook to get access to the underlying SDK.

import React, { useEffect } from 'react';
import { ButtonElement, usePurpleDot } from '@purple-dot/purple-dot-react';
const ProductPage = ({ product, selectedVariant, isPreorder }) => {
const purpleDot = usePurpleDot();
useEffect(() => {
if (purpleDot) {
purpleDot.on('OrderSubmitted', ({ sku }) => {
analytics.track('Purple Dot Order Submitted', { sku });
});
}
}, [purpleDot]);
return (
<div class="product-page">
<span>{product.name}</span>
<span>{product.price}</span>
{
isPreorder
? <button id="add-to-cart">Add to Cart</button>
: <ButtonElement productId={product.id} skuId={selectedVariant.id} />
}
</div>
);
}