Headless Integration

🚧

Headless e-commerce confirmation page

If you're using Shopify as a headless e-commerce backend for a custom site build on your confirmation page, you'll have to add some information to your custom order confirmation page for the Fairing survey to work correctly.

Expose Order Details

When our script loads, it inspects the order confirmation page to find order information to associate with the survey. First the script looks for a Shopify.checkout object on window. On a regular Shopify order confirmation page, Shopify makes this object available automatically. If the script can't find the Shopify.checkout object, it will fall back to using heuristics to find an order number on the page and use the order number to search for the order information via Shopify's API.

The simplest thing to do is expose a Shopify.checkout object on a window so that the Fairing script can find it. Its format is exactly the same as the response body example shown in the Shopify API Documentation. In the example, the response body has an order key with the order details. As an example, a script on your page may do something like the following:

window.Shopify = { 
  "checkout": { 
    "id": 1001, 
    "number": 1001, 
    ... 
   } 
}

Alternatively, you can include an element with the order number with the class .os-order-number. The inner text of this element must have the format Order #XXXXX where XXXXX is the Shopify order number. An example:

<div class="os-order-number"> 
    Order #1001
</div>

Insert Custom Tag

Once you have done the above, you'll also need to add a custom tag with a data attribute where you would like the survey to display. The data attribute is data-post-purchase-survey. As an example:

<div data-post-purchase-survey></div>

When the survey loads, it will be inserted into this element.

Insert Script

Finally, you will need to include the below survey script somewhere near the end of your order confirmation page, before the closing body tag.

<script src="https://app.fairing.co/shopify/survey-script.js?k={Insert Publishable Key Here}"></script>

You can find your Publishable Key under your Account Page.