# Market Overlay Widget

### 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.

Implementation of the trigger to present this iframe is the responsibility of the site owner.

There are two options for the implementation of the overlay:

* Auto-Search
  * By providing a stringified vehicle description, AutoGrab will automatically match the vehicle based on the description and value based on the odometer provided when triggering the overlay widget. If the vehicle is incorrect, the user can override it.
* Manual Selection
  * If no vehicle description and odo are provided, the overlay will prompt the user to select a vehicle manually from a set of dropdowns.

You must implement you 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>UK</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></tbody></table>

### Example Implementation iFrame

{% code overflow="wrap" %}

```json
src="https://offer.autograb.com.au/?api_key=1234567&vehicle_description=2014%20Mitsubishi%20Outlander%20GF7W%2020G%20Auto&odometer=365489&reference_id=Fjord_Motors" />
```

{% endcode %}

#### Example UI

<figure><img src="https://2006860467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5qLYvzu45gdlTAGQCN9d%2Fuploads%2FnmUSxMLZlx03BGTDgrc2%2Fimage.png?alt=media&#x26;token=0cccf6c3-062b-4af7-a86d-0e102a572aec" alt=""><figcaption><p>Vehicle Confirmation</p></figcaption></figure>

<figure><img src="https://2006860467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5qLYvzu45gdlTAGQCN9d%2Fuploads%2Fpnq6bttC1LciDTCV4SjK%2Fimage.png?alt=media&#x26;token=0c31ca50-df0c-4e48-9515-143832e0f9f6" alt=""><figcaption><p>Manual Vehicle Selection</p></figcaption></figure>

<figure><img src="https://2006860467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5qLYvzu45gdlTAGQCN9d%2Fuploads%2FewkEBps1K7vbyZyG6WrU%2Fimage.png?alt=media&#x26;token=d9d6684f-21f0-4dea-add0-e33670bfb036" alt=""><figcaption><p>The Market Output</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 centered.

**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`

There was an exception or error 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 changed in the contents. Please respond by resizing the iframe container to hold the new contents without cropping.&#x20;