TFL Partners TFL Partners Developers
Widget demo

Nearby, Styled

Geo-aware widgets that resolve the viewer's location and surface local performers, events and venues. Each block below drops a single data-widget="nearby" element with different display options, rendered inside a shadow root so the widget's own styles apply.

5
layout variants
3
lookups shown
<script src="https://w.tixcdn.io/loader.js"></script>
01

Performers

Four popular performers with up to three upcoming events each, tagged with UTM params. The grid uses container queries, so it reflows to the width of the element it's embedded in.

data-lookup="performers"data-popular="true"
embed
<div data-widget="nearby" data-lookup="performers"
     data-max="4" data-popular="true" data-events="3"
     data-utm_source="sbwidget" data-utm_medium="sbwidget"
     data-utm_campaign="sbwidget"></div>
02

Performers — banner

The same performers in the Performer Banner tile style via data-view="banner" — image, name and one upcoming date. Same container-query grid.

data-view="banner"data-lookup="performers"
embed
<div data-widget="nearby" data-lookup="performers"
     data-view="banner" data-max="4" data-popular="true"
     data-events="3" data-utm_source="sbwidget"
     data-utm_medium="sbwidget" data-utm_campaign="sbwidget"></div>
03

Performers — column

The same nearby performers as a compact list with their images, via data-view="column" — a lighter alternative to the card grid, styled like the venues list.

data-view="column"data-lookup="performers"
embed
<div data-widget="nearby" data-lookup="performers"
     data-view="column" data-max="6" data-popular="true"
     data-events="1"></div>
04

Events

Up to five nearby concerts. The "change location" control is hidden via data-show-change-location.

data-lookup="events"data-show-change-location="false"
embed
<div data-widget="nearby" data-lookup="events"
     data-type="concerts" data-max="5"
     data-show-change-location="false"></div>
05

Venues

Five popular nearby venues with the location control hidden.

data-lookup="venues"data-popular="true"
embed
<div data-widget="nearby" data-lookup="venues"
     data-max="5" data-popular="true"
     data-showChangeLocation="false"></div>