# Market Insights Snapshot

### Overview

The widget can show regionalised market insights based on input vehicles. It is customisable to your brand via a hero brand icon. The resulting market information can help your customers understand the market reception to a given vehicle. 

### Implementation

Speak to your sales rep about your desired implementation pattern. We will supply you with staging and production iFrame url code as part of your deployment process. 

You must implement your own trigger button to launch the iframe and load in all required inputs as below. 

### Example Implementation Inputs

To load the iframe you need to share the following input variables.

<table><thead><tr><th>Label</th><th width="187">Description</th><th>Example</th><th>Requirement</th></tr></thead><tbody><tr><td>Region</td><td>The country you would like to load insights for.</td><td>NZ</td><td>Required</td></tr><tr><td>Odometer</td><td>The odometer of the vehicle used in the valuation process</td><td>1000</td><td>Optional</td></tr><tr><td>Vehicle_Description</td><td>The most descriptive title of the vehicle you can provide so we can match it to our catalogue.</td><td>2014 Tesla MODEL S Model S Electric Sedan</td><td>Required</td></tr><tr><td>API_Key</td><td>Your API key used to securely load the iframe and load your brand configuration.</td><td>123ABC</td><td>Required</td></tr><tr><td>Registration_Plate</td><td>The registration plate of the vehicle</td><td>123ABC</td><td>Optional</td></tr><tr><td>VIN</td><td>The VIN, if known, for the vehicle. </td><td>123ABC</td><td>Optional</td></tr></tbody></table>

### Vehicle Identifier Preferences

The system will take the most economically logical identifier and fall back to others when provided with options. The preference list is below.

1. If provided with a `Vehicle_Description` it will use that.
2. If not, `VIN` will be used,
3. If not, `Registration`

{% hint style="info" %}
If your commercial agreement does not include the VIN and Registration fallbacks the system will provide an error when a vehicle description is insufficient for any match at all.&#x20;
{% endhint %}

### Example Implementation iFrame

{% code overflow="wrap" %}

```json
<iframe
src="http://localhost:3000/?region=nz&odometer=10000&vehicle_description=2017%20Mazda%20CX-3%20Maxx&vin=123ABC&registration_plate=ABC123&api_key={yourkey}"
/>
```

{% endcode %}

<figure><img src="https://content.gitbook.com/content/K6ugEamiHrCyaXQ4C4xg/blobs/gUlBX3rjlHKT0qZQi4n7/Example.png" alt=""><figcaption><p>Example Configuration For New Zealand Markets</p></figcaption></figure>

### Position On Page

You have two options to embed the iframe inside your website. In both these options, it is critical that you set the iframe width to 650px and centred.

**Popup** - holding the iframe in a popup container and ensuring you conform to the `AUTOGRAB_INSIGHTS_HIDE` to event listening to close the popup container and `AUTOGRAB_INSIGHTS_DIMENSIONS` resize the height dynamically.

**On Page** - holding the iframe on a page ensuring you let us know so we can remove the close button. Since the page can still extend vertically you need to respond to the `AUTOGRAB_INSIGHTS_DIMENSIONS` alert.

### Event Listeners

{% hint style="info" %}
Please ensure your implementation meets the minimum event listener requirements.&#x20;
{% endhint %}

The valuation widget will send messages you need to pay attention to via the iframe postMessage function. The messages are as follows.

`AUTOGRAB_INSIGHTS_SUCCESS`

The widget loaded successfully, no intervention is needed.

`AUTOGRAB_INSIGHTS_ERROR`

An exception or error was delivering the iframe contents.

`AUTOGRAB_INSIGHTS_HIDE`

The close button at the end of the workflow or close X in the interface has been pressed.

`AUTOGRAB_INSIGHTS_DIMENSIONS`

The iframe has resized due to changes in the contents. Please respond by resizing the iframe container to hold the new contents without cropping.&#x20;