About the Speakers
The Speakers block is used to showcase your speakers on a livepage.
In order to utilise this feature, you will have to create the agenda and speaker list under the Agenda app first. Think of the Agenda app as an “inlet” through which the speaker details are added, and the speaker block as being the “outlet” through which the details are displayed and made visible to the attendees.
Create a Speakers Block
To create a Speakers block, in the Venue Editor, click on "Add Blocks" button in the settings panel on the left, then choose "Speakers" under the Event Information category.

Block Settings
The main setting of the Speakers block is the Layout and Show which speakers? setting where you can apply your view, selection and sorting.
- Layout (Single-Card / Multi-Card)
- Show which speaker (All Speakers / Filtered List of Speakers or Manually Select Speakers)
Under Card Settings, you then can set the card size, padding and choose the displayed information of speakers (job title, company, bio)

JSON Config
Attributes
Name | Type | Description | Common to All |
---|---|---|---|
backgroundCoverImage | String | The cover image that you would want to set as default for the block. Eg: “https://files-myxp.s3-ap-southeast-1.amazonaws.com/livestream/default_background/Light_BG_1.png” | Yes |
backgroundCoverImageDisablePopup | Boolean | Does not allow popup to occur when this field is true. | Yes |
backgroundCoverImageDistortion | Object | Refer here. | Yes |
backgroundCoverImageVisibility | Boolean | Only render background image when this field is true. | Yes |
blockHeight | String | Sets the height of the block, only useful when fitHeightToContent is false. Eg: “200px”, “2rem”Units can be: px, em, rem, %. | Yes |
blockVisibility | Boolean | Determines if the block visibility should be rendered by default. | Yes |
blockWidth | String | Only needs to be specified when widthType is “custom”. Eg: “100%”Units can be: px, em, rem, %. | Yes |
boundingBox | Boolean | Value of true would result in the block being wrapped with a white background. | Yes |
breakpoints | Object | Refer here. | Yes |
cardHeight | String | “338px”
Width to height ratio must be at least 1:1.3
Units can be: px, em, rem, %. | No |
cardPadding | String | “2px”
Units can be: px, em, rem, %. | No |
cardWidth | String | 260px
Units can be: px, em, rem, %. | No |
contentMargin | Array | [“0”, “0”, “0”, “0”, “px”]Last index can be: “px”, “rem”, “em”, “%”, “”. | Yes |
contentPadding | String | [“0”, “0”, “0”, “0”, “px”]
Last index can be: “px”, “rem”, “em”, “%”, “”. | Yes |
fitHeightToContent | Boolean | Setting this field to true would result in blockHeight to have a predetermined value. | Yes |
heading | String | “heading” | Yes |
headingAlignment | Enum | "center" | "left" | Yes |
headingVisibility | Boolean | true | Yes |
layout | Enum | “inline” | “grid” | No |
order | Integer | 1 | Yes |
showSpeakersType | Enum | “all” | “filtered” | “list” | No |
sortBy | Enum | “firstname” | “lastname” | “jobTitle” | “company” | No |
sortOrder | Enum | “ASC” | “DESC” | No |
speakerBioVisibility | Boolean | true | No |
speakerCompanyVisibility | Boolean | true | No |
speakerJobTitleVisibility | Boolean | true | No |
speakers | String | ”[]”
Must be a string of Array | No |
widthType | Enum | Renders the block width styling based on the value selected. Only when “custom” is selected, blockWidth needs to be specified. Eg: “full” | “half” | “custom” | “fit-content” | Yes |
Sample
"speakers-block": {
"type": "Speakers",
"title": "Speakers",
"data": {
"heading": "Speakers",
"title": "Speakers",
"headingVisibility": true,
"headingAlignment": "center",
"cardBoundingBox": true,
"cardHeight": "401px",
"cardPadding": "16px",
"cardWidth": "220px",
"fitCardHeightToContent": true,
"speakers": [],
"layout": "inline",
"showSpeakersType": "all",
"sortBy": "firstname",
"sortOrder": "ASC",
"speakerBioVisibility": true,
"speakerCompanyVisibility": true,
"speakerJobTitleVisibility": true,
"order": 5,
"alignment": "left",
"blockWidth": "100%",
"blockHeight": "fit-content",
"widthType": "full",
"fitHeightToContent": true,
"boundingBox": false,
"contentPadding": ["0", "0", "0", "0", "px"],
"contentMargin": ["32", "0", "0", "0", "px"]
}
}