📙
Documentation
Speakers (Developer)

Speakers (Developer)

Type Name
Speakers
Usage
This is a block for showcasing the speakers.
Icon
Screenshots
Type
Content
Content Category
Event Information

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.

image

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)

image

JSON Config

Attributes

🗃️
Block Attributes

NameTypeDescriptionCommon 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"]
  }
}