# Installing Surveys on Headless Instances

## Standard Implementations

### Introduction

There are multiple ways to configure and setup headless Connect. There are two main channels it supports:

* on-site
* post-checkout

Both channels support multiple different modes of configuration. Either by passing query string parameters to the script or by creating meta tags inside the page header.

### On Site

To display an on site survey, the system chooses from a prioritised list of surveys for the on site channel. From highest priority down, the system choses the first active survey that matches conditions and that the user is eligible for answering.&#x20;

<figure><img src="https://317471629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKeDY1gVsPqUlb1dtZzTr%2Fuploads%2FVYbNFMFGeDldUptd2CVp%2Fimage.png?alt=media&#x26;token=d9f4513d-fcb7-479e-9115-1903ca53f8f9" alt=""><figcaption><p>An example on-site survey list with the priority visible in the numbered boxes.</p></figcaption></figure>

To implement on site surveys, you can add our surveys script tag to the header of the page(s) with your store Shopify domain.

#### Example Usage

```html
<script type="text/javascript"
        src="https://surveys.okendo.io/js/okendo-connect.headless.js?shop={your-store}.myshopify.com&channel=on-site&auto_initialise=true"
        async>
</script>
```

#### Parameters

These query string parameters can be added to the script src.

<table><thead><tr><th width="213">Parameter</th><th width="200">Description</th><th width="134">Value Type</th><th width="131">Supported Values</th><th>Required</th></tr></thead><tbody><tr><td><code>shop</code></td><td>The store identifier for example <code>okendo-seahorse-emporium.myshopify.com</code></td><td><code>string</code></td><td></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>channel</code></td><td>The Okendo Survey channel to load a list of surveys from.</td><td><code>string</code></td><td><code>on-site</code>, <code>post-checkout</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>auto_initialise</code></td><td>Flag to indicate if the API setup function should be run on page load. Defaults to <code>false</code></td><td><code>boolean</code></td><td><code>true</code>, <code>false</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>customEventsOnly</code></td><td>Flag to indicate if page event triggers to show surveys should be supressed. Defaults to <code>false</code></td><td><code>boolean</code></td><td><code>true</code>, <code>false</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>targetElementId</code></td><td>Optional page element id to place the survey inside of.</td><td><code>string</code></td><td></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### Post Checkout

To display a post checkout survey, the system chooses from a prioritised list of surveys for the post checkout channel. From highest priority down, the system choses the first active survey that matches conditions and that the user is eligible for answering.&#x20;

Post-checkout requires extra data needed for the decision making process on which survey to display to a customer. This data is used to determine which post-checkout conditions and triggers match.

If only using a simple post checkout survey without conditions you can use the same setup as the above on site section.&#x20;

If you want to use any of the following conditions, you will need to either use the javascript API properties or meta tags as explained below:

* Order value is at least
* Order value is at most
* Purchased product
* Cart contents do not include
* New Customers
* Repeat Customers

#### Example Usage

```html
<html>
<head>
    <meta name="oke:subscriber_id" content="{your-subscriber-id}" />
    <meta name="oke:target_element_id" content="okendo-survey" />
    <meta name="oke:order_id" content="1508506" />
    <meta name="oke:order_subtotal_price" content="100.00" />
    <meta name="oke:cart_content_product_ids" content="6911181521050, 6911187714202" />
    <meta name="oke:auto_initialise" />
    <script type="text/javascript"
        src="https://surveys.okendo.io/js/okendo-connect.headless.js?channel=post-checkout" async>
    </script>
</head>
<body>
    <div style="width: 300px; height: 400px;">
        <div id="okendo-survey"></div>
    </div>
</body>
</html>

```

#### Parameters

The channel parameter needs to be provided as a query string parameter to the script src.

<table><thead><tr><th>Parameter</th><th width="188">Description</th><th width="117">Value Type</th><th width="119">Supported Values</th><th>Required</th></tr></thead><tbody><tr><td><code>channel</code></td><td>The Okendo Survey channel to load a list of surveys from.</td><td><code>string</code></td><td><code>on-site</code>, <code>post-checkout</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr></tbody></table>

#### Tags

<table><thead><tr><th width="331.3333333333333">Tag Name</th><th width="243">Description</th><th>Example Value</th></tr></thead><tbody><tr><td><code>oke:subscriber_id</code></td><td>Your Okendo subscriberId. </td><td><code>00000000-0000-0000-0000-000000000000</code></td></tr><tr><td><code>oke:target_element_id</code></td><td>The id you have given the element on the page where you want embedded surveys to be displayed. Only required for embedded.</td><td><code>okendo-survey</code></td></tr><tr><td><code>oke:order_id</code></td><td>The order id used to support revenue attribution and linking the order to the survey response. See <code>Shopify.checkout.order_id</code></td><td><code>5179739177206</code></td></tr><tr><td><code>oke:order_subtotal_price</code></td><td>The order value to be used for matching order value conditions. Value should match your store currency.</td><td><code>100</code></td></tr><tr><td><code>oke:cart_content_product_ids</code></td><td>A list of product ids being purchased. Used for cart contains or not contains conditions. Separate by commas.</td><td><code>6911181521050, 6911187714202</code></td></tr><tr><td><code>oke:auto_initialise</code></td><td>Flag to indicate if the API setup function should be run on page load. If not included you will have to manually call <code>setup</code> on the Javascript API window object <code>okeConnectApi</code></td><td></td></tr></tbody></table>

## Custom Implementations

See the link below for details on API references to support your custom implementation.

{% content-ref url="../storefront-javascript-api/surveys-connect-window-api" %}
[surveys-connect-window-api](https://docs.okendo.io/on-site/storefront-javascript-api/surveys-connect-window-api)
{% endcontent-ref %}
