In order to load Enviso web components, you have to do these simple things:
Load the loader script in the document header:
<script src="https://widget.development-enviso.io/loader.js"></script>This script will load some polyfills and the module loader for our elements.
Load the element you want to use by defining it in the document header:
<script>enviso.load(['https://widget.development-enviso.io/build-ts/components/tickets/enviso-ticket-widget-element.js']);</script>This loads the logic for an element and all its dependencies. Every element you want to add to your webpage has to be loaded like this.
Add the tag to your HTML body where you want to use the element:
<enviso-ticket-widget> </enviso-ticket-widget>
The widget can be configured by changing properties on the global window.enviso.settings object.
The following settings are available:
Setting | Description | Required | Remarks |
|---|---|---|---|
| Your Enviso API key | Yes | |
| The ID of your sales point | Yes | |
| The ID of your offer | No | If null or undefined, the widget will show an overview of the offers published to the configured sales point. |
| Language ISO Code | No | Use the 2-letter ISO code. If not defined, the widget will determine the best language based on the browser language. |
| Custom translations | No |
|
Example configuration:
<script>
enviso.settings.apiKey = 'e1clKp+WxU6oS931JN5JhF==';
enviso.settings.salesPointId = 6891;
enviso.settings.offerId = 10243;
</script>Note
These settings apply to all Enviso elements on your page. This means that if you add multiple Enviso ticket widgets on the same page, they will all use the same settings.
The elements can be configured to alter their behavior in the following two ways:
HTML Attribute Configuration at Load Time (preferred)
JavaScript Property Configuration at Runtime
1. HTML Attribute Configuration at Load Time (preferred)
You can define specific configurations by setting HTML attributes directly within the HTML markup. This method allows you to specify initial settings that are applied when the component is loaded.
Example configuration:
<enviso-ticket-widget terms="this-should-link-to-our-terms-and-conditions" show-prices>
</enviso-ticket-widget>In this example, terms is a configuration HTML attribute of type string, and its value is set to this-should-link-to-our-terms-and-conditions. The second configuration HTML attribute show-prices is of type boolean that enables its behavior as soon as the attribute is present. For more information on Boolean attributes, refer to the MDN Docs.
2. JavaScript Property Configuration at Runtime
Alternatively, you can configure the elements dynamically by setting properties via JavaScript. This method provides flexibility to modify the component's behavior at runtime based on user interactions or other conditions.
Example configuration:
const element = document.querySelector('enviso-ticket-widget');
element.terms = 'this-should-link-to-our-terms-and-conditions';
element.showPrices = true;In this example, terms is a configuration JavaScript property of type string, and its value is set to this-should-link-to-our-terms-and-conditions. The second configuration JavaScript property showPrices is enabled by setting its value to true.
Available configurations
The following configurations are available on the enviso-ticket-widget element which is used as a root to host the Enviso widget:
Attribute | Property | Type | Description |
terms | terms | string | URL to the terms. |
privacy | privacy | string | URL to the privacy policy. |
newsletter | newsletter | boolean | Determines if the newsletter checkbox is shown. |
show-auth | showAuth | boolean | Determines if the login/profile is shown. |
show-date-popup | showDatePopup | boolean | If set, a popup will show to select the date after loading. This will reflect in the date selected in the offer filters. |
show-offer-specs | showOfferSpecs | boolean | Determines whether or not the ticket selection component shows the offer details for regular offers without guides. For other offers (group offers or regular offers with guides), the specs are always shown. |
offer-type | offerType | string | If unset, both ticket and membership offers are shown. If If If |
offer-id | offerId | number | The ID of the offer to be shown in the widget. Takes priority over For membership offers also set |
hide-cart-button | hideCartButton | boolean | Determines if the cart icon is hidden. |
included-offer-ids | includedOfferIds | array | If specified, the offers listed will be the only ones shown in the offer overview. Should be an array. Eg: "[1234,5678,9876]" Takes priority over excluded-offer-ids, i.e. only In case only a single offer is specified, it shows the offer detail without going to the offer overview. |
sort-by-include-offer-ids | sortByIncludeOfferIds | boolean | Enables the sorting of the offers, based on the order of the Ids of the |
excluded-offer-ids | excludedOfferIds | array | If specified, the offers listed will be excluded from the offer overview. Should be an array. Eg: "[1234,5678,9876]". If |
indicate-last-tickets | indicateLastTickets | boolean | Enable to show an indication when the last tickets are available (nearly sold out) or sold out. Default: true |
last-tickets-percentage | lastTicketsPercentage | number | The maximum percentage to mark tickets as last available Default: 25 |
indicate-sold-out-tickets | indicateSoldOutTickets | boolean | Enable to also show sold-out tickets in the calendar. Default: false |
preferred-dates | preferredDates | string | If specified, the first of the preferred dates with available capacity will be preselected in the time selection step (overrides It must have the following format '["yyyy-MM-dd", ...]' |
show-offer-period | showOfferPeriod | boolean | If specified, we show the offer period in the offer specs when ordering. |
disable-auto-visit-time-selection | disableAutoVisitTimeSelection | boolean | Disables automatic selection of the first available date/time during the date/time selection. |
show-prices | showPrices | boolean | Enables showing the reservation prices on offers with a price rule. |
show-prices-type | showPricesPriceType | string | Choose from Default: Please note that this works only if the above |
hashbang-routing | hashbangRouting | boolean | When enabled, routing in the widget will be reflected in the hash of the URL, and the widget will also listen to hash changes. This is only supposed to be used with a single instance of the Ticketing Widget on the page. |
flow | flow | string | Choose the startpage of the widget. Example: |
hide-timeslot-end | hideTimeslotEnd | boolean | When enabled, only the start time of the timeslot is displayed in the basket overview. This applies only to time slot offers. Example: |
Elements can either be empty or not. An empty element cannot have any child nodes. In the documentation of every element, you can find whether the element is empty or not.
More information about empty elements: MDN Docs
Some non-empty elements also have extra slots to add content. Instead of just having your content, these allow you to add extra content in other places inside the element. They are basically placeholders inside a web component.
Every component that has extra slots will have these slot names in the documentation.
You can use a slot by defining the slot name in an attribute:
<enviso-expand>
<span slot="teaser">This content will display in the "teaser" slot</span>
<span>This is the normal content of the element</span>
</enviso-expand>The payment component within the widget will refuse to load over plain HTTP connections. Make sure HTTPS is configured correctly on your web server.
The ticketing widget will automatically report Enhanced Ecommerce activity to Google Tag Manager if GTM is loaded on the page. Contact us to receive a working GTM configuration that integrates with Google Analytics.