Initially you will need to check Destroy session on checkout in you domain settings and set the Confirmation URL to /checkouts?/.*/thank[_|-]you
You will then need to add a script to your Shopify store that runs when the customer completes the checkout.
There are 2 options you can use to enable Destroy session on checkout on your Shopify store : Custom pixel or Additional Scripts.
Option 1: Custom Pixel (recommended)
Add a custom pixel to respond to the checkout_completed event.
1. Go to the Customer events page in your Shopify app settings https://admin.shopify.com/settings/customer_events
2. Click on Add custom pixel
3. Name the custom pixel, in this example we're calling it CH-Destroy-On-Checkout, and click Add pixel.
4. Copy the javascript below and paste it into the pixel code editor
analytics.subscribe('checkout_completed', (event) => {
try {
const crowdhandler_tokens = localStorage.getItem("crowdhandler");
const ch_tokens = JSON.parse(crowdhandler_tokens);
if (ch_tokens && ch_tokens.token) {
const href = encodeURI(event.context.document.location.href);
const public_api_key = '<CH_PUBLIC_KEY>';
const token = ch_tokens.token[event.context.document.location.hostname];
if (token) {
const uri = `https://api.crowdhandler.com/v1/requests/${token}?url=${href}&ch-public-key=${public_api_key}`;
fetch(uri, {
method: 'GET'
});
}
}
} catch (error) {
}
});It should look like this.
Replace <CH_PUBLIC_KEY> with your CrowdHandler Public API key. For example:
const public_api_key = '04d34378b3abc6e3ce870828471636b9d1e157a1b7720821aed4c260108ebe22'
5. Click Save to save your custom pixel.
6. Click Connect to connect your custom pixel to your store.
Option 2: Additional Scripts
To enable Destroy session on checkout you will be required to add the standard CrowdHandler JavaScript tag to your order status page. This can be achieved by using Shopify’s Additional scripts box.
1. Navigate to your store settings and click on Checkout.
2. Scroll down and you will find the Additional scripts box for the Order status page.
3. Insert the following script tag into the head of all pages that you want to protect.
Replace your-public-key with your Public API key.
<script src="https://wait.crowdhandler.com/js/latest/main.js?id=your-public-key"></script>
e.g. If your Public API key is 123456abcedf123456abcedf123456abcedf123456abcedf123456abcedf123 then your script tag will be
<script src="https://wait.crowdhandler.com/js/latest/main.js?id=123456abcedf123456abcedf123456abcedf123456abcedf123456abcedf123"></script>
Note that this javascript include is not the same as the file included in your theme.liquid file
4. Save your settings.
After the user is shown the order Status page their CrowdHandler session will be destroyed and they will be redirected to the waiting room when they navigate to a new page, if they are required to do so.
