Skip to main content

TourLife Widget

If you want to publicly display confirmed and upcoming shows, TourLife has just what you need! The TourLife widget is an embeddable web component that takes seconds to set up, and will render all publicly exposed events on your website.

First import the widget in the <head></head> block of your page like so:

<script defer="defer" src="https://widget.tourlife.rocks/tourlife-widget.js"></script>

Next, add the web component selector to your page to render the widget. Don't forget to set the bandUID attribute to your bandUID.

<tourlife-widget bandUID="REPLACE_WITH_BAND_UID"></tourlife-widget>

API​

The widget has multiple input attributes to customize the component, so that it matches the style of your website.

bandUID​

type: string | default: null | required

The UID of the band you want to display events for. If this is not set correctly, the component will throw an error.

color​

type: string | default: #0d47a1 | optional

The primary color of elements in the widget (button color for instance). This defaults to the TourLife theme when not set.

fontSize​

type: string | default: 13px | optional

The font size of all text in the widget.

Custom Implementation​

The TourLife widget is basically an implemented UI element that uses the public API under te hood, which means you can also roll your own. The public API documentation can help you to get started. The main data source that is used, is a GET request to this endpoint:

https://www.tourlife.rocks/api/v1/public-events/all/REPLACE_WITH_BAND_UID