Block configuration

Configure Block Display Options

Access Advanced Configuration Options

Block Configuration is done within the ‘Display Options’ field. You can access the ‘Display Options’ field by following the steps below:

1. Click on the configuration icon given at the side of the Block
   
   
2. Select Advance to put the JSON code snippet
   
   

JSON Code Snippets

Below are the code snippets for different types of configuration. Note that these codes should be entered into “Display Options.”

Display Featured Sponsors/Exhibitors in Community

To display a selection of Sponsors/Exhibitors in Community (for example, displaying your event's main Sponsors in the Lobby), you can make use of the Featured Vendors Block. The Featured Vendors Block can be used to display one or more Vendors, including their names and logos, in an eye-catching format that can be placed on any Community Canvas.

Customisation

Featured Vendor Blocks feature a range of customisation options. Configurable elements include:

• Heading (optional): The heading displayed at the top of the Block
• Description (optional): The plain text description displayed below the heading
• Vendor names: The names of the Featured Vendors can be toggled on or off
• Icon size: The number of Vendors per row (and therefore the size of the icons) can be manually set

Examples

An example of a Featured Vendors Block can be seen below:

​

You may also have multiple tiers of Sponsors and wish to display them in separate, labelled Blocks.

You can do this by using multiple Featured Vendor Blocks. Label the description of each Block accordingly (for example, "Platinum Sponsors", "Gold Sponsors" etc.) See below:

For more information on how to configure Featured Vendor Blocks, see Setting up a Featured Vendors Block

Remove Extra Padding from WYSIWYG Images

WYSIWYG Blocks in Jomablue come with an Editor that allows you to display images and text on a Canvas. It is often used to display a single image, which may sometimes display unwanted padding at the bottom of the image.

To remove the extra padding from the image, follow the steps below:

1. Go to the WYSIWYG Block and click on the Configuration option (for additional details, please see the article: Block Types - Others  under the section WYSIWYG Editor.
2. When inserting or editing the image in the WYSIWYG Editor, click on View and then Source Code
   
3. Remove the <p> and </p> tags around the image
   
   
4. Ensure that the image is embedded in Responsive mode:
   
   
5. Ensure that the WYSIWYG Block Display Options contains:

"flat":true, "class":"pa-0 v-card__text-pa-0 v-card__title-pa-0"

To do this within the Block, go to Advanced > Display Options

Once these steps are completed, the extra padding should be removed from the image as shown below:

Remove Spacing around Blocks in Community

Depending on the desired look and feel of your Community, you may wish to adjust the spacing around blocks, commonly referred to as padding. Canvas customisation options allow you to modify this on Lobby, Session, Vendor and Custom Page Canvases. Below is an example of a Session Canvas with spacing around the Block:

For further clarity, this is how Blocks look with padding:

Without padding, Blocks look like this:

To remove spacing around a Block, you need to apply JSON Code in the display options of the surrounding Flex. You can do this by following these steps:

1. Go to the Portal > Community > Canvas
2. Click Edit on the Canvas where you want to remove spacing around Blocks
   
   
3. Click on Layout to access the Canvas Editor
   
   
4. Click on the Flex downward arrow to open Display Options in which the Block is contained
   
   
5.  Apply the following JSON Code snippet in the Display option of the Flex, replacing the existing ‘class’ attribute:   
   { 
   "class": "pa-0 v-card__text-pa-0 v-card__title-pa-0"
   }
   
   
   
   6. Click Save. The space around the Block should now be removed.

User Experience when the padding is removed

This is what the Community user experiences when they go to the Session Page where spacing around the Blocks is removed:

Set up a Block Reveal Time

In Community, you have the option to reveal and hide Blocks at a specified time. This is known as Block reveal time.

Note: this is different to Canvas Reveal Time.

Use case examples of Block Reveal Times

Block reveal times can be useful, for example, to facilitate the release of video-on-demand content at the conclusion of a live stream of the same content.

Set up Block Reveal Time

To apply Block reveal time to a Block in the portal, follow the steps below:

1. Navigate to Community > Canvases
2. Locate the Canvas that contains the Block requiring the reveal time, and click Edit on the right side
3. Click the Layout tab and locate the desired Block from the list, then click Edit
4. On the Block’s Details tab, apply the times you require into the following fields:

• Visible After: The date and time when the Block will become visible in Community
• Visible Before: The date and time when the Block will no longer be visible in Community.

If you wish to review all the Hide & Reveal Times for all blocks within the canvas, follow the steps below:

1. Navigate to Community > Canvases
2. Locate the Canvas that contains the Blocks requiring the reveal time, and click Edit on the right side
3. Click the Blocks tab
4. You can now see all the Hide & Reveal Times that are scheduled within this canvas.

Note: The Canvas must be Active for the visible after and visible before times to take effect.

User Experience with Block Reveal times

• If no reveal or hide times are set, the Block will always be visible in the Community
• If the Block reveal time (Visible after) is set, attendees will not see the Block until the reveal time
• If the Block hide time (Visible before) is set, attendees can access the Canvas until that time, after which it will no longer be visible

Featured Block URLs

Featured Block URLs provide a method for linking directly to a Block, such as:

• Drawing an attendee's attention to a Block on a particular Canvas by scrolling and highlighting that block
• Providing a link to a specific Block without loading any other Blocks

Link Types

There are three types of direct links to Blocks:

• Temporarily highlight and scroll to this block: Loads the Canvas and scrolls to the selected Block
• Scroll to this block: Similar to Scroll to Mode, but also makes all other Blocks on the Canvas visible but faded, so the selected Block is highlighted.
• Display only this block: Load a reduced version of the Canvas displaying only the selected Block on that Canvas.

Examples

• You want to provide a link to a specific VOD on a Canvas that also displays other VODs
• You are running a hybrid event and want In-person attendees to use the Question and Answer block without seeing the Live Stream block or other online audience-specific blocks
• For In-person events, it might be a useful experience to utilise Isolate mode to link directly to a Question and Answer Block or a Live Chat block. For example, these links could be embedded in a QR code displayed in the room or communicated to the in-person attendees via different means.

Create a Featured Block URL

1. Select Canvases in the left navigation menu
2. Navigate to the relevant Canvas
3. Select Layout view
4. Select the Link icon at the top right of the relevant Block
5. Select the type of link:

a. Temporarily highlight and scroll to this block (Highlight mode)

b. Display only this block (Isolate mode)

c. Scroll to this block (Scroll to mode)

 6. Use the Copy icon to copy the generated link to your clipboard to paste wherever you require

Multiple URLs linking to the same Block

You can create multiple URLs (of different types) that point to the same Block.

For example, you could create a Highlight mode link to add to a Lobby Canvas directing Community members to a specific Block (for example, a Q&A Block) on a Canvas. You could also create an Isolate mode link to provide to In-person event attendees so they can access the same Q&A Block without other Blocks on the Canvas displaying on their device.

Additional Notes

The Canvas must be active

• Links to Blocks may not work as expected if the Pigeon Hole Live block is used on a canvas
• Links to Blocks require the attendee to be logged in. If an attendee is not logged in, they will be prompted to log in before being redirected to the original intended destination
• Links to Blocks can only link to a single Block. For example, you can't create a Highlight link to highlight a group of Blocks or create an Isolate mode link to display multiple Blocks.

Understand ‘Call to Action’

A Call to Action (CTA) is a prompt on a Web Page that lets the user know what to do next. It prompts the user to take a specific action through a command such as ‘Enter’ or ‘Sign up’ that is in the form of a button or hyperlink. In Community, A call to action button is a clickable button visible on Detail pages that allow attendees to access Session or Vendor Canvas Pages.

​

Customisation of Call to Action

Prerequisite

• To go to the CTA, you have to go to the Canvas Details tab which can be accessed via Portal > Community > Canvases
• To customise CTA on a new Canvas, click on Add Canvas and it will take you to the Canvas Details Page
• To customise CTA on an existing Canvas, click on Edit
  
  

Customisation

• Heading: The heading is displayed on the Page such as ‘Welcome.’ It’s mandatory to enter this information.
• Description: A brief description can be written here. This is an optional field.
• Button Label: Enter one or two-word button label here such as ‘Click Here’ or ‘Enter.’ It is mandatory to enter this information.
• Image: This provides an option to upload an image within the CTA. If uploading an image, it’s recommended to upload a 500x200 pixel image.

Content File Requirements in Community

In order to deliver the best experience to your attendees, we recommend that the files and videos that are uploaded to your Community meet certain requirements. Additionally, we recommend following certain procedures when handing files off to Jomablue in order to facilitate easy processing and uploading of the files.

Video requirements

Videos that will be uploaded to be played in Video On Demand Blocks in Community should meet the following requirements:

• Format: The preferred format is MP4
• Quality: The recommended video quality is 1080p (1920x1080), but 1280x720 (720p) can also be used (note that this may impact video quality when viewed on large high-resolution displays in a large Block)
• Size limit: While there is no strict size limit for video files, they should be as small as possible while maintaining the quality levels mentioned above. As a general rule of thumb, a 1080p video shouldn't be any more than 150MB per minute. Note: storage fees are charged per GB per month. Larger files will cost more to store than smaller files.
• File names: We recommend using a consistent file naming convention across all your Video files. Include the Exhibitor/Session name as well as the title of the video, and the destination Canvas type. Video file names should only contain letters, numbers, dashes, and underscores.

Examples:

• A video called "Our Products" to be used on the Canvas for a Vendor called "ACME" could have the filename "Vendor_ACME_our_products.mp4"
• A video called "Presentation" for the "Keynote" Session could have the filename "Session_Keynote_Presentation.mp4"

File requirements

Files can be made available to be downloaded by Community users in File Download Blocks. These files should meet the following requirements:

• Format: The best format to distribute documents such as whitepapers or brochures is PDF (however other file types can be shared if desired).
• File size: Files are limited to 150MB in size. However, the smaller the files are, the better.
• File names: Files should be named with a consistent naming convention that describes what they are and where they will be made available in the Community. File names can contain letters, numbers, spaces, dashes, and underscores.

Image requirements

Images that will be uploaded on various Blocks in Community should meet the following requirements:

• Format: Multiple image formats are allowed. This includes JPEG, PNG, GIF, SVG, bmp, JPEG2000, WebP, PDF.
• File size: Images are limited to 150MB in size. However, the smaller the image sizes are, the better.
• Image names: Images should be named with a consistent naming convention that describes what they are and where they will be made available in the Community. Image names can contain letters, numbers, spaces, dashes, and underscores.

For example, a white paper file for the Vendor named "ACME" could be called "Vendor_ACME_whitepaper.pdf".

File handoff

When handing off files to Jomablue for processing and upload, the recommended method for file transfer is via a shared drive like Dropbox or Google Drive. If any changes are made to the files after they have been uploaded and shared with Jomablue, please notify your project team via the Jomablue Service Desk so they can be made aware of these changes.

Maintaining a logical file structure is important when using an online drive for file handoff. Your Project Team will provide guidance on the best way to structure these file systems for easy transferring of files.

The bulk of your file transfers should be handled in the method outlined above. However, for one-off or ad-hoc file transfers, files can be attached directly to emails and sent to the Service Desk.

Use HTML to publish custom content

Community Pages support the use of Custom HTML instead of the Content Editor (see link at bottom of page for more info). The basic HTML support can support the following HTML tags:

Headings

<h1..h6> … </h1..h6>

All six levels of Headings, with 1 being the most important on a page and 6 being the least. These elements are used to describe content sections on a page.

Grouping Content

<div> … </div>

A generic container is used to denote a page section or block.

Paragraphs of Text

<p> … </p>

This foundational tag is used to organise paragraphs of text.

Line Breaks

<br/>

Creates a line break (or old-school carriage-return), useful for writing blocks of text that need to be on different lines (think addresses, etc.)

Horizontal Rules

<hr/>

Creates a horizontal rule, a sectional break in an HTML page. Typically used to denote a change in topic or section of a page.

Images

<img src="http://hosteimages.com/libraryplanets.gif">;

An image tag to include and display image files. The images must be hosted externally when using the image tag.

Strong or Bold Text

<b> … </b>

or

<strong> … </strong>

Indicating STRONG emphasis, displayed in bold in most browsers.

Another way to create bold text, however, it’s more for drawing attention as opposed to emphasising extra emphasis like the previous tag.

Links to Sites or Content

 <a href=”https://mywebsite.com”>

A hyperlink to another website.

Other HTML elements available:

• HTML Tables
• HTML Ordered and Unordered Lists

Not Supported

• Scripts
• Embedded Videos

Referenced Articles