# Checkout Champ Integration

{% hint style="danger" %}
**This is a theory guide, not a validated how-to.** Intelligems has attempted to work with Checkout Champ to test and validate this integration, but has not received a response from their team. The approach below is based on our understanding of how both platforms work. **QA all tests thoroughly before publishing.**
{% endhint %}

## Overview

[Checkout Champ](https://checkoutchamp.com/) is a standalone checkout platform that can replace Shopify's native checkout. Because orders are processed outside of Shopify's standard checkout flow, Intelligems needs a small custom integration to properly attribute those orders to the correct experiment session and test group.

This guide covers how to pass Intelligems tracking data through Checkout Champ so that orders are included in your experiment results. **This approach supports Content and Split URL tests only.** Price, Shipping, and Offer tests require Intelligems to modify what is shown inside Checkout Champ's checkout — we have not found a documented way to do this. If you need this, please ask Checkout Champ to work with Intelligems directly to make it possible.

### How It Works

Intelligems tracks visitor behavior on your Shopify storefront and assigns each visitor a unique ID (`igId`) and a test group (`igTestGroups`). For orders placed through Shopify's native checkout, Intelligems captures these automatically. For orders placed through Checkout Champ, you need to pass these values manually.

A script on your Shopify product page intercepts the **Add to Cart** button click, reads the visitor's Intelligems values via the JS API, appends them as URL parameters to your Checkout Champ checkout URL, and redirects the visitor there. Checkout Champ then reads those parameters and stores them as order attributes, which sync back to Shopify.

{% hint style="info" %}
This integration only works for funnels built with the Checkout Champ funnel builder
{% endhint %}

### Prerequisites

* Intelligems is installed and running on your Shopify storefront
* You have a Checkout Champ funnel set up with a Checkout Champ-hosted checkout page

## How to Integrate Intelligems with Checkout Champ

### Step 1: Get Your Test ID

You'll need your Intelligems test ID to retrieve the visitor's test group assignment at runtime.

1. In the Intelligems app, navigate to your experiment
2. Click the **more options menu** (⋯) and select **Show Info**
3. Copy the **Test ID** — you'll use this in the script below

### Step 2: Add the Script to Your Shopify Theme

Add Javascript to the product page(s) where you want to redirect customers to Checkout Champ. 

This Javascript should pull the following from [Intelligems Javascript API](https://docs.intelligems.io/developer-resources/javascript-api):

* igId
* igTestGroups
* igPreview

And then append them as URL parameters to your Checkout Champ checkout URL.

In theory, the script should look similar to the below:

```html
<script>
(function () {
  // Guard: only run on pages where Checkout Champ is active
  if (!window.IS_CC_TEMPLATE) return;

  // 🔧 CONFIGURE THESE VALUES:
  // Your Checkout Champ checkout URL (include product IDs and quantities)
  var CC_CHECKOUT_URL = "https://get.yourdomain.com/checkout?products=PRODUCT_ID:QUANTITY";

  // Your Intelligems Experiment ID (find it under Show Info in the Intelligems app)
  var TEST_ID = "YOUR_EXPERIMENT_ID_HERE";

  // -------------------------------------------------------
  // Helper: extract the last segment of a UUID (e.g. "e9c697cafb2c" from a full UUID)
  function shortId(uuid) {
    return uuid ? uuid.split('-').pop() : null;
  }

  // Helper: read Intelligems tracking values
  function getIgData() {
    var igId = window.igData?.user?.igId || null;

    // Test group short ID for the configured experiment
    var testGroup = null;
    var igTestGroups = null;
    try {
      testGroup = window.igData?.user?.getTestGroup(TEST_ID);
      igTestGroups = shortId(testGroup?.id);
    } catch (e) {}

    // Preview mode flag — "true" if any active experiment is in preview mode
    var igPreview = null;
    try {
      var experiments = window.igData?.user?.getExperiments() || [];
      var inPreview = experiments.some(function (exp) { return exp.isPreview; });
      igPreview = String(inPreview);
    } catch (e) {}

    return { igId, igTestGroups, igPreview };
  }

  // Helper: build the Checkout Champ URL with IG params appended
  function buildCCUrl() {
    var url = new URL(CC_CHECKOUT_URL);
    var data = getIgData();

    if (data.igId)         url.searchParams.set('cc_custom_igId', data.igId);
    if (data.igTestGroups) url.searchParams.set('cc_custom_igTestGroups', data.igTestGroups);
    if (data.igPreview)    url.searchParams.set('cc_custom_igPreview', data.igPreview);

    return url.toString();
  }

  // Redirect the customer to Checkout Champ
  function redirectToCC() {
    document.body.classList.add('cc-redirecting');
    window.location.href = buildCCUrl();
  }

  // -------------------------------------------------------
  // Ensure Intelligems is loaded before we need the data.
  // We listen for the ig:ready event, with a fallback timeout.
  var igReady = false;
  window.addEventListener('ig:ready', function () {
    igReady = true;
  });

  // Fallback: if ig:ready fired before this script loaded, proceed anyway
  setTimeout(function () {
    if (!igReady) igReady = true;
  }, 1500);

  // -------------------------------------------------------
  // Intercept Add to Cart button clicks and redirect to CC instead
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('button, input');
    if (!btn) return;

    var isAtc =
      btn.matches('button[type="submit"], input[type="submit"]') ||
      btn.getAttribute('name') === 'add' ||
      btn.matches('[name="add"]');

    if (!isAtc) return;

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    redirectToCC();
  }, true);

  // Backup: intercept form submit in case the click handler is missed
  document.addEventListener('submit', function (e) {
    if (!e.target) return;
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    redirectToCC();
  }, true);

})();
</script>
```

{% hint style="warning" %}
**Multiple experiments** — if you are running multiple simultaneous Intelligems experiments, you need to pass multiple test group IDs.&#x20;
{% endhint %}

### Step 3: How Checkout Champ Captures the Data

No configuration is required inside Checkout Champ. When the visitor lands on the Checkout Champ page via the redirect URL containing `cc_custom_*` parameters, Checkout Champ should automatically reads those values and stores them as order attributes \[[Article](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/pass-custom-parameter-on-url-and-store-onto-order)]. These attributes are then synced back to the Shopify order.

The resulting Shopify order will contain attributes like:

| Attribute      | Example Value                                         | Notes                                       |
| -------------- | ----------------------------------------------------- | ------------------------------------------- |
| `igId`         | `ig_a1a1a11a11aaa1a1a11a11aaa1a1a11a11aaa1a1a11a11aa` | Full Intelligems visitor ID                 |
| `igTestGroups` | `a1a1a11a11aa`                                        | Last segment of the test group UUID         |
| `igPreview`    | `"true"` or `"false"`                                 | Whether the visitor had preview mode active |

Intelligems uses these values to match the order back to the visitor's session and attribute it to the correct experiment and test group.

### Step 4: Configure Your Checkout Champ URL

The `CC_CHECKOUT_URL` in the script should point to your Checkout Champ checkout page and include the products you want to add to the order. Checkout Champ uses the `products` parameter with the format `PRODUCT_ID:QUANTITY`, and multiple products are separated by semicolons.

Example:

```
https://get.yourdomain.com/checkout?products=18:1;12:1;5:1
```

If you have multiple product page variants that map to different Checkout Champ URLs, you can add conditional logic based on `window.location.pathname`:

javascript

```javascript
var CC_CHECKOUT_URL;
if (window.location.pathname === "/products/my-bundle") {
  CC_CHECKOUT_URL = "https://get.yourdomain.com/checkout?products=46:1;12:1";
} else {
  CC_CHECKOUT_URL = "https://get.yourdomain.com/checkout?products=18:1;12:1";
}
```

### Step 5: Verify the Integration

After setting up the script:

1. Open your store in a **fresh browser session** (or incognito window)
2. Navigate to the experiment's **origin URL** to ensure you are assigned to a test group
3. Click "Add to Cart" on the product page — you should be redirected to Checkout Champ
4. Place a **non-$0 test order** through Checkout Champ
5. Check the resulting Shopify order to confirm `igId` , `igTestGroups` , and `igPreview` are present as order attributes
6. If you have a test live, in the Intelligems app, navigate to your experiment's **Results** tab and confirm the order appears in the results

#### Important Considerations When QAing

* **The order must not be $0** — zero-dollar orders are excluded from Intelligems experiment results
* **Sessions must start on a non-checkout page** — Intelligems requires a storefront page view to create a session. Visitors who arrive directly at the Checkout Champ page (e.g., via a cart abandonment email) may not have a matchable session