The Vehicle Lookup widget is designed to integrate smoothly into any website. Here are some tips for a seamless fit:
**1. Choose the Right Gauge Style**
Select a gauge style that complements your website's aesthetic:
- **Light themes:** Modern Cards, Minimal Bars, Minimalist Flat, Grid Comparison
- **Dark themes:** Neon Futuristic, Digital Dashboard, Dashboard Style
- **Professional/corporate:** Modern Cards, Comparison Bars, Grid Comparison
- **Automotive/performance:** Circular Gauges, Performance Arcs, Modern Car Round
**2. Match Your Brand Colours**
Set your widget's primary colour to match your website's accent or brand colour. Use your website's text colour for the main text setting. This creates visual consistency.
**3. Container Width**
The widget automatically fills the width of its parent container. To control the width, wrap the container div in a styled element:
```html
<div style="max-width: 1100px; margin: 0 auto;">
<divid="vehicle-lookup-container"></div>
</div>
```
**4. Resolving CSS Conflicts**
If your website's CSS interferes with the widget's styling:
- Ensure the base CSS file (`vehicle-lookup-base.css`) is loaded in your page's `<head>`
- The widget uses specific class names prefixed to avoid conflicts
- If issues persist, try placing the widget in an iframe or contact support
**5. White Label for a Native Look**
For the most seamless integration, enable the White Label option to remove the "Powered by" footer. Combined with matching colours and an appropriate gauge style, the widget will appear as a built-in feature of your website.
