Type Name
Html
Usage
This block supports customised HTML content, it is useful for embedding apps into the livepages.
Type
Content
Content Category
Custom
About the HTML Block
The HTML block is used to build your own custom HTML content, embed apps into your block.
Creating an HTML Block
To create an HTML block, in the Venue Editor, click on "Add Blocks" button in the settings panel on the left, then choose "HTML" under the Custom Category.

Block Settings
The main setting of the HTML block is the HTML setting where you can insert your coding.

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 |
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 |
html | String | “<p> Insert HTML here </p>” | No |
order | Integer | 1 | Yes |
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
"html-block": {
"type": "Html",
"title": "html",
"data": {
"heading": "html",
"title": "html",
"headingVisibility": false,
"headingAlignment": "center",
"backgroundCoverImage": "https://venues-sdk-dev.gevme.com/assets/venue-genesis/serendipity-lounge.png",
"backgroundCoverImageVisibility": true,
"html": "<p> Insert HTML here </p>"
"order": 3,
"alignment": "left",
"blockWidth": "50%",
"blockHeight": "297px",
"widthType": "half",
"fitHeightToContent": false,
"boundingBox": true,
"contentPadding": ["0", "0", "0", "0", "px"],
"contentMargin": ["48", "0", "0", "0", "px"]
}
}