Widget format · Button
A shipping button on every inventory card.
A compact call to action that opens the full quote in an accessible dialog. Put one on each inventory card with that vehicle prefilled, or one in a sidebar for the whole site.
Live demo · sandbox key
Real prices on a sandbox key. Bookings made here are simulated and never become orders.
Embed code
<div data-atv-widget
data-widget-key="YOUR_WIDGET_KEY"
data-mode="button"
data-label="Ship this one"
data-origin-zip="84070"
data-vehicle-year="2026"
data-vehicle-make="Toyota"
data-vehicle-model="Tacoma"
data-vehicle-type="pickup"></div>
<script async src="https://www.autotransportvehicle.com/embed/v1/widget.js"></script>| Attribute | What it does |
|---|---|
data-mode="button" | Renders the launcher button. |
data-label | Button text, for example "Ship this one" or "Get delivery price". |
data-vehicle-* / data-origin-zip | Per-card prefill so each button quotes its own vehicle. |
data-accent / data-radius | Match your existing button styles. |
One script, many buttons
Load the script once per page and add a host element to each card. The script mounts every host it finds, including cards added later by infinite scroll or client-side filtering, and mounting the same element twice does nothing. On a search results page with 24 vehicles you get 24 buttons, each quoting its own vehicle.
The dialog
Clicking the button opens the full quote form in a dialog with that card's vehicle and lot ZIP filled in. The dialog is labelled for screen readers, traps focus, closes on Escape and returns focus to the button.
When to choose the button
Use the button where space is tight and the buyer is still browsing. Use the price strip on the vehicle page itself, where intent is higher and the delivery price belongs next to the sticker. Dealer groups with many sites often add the floating badge for site-wide coverage and buttons on the inventory grid.
Labels that work
Plain, specific labels beat generic ones. "Ship this one", "Delivery price to my ZIP" and "Get it delivered" all say what happens next. Keep it short enough to fit the card on mobile.
Questions
Do we need a separate key for each button?
No. Every button on your site uses your partner key. The vehicle details on each host element tell the quote which car is being shipped, and attribution comes from the key.
Does the button work with React, Next.js or Vue inventory pages?
Yes. The script watches for new host elements, so cards rendered after page load are mounted automatically. You can also call window.ATVWidget.mount on an element yourself. The developer docs show a Next.js example.
Can we style the button to match our site?
Set data-accent to your brand color and data-radius to match your corners. Text on the button switches between white and near-black automatically for readable contrast.
Industries that use it
- Dealer groupsGroups win on reach: one shopper can browse every rooftop in a region. Put a delivery price on all of them with one template change, and see which stores and vehicles drive shipping demand.
- Online marketplacesMarketplaces connect buyers and sellers who are rarely in the same city. Built-in transport pricing removes the last reason to stop at "contact seller", using the widget or your own interface on the API.
- Independent dealersIndependent lots that list nationally field the same question all day: what does it cost to get it here? Answer it on the listing with a live, bookable price, and let a licensed partner handle the carrier.
Guides
Terms on this page
Other formats
- Quote formVehicle detail pages · Online checkout and deal jackets · Auction won-vehicle pages
- Price stripDirectly under the sticker price · Mobile vehicle pages · Listings with little free space
- Floating badgeDealer group sites · Sites without per-vehicle templates · Fast coverage before deeper placement
- JSON quote APIOnline marketplaces · Custom checkout flows · Internal sales tools
- Tracked quote linkSold-car follow-up emails · Newsletters and texts · Partners without website access
Put a live shipping quote on your pages.
Free to apply and embed. Every quote and booking from your key is attributed to your account.