Not on Shopify? Our SDK allows you to integrate Fairing anywhere. Please send us a message in the chat or reach out to [email protected] and our team will be in touch to help you get started.

Instructions

Add the script tag

For best results, add the script tag to the head of your document so the script is loaded before the DOM content has finished loading.

<script src="https://app.fairing.co/js/enquire-labs.js">
</script>

Setup DOM element

The script needs a target DOM element to insert the question form into. The DOM element can be included in the page where you would like the questions to appear, or it can be generated programmatically and inserted. The DOM element will be passed as the second argument to the Fairing constructor.

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div id="question_stream_target"></div>
    ...
  </body>
</html>

Add script and initialize SDK

Just before the closing body tag, add the below script to initialize the SDK.

Publishable Key 🔑
Your Publishable Key is located under the Account tab in your Fairing admin.

<script>
  const API_KEY = "YOUR_PUBLISHABLE_KEY";  // API key (Publishable API key located on your Account page)
  const TARGET_ELEMENT = document.getElementById("question_stream_target");
  
  // Setup the customer object. We use the customer object to decide which questions to
  // ask and to associate responses with a customer.
  const customer = {
    email: "[email protected]",  // Included in export data so responses can
                                   // be associated with a customer
  
    id: "CUSTOMER ID",             // Your internal customer ID. Included in export 
                                   // data so responses can be associated with a customer
  
    order_count: 1                 // Used to determine if a customer is new or not. If this
                                   // value is 1, the customer is considered new, if it is
                                   // greater than one, the customer is considered returning.
  };
  
  // Setup the transaction object. The transaction object allows us to associate order volume
  // with responses in reporting, and is included in data exports for more granular analysis.
  const transaction = {
    country_code: "US",                      // REQUIRED The shipping address country code
    coupon_amount: 10.00,                    // If a discount was applied, the amount of the discount
    coupon_code: "SAVE10",                   // If a discount was applied, the discount code
    coupon_type: "fixed",                    // The type of discount, "fixed" or "percentage"
    created_at: "2021-07-01T10:00:00.00Z",   // REQUIRED The UTC timestamp of when the order was created
    currency_code: "USD",                    // REQUIRED The ISO currency code of the transaction currency
    id: "1001",                              // REQUIRED Your internal order ID
    landing_page_path: "/products",          // The landing page for this transaction
    locality: "New York",                    // REQUIRED The shipping address city
  
    number: "T1001",                         // REQUIRED The transaction number. Useful if your order ID is
                                             // is different from your customer-facing order number
  
    platform: "ecommerce platform",          // REQUIRED The name of the ecommerce platform where the order
                                             // information is stored. For example "magento" or
                                             // "bigcommerce". Any value is valid. It is provided in
                                             // the data export to aid in analysis.
  
    postcode: "10003",                       // REQUIRED The shipping address post code
    referring_url: "https://google.com",     // The referring site for the transaction
    region: "NY",                            // REQUIRED The shipping address state or province
  
    source: "website",                       // REQUIRED The source of the transaction, e.g. "website" or
                                             // "retail store". Any value is valid. Included in
                                             // data export to aid in analysis.
  
    total: 100.00,                           // REQUIRED The order total in the local currency
    total_usd: 100.00,                       // REQUIRED The order total in USD
    utm_campaign: "summer fun",              // UTM campaign
    utm_content: "splashing waves",          // UTM content
    utm_medium: "digital",                   // UTM medium
    utm_source: "paid search",               // UTM source
    utm_term: "summer wine"                  // UTM term
  };
  
  // Wait for the DOM to be ready
  window.addEventListener("DOMContentLoaded", function() {
    const fairing = Fairing(API_KEY, TARGET_ELEMENT, {
      transaction: transaction,
      customer: customer,
      config: {
        integrations: {
          ga: false,                         // Set to true to fire Google Anaylitcs events
          gtm: false,                        // Set to true to fire Google Tag Manger events
          rockerbox: false                   // Set to true to fire Rockerbox events
        }
      }
    });
  
    fairing.nextQuestion();
  
    // To toggle degbug mode. Debug mode will remain enabled until "toggleDebug()" is called
    // again, even after page reloads.
    // Fairing.toggleDebug()
  });
</script>