Additional Configuration Options
Additional Configuration Options
The SDK can be configured with additional options. The options are passed as the third argument to the Fairing constructor i.e. window.Faring = Faring(API_KEY, CUSTOMER_ID, opts)
.
<script>
...
const opts = {
customer: {...},
container: ...,
conversion: {...},
integrations: {...},
config: {...}
};
window.Faring = Faring(API_KEY, CUSTOMER_ID, opts);
...
</script>
The options object has the following properties.
Name | Type | Details |
---|---|---|
customer | object | Details about the customer. |
conversion | object | Details about the conversion event associated with this customer. |
container | DOMNode or String | A DOM element to contain the Question Stream. |
integrations | object | Integrations configuration. |
config | object | Configuration for SDK functionality. |
The opts.customer
Object
opts.customer
ObjectThe customer object can be used to pass additional information about the customer or account to Fairing.
All fields, if passed, are available in the Responses export. Additional functionality tied to specific fields is noted in the Functionality column.
Name | Type | Details | Functionality |
---|---|---|---|
string | The customer or company's email address. | ||
order_count | string | Used to determine if a customer is new or returning. If this value is 1, the customer is considered new, if it is greater than one, the customer is considered returning. | Required to use the 'Who should we ask?' question targeting functionality. By default, order_count will be null and all questions will be targeted at 'All customers.' |
The opts.conversion
Object
opts.conversion
ObjectThe conversion
object represents details of the conversion event associated with the customer or account.
All fields, if passed, are available in the Responses export. Additional functionality tied to specific fields is noted in the Functionality column.
Name | Type | Details | Functionality |
---|---|---|---|
country_code | string | The 2-letter ISO country code where the conversion took place. This could be the country of the customer's address. | Required to use the 'Target by Geography' question targeting functionality. |
coupon_amount | number | If a coupon was used, the amount of the coupon. | Required to populate the Discount Code Report. Read more about the Discount Code Report here. |
coupon_code | string | If a coupon was used, the coupon code. | Required to populate the Discount Code Report. Read more about the Discount Code Report here. |
coupon_type | string | If a coupon was used, the type of coupon used. percent if it was a percentage discount. fixed if a fixed amount was discounted. | |
created_at | string | The ISO-8601 timestamp in UTC when the conversion happened. Defaults to now. | |
id | string | The id of the conversion event/transaction or session. Customer_id will automatically be copied to id if another value is not sent. | |
landing_page_path | string | The initial landing page that led to the conversion. | |
number | string | A reference number assigned to the conversion or transaction, often customer-facing or user-facing. If a conversion number is not provided, the id will be used as its value. | |
referring_url | string | The URL that referred the conversion. | Enhances the Last Click Report. Read more about the Last Click Report here . |
region | string | The region (state/province) where the conversion happened. This could be the state or province of the customer's address. | Required to use the 'Target by Geography' question targeting functionality. |
source | string | The source of the transaction e.g. demo_form . Can be used to target different questions to different pages. The source value must be set by the Fairing team on the question. | |
total_value | number | The total value of the conversion, after the coupon is applied. This could be a plan price or other internal value assigned to the conversion. | Required to view Revenue and AOV calculations tied to response data in the Analytics tab. |
last_click_utm_campaign | string | The last click UTM campaign that led to the conversion. | |
last_click_utm_content | string | The last click UTM content that led to the conversion. | |
last_click_utm_medium | string | The last click UTM medium that led to the conversion. | Required to populate the Last Click Report. Read more about the Last Click Report here. |
last_click_utm_source | string | The last click UTM source that led to the conversion. | Required to populate the Last Click Report. Read more about the Last Click Report here . |
last_click_utm_term | string | The last click UTM term that led to the conversion. |
The opts.container
Property
opts.container
PropertyBy default, Fairing will append a container element to the document's body
and render questions inside the container. The container is styled as a full screen modal and will only display if there is a question for the customer. To render the Question Stream in a different container element, pass a DOM node as the container
property of the options
object. If there is a question to display for the current customer, the SDK will add a fairing-container--is-active
class to the element so that it's visibility can be controlled via CSS. Be sure to declare the container-type: size
CSS property on the container element. Fairing's CSS uses container queries based on the container size for its responsive design.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Fairing Test Page
</title>
<style>
body {
font-family: sans-serif;
}
/* Set the container-type property on the custom container
#my_custom_container {
container-type: size;
}
</style>
</head>
<body>
<!-- Add the custom container element to the DOM -->
<div id="my_custom_container">
</div>
<script>
(function() {
const container = document.getElementById("my_custom_container");
...
// Add the container as the value of the container property
// on the options object
const opts = {
container: container
};
...
s.onload = function(e) {
// Pass opts to the constructor to use the custom container
window.Fairing = Fairing(API_KEY, CUSTOMER_ID, opts);
Fairing.nextQuestion();
};
document.head.appendChild(s);
})();
</script>
</body>
</html>
The opts.integrations
Object
opts.integrations
ObjectThe Fairing SDK can be configured to push events to Google Analytics, Google Tag Manager, or Rockerbox when a question is viewed or a response is provided. To enable these integrations, set the integrations property to true
.
Name | Type | Details |
---|---|---|
ga | boolean | Enable the Google Analytics integration. Defaults to false . |
gtm | boolean | Enable the Google Tag Manager integration. Defaults to false . |
rockerbox | boolean | Enable the Rockerbox integration. Defaults to false . |
<script>
...
const opts = {
integrations: {
ga: true, // Set to true to fire Google Analytics events
gtm: true, // Set to true to fire Google Tag Manager events
rockerbox: true // Set to true to fire Rockerbox events
}
}
...
s.onload = function(e) {
// Pass opts to the constructor to enable integrations
window.Fairing = Fairing(API_KEY, CUSTOMER_ID, opts);
Fairing.nextQuestion();
};
</script>
The opts.config
Object
opts.config
ObjectName | Type | Details |
---|---|---|
test_mode | boolean | Enable test mode. Defaults to false . |
dismissible | boolean | Allows questions to be dismissed if the SDK is displaying as a modal. Defaults to false . |
display_success_message | boolean | Determines whether a thank you message is shown after all questions are answered. Defaults to true . |
<script>
...
const opts = {
config: {
test_mode: true, // Enable test mode
dismissible: true, // Allow question modal to be dismissed
display_success_message: true // Display thank you message
}
}
...
s.onload = function(e) {
// Pass opts to the constructor to use the config options
window.Fairing = Fairing(API_KEY, CUSTOMER_ID, opts);
Fairing.nextQuestion();
};
</script>
Updated 15 days ago