# JS based offer display

1. A simple script is used as a wrapper for the quote request
2. If custom display settings are required, they may be applied using signals or taken from quote request variables (see [below example](#custom-variable-display-requirements)).
3. Using Content Delivery Network (CDN), offers are displayed within the purchase flow on partner site. 
4. Response Signals are used to determine user interaction/purchase choices.

This approach reduces the up front development effort and any ongoing growth project maintenance, allowing for streamlined launch and optimizations\
\
[See more documentation for XCover Elements panel display here](https://docs.covergenius.com/xcover-elements)

**Important**: Most display variations are handled by quote request attributes\
for example the currency display could be set as Indonesian Rp (IDR):

<figure><img src="https://1637184925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsQ_haI87nzaKJrV84e%2Fuploads%2FWlhwdFEpjbkKLoafOd6d%2FScreenshot%202024-05-13%20at%204.31.38%E2%80%AFPM.png?alt=media&#x26;token=d2981fe6-4de9-4342-ac3c-b302632ebbf0" alt=""><figcaption><p>Example of currency variation in panel display</p></figcaption></figure>

{% code overflow="wrap" fullWidth="true" %}

```
quote_request: {
    "customer_language": "en",  //LANGUAGE: en for English, id for Bahasa
    "customer_country": "ID",   //POLICY LOCALE: AU for English, ID for Indonesia
    "currency": "IDR",          //AUD for Australia Dollar, IDR for Indonesian Rupiah
```

{% endcode %}

### Custom Variable Display Requirements

In some cases, partners may have custom display requirements based on experience settings or customisations. An examples of custom display settings is shown below:

<figure><img src="https://1637184925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsQ_haI87nzaKJrV84e%2Fuploads%2FjRkjE6rih0ZNOq3QvDUH%2FMegatix-XCover-Test-Event.png?alt=media&#x26;token=35e7e9a4-f5cd-44e2-8610-0ae273a28ac9" alt=""><figcaption><p>Partner Website display based on JS and included quote request</p></figcaption></figure>

In the above example, circled (<mark style="color:blue;">blue</mark>) formatting for currency symbol is selected using custom set signals (symbol). Eg:

```
currency_config: {
currencyDisplay: 'symbol',	//'symbol' or 'narrowSymbol'
trailingZeroDisplay: 'stripIfInteger'//'auto' or 'stripIfInteger' 
    },
```

In the below example, the currencyDisplay config element is set to `narrowSymbol`

<figure><img src="https://1637184925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsQ_haI87nzaKJrV84e%2Fuploads%2F3snJZ03v5LSlSiPVASCh%2FMegatix-XCover-Test-Event%20copy.png?alt=media&#x26;token=4773a3f3-1b5a-4a4f-87f9-cac0b5c27396" alt=""><figcaption><p>Partner Website display based on JS and included quote request</p></figcaption></figure>