Landing Page (HTML)

In order to create a landing page where customers can provide an NPS score for an order, you can use our SDK to add code to a custom page on your Shopify site. The custom code expects an order ID passed as the value of an i parameter in the custom page's URL (e.g. https// A rating can also be passed as a value of 0-10 for the r parameter in the URL (e.g. https//

These URLs can be embedded in an email so users can click the link and have their rating automatically submitted. If the rating is not provided in the URL, the NPS question will be displayed so the customer can manually provide their response. If the response is automatically or manually provided, the follow up question will be displayed after the response is submitted. After the follow up question response is provided, the success message-as configured in the Fairing app-will be displayed, unless there are other questions targeting that user in your Question Stream.

In order for the NPS question to correctly display, Fairing will need to manually configure the surface targeting option on the question to match the value provided as the source option of the transaction (line 69). You can use the value provided, or choose your own. Contact Fairing with the value selected. The value should be a snake_case value.

<script src=""></script>
  This stylesheet provides minimal styling for the survey form. You
  can provide custom styling with your own CSS. You can find more info here:
<link href="" rel="stylesheet" type="text/css">

<!-- Some basic styles -->
  .fairing__open-ended-response {
    border: 1px solid black;
    border-radius: 4px;
    height: 12.8rem;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.25rem;
    padding: 1rem;

.fairing__autosuggest__list {
    background: hsl(0, 0%, 100%);
    box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.1);
    margin: 6px 0 0;

  .fairing__autosuggest__input {
    width: 100%;
    font-size: 1.1rem;
    padding: 0.7rem;
    border-radius: 5px;
    border: 1px solid hsl(0, 0%, 10%);
  .fairing__survey-actions {
    margin: 24px 0 0;
  .fairing__action--submit {
    background: #333;
    border: 1px solid #333;
    border-radius: 5px;
    color: white;
    padding: 16px 40px;
    font-size: 16px;
    font-family: Basetica Bold,Basetica-bold,sans-serif;
    line-height: 16px;

  <!-- Example header. The page can have any content you like. -->
  <h1 style="text-align:center; padding-top:30px;">
    {{ page.title }}

        Add an element to contain the Question Stream wherever you would
        like it to appear on the page. It's display should be
        set to 'none' via CSS so that the customer doesn't see the question.
        The 'fairing-qs-target' is set on this element so that we can target it
        from the script.
  <div fairing-qs-target style="display: none; margin: 24px auto; max-width: 512px; padding: 24px;">

<script type="text/javascript">
  (function() {
    // API key (Publishable API key located on your Account page)

    // Select the DOM element to insert the question into
    const TARGET_ELEMENT = document.querySelector("[fairing-qs-target]");

    // The ID of the NPS question (Fairing can provide)

    // Parse the URL query parameters
    const query = new URLSearchParams(;
    // Get the order ID from the URL query parameters
    const orderId = query.get("i");
    // Get the rating from the URL query parameters
    const rating = query.get("r");

    // If the order ID in the URL, we can't do anything
    // useful, so we just abort.
    if (!orderId) {
      console.warn("The order ID is missing from the URL query string.");

    // If the rating isn't in the URL, we just display the question so the
    // customer can respond. This could happen if the click the link in the
    // email that directs them to "Complete the Survey". That link does not
    // include the rating.
    if (!rating) {
      console.warn("The rating is missing from the URL query string."); = "block";

    const transaction = {
      id: orderId,
      source: "survey_landing" // Let Fairing know what value this property is set to

    window.addEventListener("DOMContentLoaded", function() {
      const fairing = Fairing(API_KEY, TARGET_ELEMENT, {
        transaction: transaction,
        customer: {},
        config: {
          shopify_order: true,
          host: ''

      // This starts the Question Stream

    window.addEventListener('fairing.question.displayed', (event) => {
      // It shouldn't happen, but if a question other than the NPS
      // question were to appear, we display it. Alternatively, you
      // can omit the line that changes the display style and nothing will
      // be displayed.
      if (event.detail.question_id != NPS_QUESTION_ID) { = "block";

      // If the rating isn't provided, we can't auto submit the form, so the
      // customer will have to provide it manually.
      if (!rating) {

      const form = TARGET_ELEMENT.querySelector("form"); 
      const option = form.querySelector(`[data-enquire-response="${rating}"]`);

      // If the rating isn't a valid rating, we abort. You may want to show
      // some other content in this scenario so the page isn't blank or so
      // it appears that the customer has provided a response.
      if (!option) {
        console.warn("Invalid rating provided. Not submitting response.");

      option.checked = true;

    // Once the question has been answered, show the form so that the
    // follow up question is displayed.
    window.addEventListener("fairing.question.answered", () => { = "block";