GTM-Loadable Specials Widget

Showcase tagged vehicles
on any dealer page

Drop a single HTML snippet onto your specials page or VDP. The widget fetches tagged vehicles from TagService and renders responsive card grids, lists, or carousels — no build tools required.

Open sandbox How it works →
Features

Lightweight, flexible, zero-dependency

📐
Three layouts
Grid, list, or carousel — set via a data attribute. Responsive by default, mobile-friendly out of the box.
🎨
Theme sandbox
Configure colors, fonts, and custom CSS in the dashboard. Preview exactly how the widget will look before deploying.
🔄
VDP rotation
On vehicle detail pages, the widget automatically excludes the current vehicle and shows related specials in a carousel.
⚡
GTM injectable
Plain vanilla JS — no framework, no build step. Load via GTM tag and it renders into any container element on the page.
How it works

From tag to rendered widget in four steps

Step 1
Create a config
In the dashboard, choose a dealer, tag, layout, and theme. Save it as a named widget configuration.
Step 2
Preview in sandbox
The dashboard renders a live preview of your widget. Tweak colors, card styles, and limits until it looks right.
Step 3
Copy the snippet
Grab the HTML snippet with your data-* attributes and paste it into the dealer page or GTM custom HTML tag.
Step 4
Goes live
The widget loader script finds the container, fetches vehicles from the Tag API, and renders cards on the page.
Embed

Drop this snippet on any dealer page

The widget reads data-* attributes from the container element. Layouts: grid, list, carousel.

specials page embed
<!-- Specials widget container -->
<div id="sn-tag-specials"
     data-dealer="honda-perrysburg"
     data-tag="hit-list"
     data-layout="grid"
     data-limit="12"></div>
VDP rotation (excludes current vehicle)
<div id="sn-tag-rotation"
     data-dealer="honda-perrysburg"
     data-tag="hit-list"
     data-layout="carousel"
     data-limit="6"
     data-exclude-current="true"></div>