Canvases

Canvas Features

• Event organisers can build or edit the Canvas using pre-designed templates or creating a custom layout.
• A Canvas page can be assigned to pages, such as:
  • Lobby (the front page of the event or Welcome Page)
  • Session Room
  • Vendor (Sponsor) Area
  • Custom Pages
• A Canvas can be set to either active or inactive. An active Canvas is accessible within a preset start and end time, while an inactive Canvas remains hidden until it’s activated again.
• A Canvas updates every two minutes, meaning any changes made will be reflected to users within two minutes
• Only one Canvas can be active at a time on the Lobby, each Session or each Vendor.

Components of a Canvas

The Canvas is composed of three primary components: Layouts, Flexes, and Blocks. Think of the Canvas as a parent container that includes multiple layers that have fixed heights and widths.

Layout

A Layout is the first layer in the Canvas. Layouts are placed in a horizontal (in-line) sequence, and there can be multiple layouts within a single Canvas. Each layout can accommodate multiple Flexes without requiring additional configuration when adding the Layout on the Canvas.

Flex

A Flex is the second layer within the Canvas and acts as a flexible container for the Blocks. Flexes are designed to adapt to the width of the browser window, ensuring the content is responsive and easy to consume on both desktop and mobile devices. The browser window is divided into 12 virtual columns, allowing the widths of each Flex to be customised according to the screen size (small, medium, large). For example, full page=12, half the page = 6, a quarter of the page = 3 etc.

For standard practices, Flexes typically display as six columns wide on desktop screens and extend to 100% (12 columns) on mobile screens for better readability.

The difference between the desktop view and mobile view of a Canvas is that Flexes will stack on top of each other (assuming that they have been configured to do so by adding xs12 to the flex Display Options) on a mobile screen.

Within a Flex, the blocks will stack in the same order on a mobile screen as they appear on the desktop, and layouts will also stack in the same order as they do on the desktop.

Block

Blocks contain the actual content and provide a range of functionalities. Examples include Live Stream Blocks, Featured Session Blocks, Live Chat Blocks, Video On Demand (VOD) Blocks, and Video Tables.

Blocks are the third layer in the Canvas and are added within a Flex. A Block can be resized based on the Flex’s width and the browser’s window.

The Blocks are highly configurable and customisable as per the Block Type. There is a wide variety of block types available. For additional information see the article: Blocks.

Canvas Editor

The Canvas Editor is a tool that allows you to create and edit Community Canvases, including adding and modifying Flexes and Layouts. Blocks can also be added and edited through this interface.

This can be accessed via Portal > Community > Canvases.

In the Canvas Editor, Layouts, Flexes, and Blocks can be rearranged using a drag-and-drop feature. You can ‘grab’ the Layout or Flex and reposition it on the Canvas Page by clicking the drag and drop icon located on the side.

To rearrange a Block, hover the mouse over the Block, and the drag-and-drop icon will appear.

Layout Tab

When you open the Layout tab, if there are more than 10 Layouts in the Canvas, the first 10 Layouts will be expanded, while the rest will be collapsed. The Flexes and Blocks in the collapsed Layouts will not be visible. In the below example, Layout 7 is expanded and Layout 16 is collapsed:

Each Layout’s state (expanded or collapsed) is stored in your local browser storage. Therefore, if you close your browser and reopen the Canvas Layout Tab later, it will remember the state it was previously in.

Block Tab

The Blocks Tab can load a maximum number of 15 Blocks at a time. If there are more than 15 Blocks in a Canvas, they will be paginated. Additionally, there is a search bar to help you locate Blocks by their ID.

Note: Sorting by a column in the Blocks view will sort the entire list of Blocks, not just the page of 15 Blocks that are visible.

Canvas Template Library

This Canvas Template Library offers a variety of typical layouts for use in Community. Templates can only be applied when creating a new Canvas. To create a Canvas using a Template, follow these steps:

1. Download the desired Template via the Download link offered next to each Template below
2. Go to Community > Canvases
3. Select Add Canvas at the top right
4. Select the Template option under Content
5. Click Select to choose the downloaded template file
   
   

Lobby Canvases

Standard Lobby Canvas [Click to Download]

A standard Lobby Canvas includes space for Blocks such as:

• Live Streaming or VOD
• Image or WYSIWYG
• Featured Sessions and Featured Speakers
• Internal Links
  
  
  

Basic Lobby Canvas [Click to Download]

A Basic Lobby Canvas can include the following Blocks:

• Live Stream or VOD
• Live Reactions
• Image/WYSIWYG
• Featured Speakers
  
  
  

Session Canvases

Standard Session Canvas [Click to Download]

A standard Session Canvas layout can include the following Blocks:

• Image Blocks (for header images)
• Live Stream or VOD
• Live Chat or Q&A
• Featured Speakers and Featured Sessions
• File Download
  
  

Basic Session Canvas [Click to Download]

A basic Session Canvas can include:

• Image Block headers
• Live Stream or VOD Blocks
• Q&A Block
  
  
  

Sponsored Session Canvas [Click to Download]

A Session Canvas layout is designed for Vendor-sponsored Sessions and includes the following Blocks:

• Image and WYSIWYG
• Live Stream or VOD
• Live Chat
• Featured Speakers and Featured Vendors
• Vendor Lead Capture
  
  
  

Vendor Canvases

Vendor Canvas with VOD [Click to Download]

A Vendor Canvas with Blocks including:

• Image and WYSIWYG Blocks
• VOD or Live Stream Blocks
• File Download Blocks
• Vendor Lead Capture Blocks
  
  
  

Simple Vendor Canvas [Click to Download]

A simple Vendor Canvas layout including:

• Image and WYSIWYG Blocks
• File Download Blocks
• Vendor Lead Capture Blocks
  
  
  

Custom Page Canvases

VOD Library Page [Click to Download]

A Custom Page Canvas with a layout designed as a VOD Library includes:

• VOD Blocks
• Image and WYSIWYG Blocks
• File Download Blocks
  
  

Duplicate a Canvas

A Canvas can be duplicated and assigned to an existing Session, Vendor or Custom Page, as long as they are not already assigned to a Canvas. The benefits of duplicating a Canvas layout include:

• Time saver: Designing a Canvas can be time-consuming. Once you’ve designed a master Canvas, you can easily duplicate it across multiple sessions, vendors, or Custom Pages, saving the time and effort of creating them individually.
• Fewer errors: Duplication reduces the chance of errors that might occur when creating canvases individually
• Uniformity: All duplicated Canvases will be identical

Prerequisites to Duplicating a Canvas

Before duplicating a Canvas, ensure that it is error-free. This includes:

• Checking Block names are correct
• Default JSON is correct
• Display Options are correct
• Session/Vendor/Custom Pages you wish to apply the Canvas to already exist in Community

How to duplicate a Canvas

1. Navigate to the Canvas record in Jomablue and click Duplicate on the right-hand side
2. Select the Session/Vendor/Custom Page you wish to duplicate
3. Click the Duplicate button and the Canvas will be duplicated

Blocks that require updating

All Blocks containing content, such as WYSIWYGs, Featured Sessions, Speakers, and Vendors, will be duplicated to the new Canvas. However, the following Blocks require manual updating to ensure they are unique to that Canvas:

• Live Chat Block: Needs to be assigned manually, as every Live Chat Block is unique
• Pigeonhole Live and Slido Blocks: The session/event ID must be updated
• Video Tables: If a unique table is required for each Canvas, a new table must be created
• Lead Capture Block: Must be assigned to the correct Vendor to ensure Leads are assigned to the right Vendor profile

Delete a Canvas

The delete Canvas feature allows you to do a 'soft' delete, meaning the Canvas isn't fully deleted but marked as deleted, along with the Blocks it contains. Canvases can only be deleted when they are inactive.

How to Delete a Canvas

1. Navigate to Canvases in the left navigation panel
2. Select Edit on the Canvas to be deleted
3. Change the Active status to No
4. Return to the list of Canvases
5. Wait for the 2-minute timer to reach zero so the Delete button is made available
6. Select Delete and confirm the deletion in the dialog warning

Restore a deleted Canvas

To restore a deleted canvas:

1. Enable the "Show deleted" toggle at the top right of the canvas list page
2. Select the Restore option on the canvas to be restored
3. Click Restore and confirm in the dialog warning

Additional Notes

• You will not be able to restore a Canvas if another active Canvas is already associated with the Lobby, Session, Vendor, or Page you are trying to restore. For example, only 1 active Canvas can exist for the Lobby. An error message will be displayed. Resolve this by ensuring no other Canvas is active for the requirement.
• Also, consider Block interactions. When deleting a Canvas, the Canvas itself is "soft" deleted which means the configuration data is not actually deleted, but put into a "deleted" state. However, any Block interaction data linked to Blocks within a Canvas will be permanently deleted when the Canvas is deleted. Interaction data won't be restored with the Canvas.

Add a File to a Canvas

This section assumes that a File Download Block already exists on your Canvas.

File specifications

• File Size Limit: 20GB per file
• Supported file types:
  
  

  aiff	jpeg	mp4	txt
  bmp	jpg	pdf	wav
  doc	json	png	xls
  docx	m4a	ppt	xlsx
  gif	mp3	pptx

Add a File to a Canvas requires two steps:

1. Upload the file to Jomablue
2. Add the file to the desired Block

1. Upload Files

To upload a file to Jomablue, follow these steps:

1. Navigate to Community > Files
2. Click on the Upload button located at the top right corner of the page (see below):
   
   
   

To upload one or more Files, you can drag and drop them from your computer into the dialog box that appears. A progress bar will display the upload status for each File that you have uploaded (see below):

After the upload is complete, click the small X at the top right of the Upload Files dialog box to close it. You will then see a list of uploaded Files. Each uploaded File will have an associated ID. Note the ID(s) of the File(s) you want to add to a File Download Block. You may need to refresh the page to see the newly uploaded File in the list.

2. Add Files to a File Download Block

Once you have uploaded your Files, follow these steps:

1. Navigate to the Block where you want to upload the Files
2. In the Block Editor, click on the Configuration tab, then click Add File (see below):
   
   

A File selector will appear. Click on None selected to view the list of available Files:

To select a File, click on it. If you have multiple files with similar filenames, it might be easier to search for the File ID instead of relying on the filenames.

Once you have selected a File, you have the option to click on Show optional fields to make additional changes to how the File will display in the Block, including modifying the File's Title, Subtitle, and the download filename (the name that users will see when downloading the file. See below:

You can add more files by clicking the Add Files button. After adding all the necessary Files, click Save at the top right corner of the page to save your changes. Your Files will now appear in the Block!

Preview a Canvas in Community

After creating a Canvas in your Jomablue instance, you may wish to preview it in Community. To do this, make sure you have done the following:

1. Ensure you have a person record in the event. You can search for your name in People to check if your record exists, or add a New Person if required.
   
   
   
2. Go to Settings in Community and make sure the Community is set to active.
   
   
   
3. Go to Canvases. Select Edit on the relevant Canvas and make sure Visibility is set to active on the Canvas Details tab.
   
   

Preview a Canvas via the Launch Button

 To preview your Canvas:

1. Go to the Canvas you have built and wish to preview
2. Click on the Launch button at the top right
   
   

Note:

• When launching a Session or Vendor Canvas, you will be taken to the detail page in a new tab
• When launching a Lobby or Custom page, you will be taken directly to the Canvas
• For Custom Pages, if you are not logged into the Community as a Person with the correct Categories, you may see an Error 404 page.

Adjust Canvas and Lobby Header Widths

You can adjust the widths of Canvases and the Lobby Header using new theming variables. These variables are:

• app-max-width - Sets the maximum width of the content (e.g., Canvases)
• header-image-max-width - Sets the maximum width of the Lobby Header

Important: The Lobby Header image is part of the content and is constrained by the app-max-width variable. If header-image-max-width is larger than app-max-width, the header will only display as wide as the app-max-width value.

Configuration

When a new event is created, two values are added to the Advanced Customisation:

These defaults will make the Community behave as it used to, with a maximum content width (for both Canvases and the Lobby Header) of 1440px.

Two additional placeholder values, large and xlarge, increase the max width to:

• large - 1920px
• xlarge - 2560px

Custom values can also be entered here (in the form of "XXXXpx"). For example, setting "app-max-width": "2140px" would set the max width to 2140 pixels.

Image Specifications

For the Lobby Header image, the recommended size is:

• 2880 x 270px (the current default Lobby Header)

Apply Custom Backgrounds to a Canvas

You can add a single background colour or image to every page across a Community. This is done by applying the variable “app-background” in the advanced customisation field in Community settings, as shown below:

"variables": {

   "app-background": "white"

}

In the example above, the entire Community is set to a white background. You also have the option to set an image and configure how it displays, like in the following example:

"variables": {q

   "app-background": "url('https://res.cloudinary.com/acara/image/upload/b_rgb:151515,o_40/v1594257739/atm-platform_background_1920x1080_tkslfm.jpg’;) fixed center center/cover"

}

You can also set a HEX value (a six-digit combination of numbers and letters representing a mix of red, green and blue). This value will be applied throughout the Community across all Canvas pages.

You have the option to override the app background image or colour for a specific Canvas by applying a custom background. You can apply a custom background image or colour to the following:

• Lobby Canvas
• Session Canvas (the same background will also appear on the Session Detail page)
• Vendor Canvas (the same background will also appear on the Vendor Detail page)
• Community Page Canvas

Note: A background image or colour applied in a Session or Vendor Canvas will also apply to the Session or Vendor Details page and cannot be configured differently.

Apply a background image to a Canvas

1. Lobby Canvas

To set a custom background for a Lobby page, follow these instructions:

1. Navigate to the Community > Settings
2. Locate the ‘Lobby Background’ field.
3. Customise the following elements:

• • Image: Add, update, or remove the background image here
  • Background Colour: Set the background colour by typing the colour name such as ‘blue’ or by using HEX values
  • Background Position: Configure the position of the background image
  • Background Size: Configure the size of the background image
  • Background Repeat: Set the image to repeat or not repeat in the background
  • Background Attachment: By default, this is set to 'fixed' to ensure that the background stays in place and doesn't scroll when the user scrolls the page. This also ensures that the background does not resize as the Canvas loads.

       4. Click Save

2. Session Canvas

To apply a background image to a Session, which will be visible on both the details page and the Canvas page. To do this, follow the steps below:

1. On the left-hand menu of the Portal, select Sessions
2. Click on the Session you want to customise
3. Upload the image in the Session Background field. The recommended image size is 2000px x 2000px or 400px x 400px for a repeating image.

3. Vendor Canvas

Similar to the Sessions, applying a custom background to a Vendor will change both the Vendor Details Page and the Vendor Canvas. To do this, follow the steps below:

1. On the left-hand menu of the Portal, select Vendors
2. Select the Vendor for which you want to customise the background image
3. Upload the image in the Vendor Background field.

4. Community Pages

1. On the left-hand menu of the Portal, select Community Pages
2. Click Edit on the Custom Page where you want to customise the background image
3. Upload the image in the Page Background field.

Notes:

Colours are consistent across the entire Community. Consider the colour scheme of other elements in the Community, such as the Agenda and Speaker List, when setting Custom background colours.

The Agenda, Vendor List, Speaker List, and Login page cannot have individual backgrounds; they are customised using the ‘app-background’ option in Community Customisation.

CSS Property Values

Background Size https://www.w3schools.com/cssref/css3_pr_background-size.asp

Background Position https://www.w3schools.com/cssref/pr_background-position.asp

Background Repeat https://www.w3schools.com/cssref/pr_background-repeat.asp

Background Attachment https://www.w3schools.com/cssref/pr_background-attachment.asp

Change the width of a Flex on a Canvas

Each Block on a Canvas is contained within a Flex element, which sets the width of the Blocks it contains. Similarly, Flexes are contained within a Layout, which is a full-width element within the browser window.

Flexes and Layouts

Flexes are designed to respond to the width of the browser window they are viewed in. The browser window is divided into 12 virtual columns, and Flexes can be configured to span one or more of these columns. The diagram below demonstrates how Flexes of different widths are displayed in a Layout:

To set the width of a Flex, you will use the Display Options JSON in the Flex while viewing the Canvas Layout. An example JSON configuration of a Flex that is 8 columns wide is shown below:

In the above JSON, there are two entries:

• "md8":true configures a "medium desktop" (typical desktop or laptop browser) to display this Flex across 8 columns (2/3 of the width of the browser)
• "xs12":true configures an "extra small" (e.g., a mobile browser) to display this Flex across 12 columns (the full width of the browser)

Configure multiple Flexes within a Layout

When configuring multiple Flexes within a Layout, consider how these Flexes will be displayed on both desktop and mobile browsers. Remember, a full-width Layout is always 12 columns wide, so the combined widths of the Flexes should total 12.

Below is a configuration for two Flexes within a Layout that displays them as 2/3 and 1/3 the width of a Medium Desktop browser, while ensuring they occupy the full width (stacked) on a mobile browser (click the image to view full size):

Note that the Layout Display Options JSON contains "wrap":true, ensuring this is set means that the Flexes will stack when they are viewed on a Mobile device.

Also note that the left Flex contains "md8":true and "xs12":true, ensuring it occupies 8 columns (2/3 width) on Desktop and all 12 columns (full width) on Mobile. Similarly, the right-hand Flex has "md4":true and "xs12":true, setting it to occupy 4 columns (1/3 width) on Desktop and full width on Mobile.

Canvas Visibility Times

During your event, you may wish to reveal certain content at specific times. For example, you might want to allow access to a Keynote Session Canvas at a certain time in an agenda.

Jomablue Community allows users to set dates and times for Canvas visibility. This functionality can be applied to any Canvas type but is most commonly used for Session and Vendor Canvases.

To ensure the visibility times for a Canvas are set correctly, it is important to understand the following concepts:

• Visible After: This is the date and time at which a Canvas will become visible in the Community
• Visible Before: This is the date and time at which a Canvas will remain visible in the Community

Note:

• The visible dates/times are set in accordance with the event’s time zone. If no visibility times are set, the Canvas will be visible in Community at all times.

What displays when a Canvas is not Visible?

Depending on the set “Visible After” and “Visible Before” dates and times, different messages will be displayed on the Call to Action card on a Session or Vendor detail page.

When a Canvas is not yet revealed

If the “Visible After” time has not been reached, attendees will see a countdown clock indicating the time remaining until the Canvas becomes visible:

When a Canvas is no longer visible

Once a “Visible Before” time is reached, the Canvas will no longer be visible to attendees. Below is the messaging a Community User will see on a Session or Vendor detail page indicating unavailability:

If the Canvas Visible Before time is reached and attendees are still in the Canvas, nothing changes for them. However, if they refresh their browser or leave the Canvas, they won’t be able to access it again. Instead, they will see a message stating, “This Content is no longer available” on the detail page.

Notes:

• For Custom Pages, the menu item remains in the left navigation item before/after the visible time
• If the canvas is accessed before the reveal time, the entire canvas is blank; however, a background image will still display if one has been added
• After the reveal time, if the user is still in the Canvas, they must refresh the page to see the changes
• After the reveal time, if the user navigates to the Canvas, everything will appear normal
• Custom Pages contain their own content that is displayed prior to the Canvas being revealed. If there is no content on a Custom Page, it will appear blank.

Referenced Articles