There are two types of widgets to show your venue's upcoming events: list or calendar. See below for integration instructions for both types.
NOTE: Since the widget needs the code injection features of Squarespace, you will need to have a Business or Commerce plan for your website.
1. Showing a List of your Upcoming Events
Go to the page you want to add a list of events for. On the Page Content bar, click Settings.
In Page Settings, click the Advanced option.
Add the following to the Code Injection field:
<link rel="stylesheet" href="https://www.stagehand.app/widgets/v2/css/lumin_widget_styles.min.css" type="text/css" />
Click SAVE on the Page Settings and then on the Page Content bar, click on Edit.
Then click on "+" button to add content to the page.
Choose the Code content type.
Add the following code into the content box and change the venueId and options (see list below) as appropriate for your venue:
<div id="stagehand-events-list"></div>
<script src="https://www.stagehand.app/widgets/v2/event.widget.min.js"></script>
<script>
luminEvents('stagehand-events-list', {venueId: ?, option1: ?, option2: ?});
</script>* Note that your venueId can be found by signing on to Stagehand, selecting VIEW PROFILE from the dropdown menu and then look at the URL. The number at the end will be your venueId. For example the venueId in the URL below is 192.
Example: The following is a sample for a venue with venueId 192, artist photo will be shown and only the next three events will be displayed.
<div id="stagehand-events-list"></div>
<script src="https://www.stagehand.app/widgets/v2/event.widget.min.js"></script>
<script>
luminEvents('stagehand-events-list', {venueId: 192, showPhoto: true, limit: 3});
</script>Click SAVE.
Configuration Options
| Option | Type | Required | Default | Description |
|---|---|---|---|---|
| venueId | number | Yes | None | Stagehand venue ID that the widget will get upcoming events for. To specify multiple venues, provide an array of IDs [1,2,3]. |
| limit | number | No | Unlimited | Limit the number of upcoming events shown. If not provided, all upcoming events are shown. |
| target | string | No | Default anchor behaviour | Where event link is targeted. Mostly useful for when running in iframe. blank opens in new tab, parent opens in originating page of the iframe. If nothing is specified, opens within the iframe. Enclose in quotes. e.g. target: "blank" |
| showPhoto | boolean | No | false | If true, will show the artist cover photo if available on the event listing; otherwise, it will show venue banner photo or if no photo, show Stagehand placeholder. |
| showCalendarDateBadge | boolean | No | false | If showPhoto is not set or false and if true, a div element that shows a date badge is included for each event. |
| disableEventDescription | boolean | No | false | By default, the event description is included for each event. If set to true, the description is not output by the widget. |
| linkTo | string | No | event page | When clicking / selecting the event, we normally redirect to the relevant event page, but if we set linkTo to value artist, then we will instead redirect to the events artist profile page. Enclose in quotes. e.g. linkTo: "artist" |
2. Showing a Calendar of your Upcoming Events
Go to the page you want to add a calendar of events for. On the Page Content bar, click Settings.
In Page Settings, click the Advanced option.
Add the following to the Code Injection field:
<link rel="stylesheet" href="https://www.stagehand.app/widgets/v2/css/venue-event-calendar.css" type="text/css" />
Click SAVE on the Page Settings and then on the Page Content bar, click on Edit.
Then click on "+" button to add content to the page.
Choose the Code content type.
Add the following code into the content box and change options as appropriate for your venue:
<div id="stagehand-events-calendar"></div>
<script src="https://www.stagehand.app/widgets/v2/venue-event-calendar.widget.min.js"></script>
<script>
stagehandVenueEventsCalendar('stagehand-events-calendar', {venueId: ?, option1: ?, option2: ? });
</script>* Note that your venueId can be found by signing on to Stagehand, selecting VIEW PROFILE from the dropdown menu and then look at the URL. The number at the end will be your venueId. For example the venueId in the URL below is 192.
Example: The following is a sample for a venue with venueId 192, the artist photo for the last performance of the day will be shown and only the next ten events will be displayed.
<div id="stagehand-events-calendar"></div>
<script src="https://www.stagehand.app/widgets/v2/venue-event-calendar.widget.min.js"></script>
<script>
stagehandVenueEventsCalendar('stagehand-events-calendar', {venueId: 192, limit: 10, showPhoto: true});
</script>Configuration options
| Option | Type | Required | Default | Description |
|---|---|---|---|---|
| venueId | number | Yes | None | Stagehand venue ID that the widget will get upcoming events for. To specify multiple venues, provide an array of IDs [1,2,3]. |
| limit | number | No | Unlimited | Limit the number of upcoming events shown. If not provided, all upcoming events are shown. |
| showPhoto | boolean | No | false | If true, will show the artist cover photo (if available) on the calendar day; otherwise, it will show venue banner photo or if no photo, show Stagehand placeholder. Also, it will show the photo for the last event of the day. |
| backgroundColor | string | No | None | Only applies of showPhoto is not set to true. A hex color value to display as background for days that have events. Prepend with a # and enclose in quotes. e.g. backgroundColor: "#83210f" |
| target | string | No | Default anchor behaviour | Where event link is targeted. Mostly useful for when running in iframe. blank opens in new tab, parent opens in originating page of the iframe. If nothing is specified, opens within the iframe. Enclose in quotes. e.g. target: "blank" |
