LogoLogo
API StatusSupportPostmanContact Us
🇲🇾 MY AutoGrab API Doc
🇲🇾 MY AutoGrab API Doc
  • AutoGrab Basics
    • AutoGrab Developer Hub
    • Integration Overview
    • API Test Cases
    • FAQ
  • Authentication
    • API Key
    • OAuth Authentication
  • Vehicle Search
    • Vehicle Searching Basics
    • Plain-text Search
    • Registration Plate Search
    • Facet Search
    • Vehicle ID Search
    • Marketplace ID Lookup
  • Sourcing
    • Sourcing Basics
    • Market Overlay
    • Market Statistics
    • Stock Feeds
  • Vehicle Data
    • Vehicle Data Basics
    • Detailed Specifications Data
    • Vehicle History
    • Factory Build Data
  • Valuation
    • Valuation Basics
    • Valuation Predict
    • Residual Valuations
    • Max Offer Configuration
    • Gauge API
  • Embeddable Products
    • Embeddable Basics
    • Gauge Widget
    • Valuation Widget
    • Market Overlay Widget
  • REPORTS
    • Car Analysis
    • Certificates
  • Customer Recapture
    • Customer Recapture API
    • Webhooks
  • Insurance
    • Pre-Accident Valuation
Powered by GitBook
LogoLogo

Links

  • Terms of Use

2024 © AutoGrab Pty Ltd. ABN 79 638 468 569

On this page
  • Query Parameters
  • Example Usage
  • Local Testing
  • Event Listeners

Was this helpful?

Export as PDF
  1. Embeddable Products

Gauge Widget

AutoGrabs dynamic pricing indicator for your website

PreviousEmbeddable BasicsNextValuation Widget

Was this helpful?

The AutoGrab AutoGauge is an iFrame widget that displays a valuation as well as some high-level market data for a vehicle listing. We host a configuration file that controls a range of labelling and styling variables that we will guide you through as part of your integration.

You can access this over API if you would like to make your own implementation over the iFrame,.

Query Parameters

Since the gauge operates in an iFrame, it is controlled using query parameters. These parameters are separated into two distinct groups: Base parameters and vehicle-type parameters. The base parameters are applicable for all use cases, whereas you only need to choose one set of vehicle-type parameters in order to use the gauge.

Base parameters

api_key: string; Your Gauge API Key (locked to your provided domains).

region: Region; The country code (‘au’, ‘nz’ or ‘my’)

odometer: number; The odometer reading for the vehicle you are valuing

listing_price: number; The listing price for the vehicle you are valuing

layout?: string; The desired layout style (‘horizontal’ or vertical). If a layout type is not provided, this will default to ‘vertical’.

Vehicle Type Parameters

These parameters are used to determine the type of vehicle that you are valuing, and only one of these sets of properties are required to match a vehicle. Depending on your use case, it may be easier to use certain sets of parameters over others.

vehicle_id The AutoGrab vehicle ID

marketplace and marketplace_id The marketplace domain name where the vehicle is publicly listed (e.g. ‘carsales.com.au’) and the unique listing ID on the marketplace (e.g. ‘OAG-AD-216621’)

vin The vehicle's VIN number

rego and state The registration plate (e.g. ‘BMT038’) and the registration state code. Registration state is only required in Australia (‘VIC’, ‘NSW’, ‘QLD’, ‘ACT’, ‘TAS’, ‘SA’ or ‘WA’)

vehicle_description The plain text vehicle description (e.g. ‘2019 Volkswagen Polo 85TSI Comfortline Auto MY19’)

Example Usage

With VIN

<iframe
src="http://localhost:3000?region=au&odometer=10000&listing_price=100
00&vin=MM0DK2W7A0W207162&api_key={yourkey}"
/>

With Rego & State

<iframe
src="http://localhost:3000?region=au&odometer=10000&listing_price=100
00&rego=AOM964&state=VIC&api_key={yourkey}"
/>

With Marketplace/Marketplace ID

<iframe
src="http://localhost:3000/?region=au&odometer=10000&listing_price=10
000&marketplace=carsales.com.au&marketplace_id=OAG-AD-21662144&api_ke
y={yourkey}"
/>

With Vehicle Description

<iframe
src="http://localhost:3000/?region=au&odometer=10000&listing_price=10
000&vehicle_description=2017%20Mazda%20CX-3%20Maxx&api_key={yourkey}"
/>

Local Testing

To test the gauge locally, simply create an index.html file with the following contents:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Iframe Test</title>
</head>
<body>
<iframe
src="https://gauge.autograb.com.au?region=au&odometer=10000&listing_p
rice=26005&vin=MM0DK2W7A0W207162&api_key={yourkey}"
width="100%"
height="600px"
></iframe>
</body>
</html>

You can then host this file on localhost:8080 using the npx-server package. You can use the ‘npx’ command line tool to do this:

> npx html-server ./index.html

The localhost:8080 URL is whitelisted for your API key, therefore enabling this workflow.

Event Listeners

If the Gauge is successfully rendered, we send a message via the iframe postMessage function. The way for a client to listen for the event is as follows:

window.addEventListener('message', event => {
if (
event.data === 'AUTOGRAB_GAUGE_SHOW' &&
event.origin === 'https://gauge.autograb.com.au'
) {
// show the gauge iframe element
}
});
If there is a redirect to the 500 page, we send a message via the iframes postMessage
function.. The 500 page is used for any error that occurs server side, as well as if the gauge
valuation is below the threshold defined in your configuration (this is per API key).
The way for a client to listen for the event is as follows:
window.addEventListener('message', event => {
if (
event.data === 'AUTOGRAB_GAUGE_HIDE' &&
event.origin === 'https://gauge.autograb.com.au'
) {
// hide the gauge iframe element
}
});

There is no minimum valuation threshold set per API key. We can configure this to your requirements.

read more here
An example gauge configuration