Getting started
Loading elements
In order to load Enviso web components, you have to do these simple things:
Load the loader script in the document header:
<script src="{basePath}/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(['{basePath}/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>
Configuration
The widget can be configured by changing properties on the global window.enviso.settings object.
Example configuration:
<script>
enviso.settings.apiKey = 'e1clKp+WxU6oS931JN5JhF==';
enviso.settings.salesPointId = 6891;
enviso.settings.offerId = 10243;
</script>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 |
|
The following attributes are available on the enviso-ticket-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 |
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 is applicable only to time slot offers. Example: |
Empty elements
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
Using slots
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>
Enabling payments
The payment component within the widget will refuse to load over plain HTTP connections. Make sure HTTPS is configured correctly on your web server.
Analytics
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.