The Vehicle Lookup widget can be added to any website that supports HTML. Follow these steps:
**Step 1: Add the Base CSS**
Add the following line inside the `<head>` section of your page:
```html
<link rel="stylesheet" href="https://remappingwebsite.com/lookup/api/styles/vehicle-lookup-base.css">
```
**Step 2: Add the Container**
Add a container `<div>` where you want the widget to appear on your page:
```html
<div id="vehicle-lookup-container"></div>
```
**Step 3: Add the JavaScript**
Add the following just before the closing `</body>` tag:
```html
<script src="https://remappingwebsite.com/lookup/api/integration.js"></script>
<script>
newVehicleLookup({
apiKey:'YOUR_API_KEY_HERE',
containerId:'vehicle-lookup-container'
});
</script>
```
Replace `YOUR_API_KEY_HERE` with your actual API key.
**Complete Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Vehicle Remapping</title>
<linkrel="stylesheet"href="https://remappingwebsite.com/lookup/api/styles/vehicle-lookup-base.css">
</head>
<body>
<h1>Check Your Vehicle's Performance</h1>
<divid="vehicle-lookup-container"></div>
<scriptsrc="https://remappingwebsite.com/lookup/api/integration.js"></script>
<script>
newVehicleLookup({
apiKey:'YOUR_API_KEY_HERE',
containerId:'vehicle-lookup-container'
});
</script>
</body>
</html>
```
**Configuration Options:**
| Option | Required | Default | Description |
|--------|----------|---------|-------------|
| `apiKey` | Yes | - | Your unique API key |
| `containerId` | No | `vehicle-lookup-container` | The ID of the container div |
| `gaugeStyle` | No | Loaded from your settings | Override the gauge style |
**Notes:**
- Your custom colours and gauge style are loaded automatically from your admin panel settings. You do not need to set them in the code.
- The widget is fully responsive and will adapt to the width of its container.
- If you experience CSS conflicts with your website theme, see the troubleshooting article: *Gauge Styles Not Displaying Correctly*.
