Block Types - Others

Custom Ad Block

Custom Ad Blocks are a way for you to promote content, facilitate a call to action, or simply display content including text and images. They also provide interaction data about who has loaded and who clicked on the Block.

A Custom Ad Block allows you to promote content, and has two main components:

• A Title (text only)
• A Body (WYSIWYG content)

The Body can contain anything that can be displayed in a WYSIWYG Block, including formatted text and images

The Block can emulate a clickable button by adding an image of a button (one button per Block).

This is because the entire area of the Block is clickable so if you associate a URL with the block, the user can click anywhere in the block to access that URL. An interaction is recorded when Custom Ad Blocks are loaded and clicked.

Features of the Custom Ad Block

• The Block can be linked to an external or internal URL
• On click behaviour: Internal links open in the same window. External links open in a new tab
• Adding a link is optional (can display content only)
• The Block requires a unique ID to differentiate it from the other Ad Blocks in reporting

Interactions available for this Block

When a Custom Ad Block is clicked on by a user, an interaction is recorded against the user's

Person record that provides information on who has clicked the Block. There are two interactions available for this Block:

• Ad Loaded (whenever an ad is loaded on the page)
• Ad Clicked (whenever an attendee clicks anywhere on the ad)

These Interactions can also be stored for post-event reporting and block automations. In addition, block metrics are available in a People Export. When a Community contains one or more Custom Ad Blocks, 2 columns will be added to the report for each Custom Ad Block.

Each Column has a header containing:

• The Block Type
• The Block ID
• The name of the Block (if provided)
• "Impressions" (ad is loaded on the canvas) or "Clicks" (the user clicks on the ad)

Set up a Custom Ad Block

A Custom Ad Block allows you to promote content and provides you with interaction data about who has loaded and who clicked on the Block.

1. Go to the Jomablue Portal and log in with your email address and password
2. Click on Canvases under Community on the left-hand menu
3. Click on the Canvas type where you wish to add the Block (e.g., Lobby, Session, Vendor or Page)
4. Locate the specific Canvas where the Block will be added and click Edit
5. Click on Layout
6. Within a Flex, click Add Block. Here, a list of Blocks will appear. Select Custom Ad.
7. The Custom Ad Block is now added to the Canvas. You may now add a Title, Configure, Automate or Delete the Block.

Configuration options

A Custom Ad Block can be configured via the Configuration tab in the Block Editor.

• URL: A link to a page is added in this tab. Internal links open in the same window whereas external links open in the new window.
• Is internal link: Check this if the link leads to a page within the community app, (external links open the link in a new window)
• Track impressions: Track the number of times the ad is loaded
• Ad UID: A unique ID to pass when tracking interactions with the ad is added in this tab. This makes it easy to do reporting.
• Content: Images & texts are added in this tab

Image Block

A well-designed, and well-placed image boosts attendance and can provide a wider reach to Community members. The Image Block specifically caters to displaying images on the Community pages.

The Image Block allows you to upload and display an image without any borders or padding. It provides a range of features such as modal display options as well as more advanced display options. It also supports a range of customisation features.

Features of the Image Block

Automatic Detection of Dimensions of Image

When configuring the Image Block, the configuration tab automatically detects the dimensions of the uploaded image. It adds them into the ‘Height’ and ‘Width’ fields. You can also manually modify the height and width values to display the image at different dimensions.

Modal Configuration

By checking the ‘Open in Modal Box’ option when configuring the Image Block, you can make the image clickable. The image then opens in a modal view, which is useful when a larger image is added but is displayed at a smaller size.

The modal is configured irrespective of the image itself through the following fields:

• Modal Width: Allows you to set the width of the Modal. This can be in pixels or as a percentage of the width of the entire screen.
• Modal Max Width: Allows you to place an upper cap on the width of the Modal

The modal max-width will always override the modal width field. For example, if a screen is 1000 pixels wide, and the modal width is set to be 800 pixels wide, but the modal max-width is set to 50%, then it will only display as 50% of the width of the page (e.g., 500 pixels).

Responsive Fields

Responsive fields automatically scale the image’s width and height so that they can work well on devices with widely differing screen sizes and resolutions. For example, the image will display at 250px by 250px on small devices, and 500px by 500px on large devices.

Responsive Fields support the entry of multiple values separated by commas.

Interactions available for this Block

Available interactions for the Image Block are:

• Image Link Clicked (image_link_clicked): This is triggered when an attendee clicks on the image.

Set up an Image Block

1. Go to the Jomablue Portal and log in with your email address and password
2. Click on Canvases under Community on the left-hand menu
3. Click on the Canvas type where you wish to add the Block (e.g., Lobby, Session, Vendor or Page)
4. Locate the specific Canvas where the Block will be added and click Edit
5. Click on Layout
6. Within a Flex, click Add Block. Here, a list of Blocks will appear. Select Image.
7. The Image Block is now added to the Canvas. You may now add a Title, Configure, Automate or Delete the Block.

Configuration options

Basic Configuration

• Upload Image: You can add an image here. Once the image is added, it can be updated or removed. The configuration tab will automatically detect the dimensions of the uploaded image, and add them to the ‘Width’ and ‘Height’ fields. These values can be modified to display the image at different dimensions
• Open in Modal: Option to make the image clickable by checking the box. If checked, then the image will open in a modal window. The modal can be configured via these fields:
  • Modal Width: Allows you to set the width of the Modal (in pixels or as a percentage of the width of the entire screen)
  • Modal Max Width: Allows you to place an upper cap on the width of the Modal

The modal max width will always override the modal width field. For example, if a screen is 1000 pixels wide, and the modal width is set to be 800 pixels wide, but the modal max width is set to 50%, then it will only display as 50% of the width of the page (e.g.m 500 pixels

• URL to link image to: You can provide an external or internal URL to link image to

Advanced Configuration

You can access the advanced configuration by clicking on the Show optional fields

• Width and Height: These fields are responsive, and determine the size in which the image is loaded from Cloudinary. They are automatically populated when an image is loaded but can be adjusted manually.
• Max Width and Max Height: These fields are responsive. They allow you to restrict the maximum height/width of the image independently from the size in which it is being loaded from Cloudinary and also support percentages.
• Cloudinary Image Parameters: This is an advanced option. It allows you to directly apply Cloudinary Image Parameters to the image. For example, in the visual example above, ‘c_fill’ is used to resize the image to fill the given dimensions.
• Background Position: This is an advanced option. It allows positioning and cropping of the image if it isn't an exact fit for the Block that contains it.
• Align: This is an advanced option. It allows you to align the image left, right, or centre within the Block if it is not as wide as the Block itself.
• Custom CCC class: This is an advanced option. It allows you to directly assign a CSS class to the image.

Note:

CSS class enables you to apply unique style properties to a group of HTML elements to achieve a desired web page appearance.

Image Slider Block

The Image Slider Block is a way to display image content in a moving carousel, it’s an eye-catching way to showcase Exhibitors, Sponsors, Sessions, or any other area of interest in your Event. Image

Slider Blocks can be placed on any Canvas, including the Lobby, any Session or Vendor Canvas.

An example of an Image Slider block with auto-cycling enabled can be found below:

Image Slider Block Structure

An Image Slider Block has an optional heading and an image slider section. The dimensions of the Image Slider Block are configurable. For example, small, tile-shaped blocks, or large banner-shaped blocks are supported.

All images in an Image Slider Block must be the same dimensions (e.g., same height and width in pixels). Additionally, we don't recommend using more than six images in a Slider as more than six images affect the quality of the image slider.

Image Slider Functionality

Images in a Slider Block can have a URL associated with them. Internal URLs (e.g., links to elsewhere in the Community) will open in the same window, while External URLs will open in a new tab/window.

Add Image Slider Block in Community

Here are the steps on how to add an Image Slider Block in the Community:

1. Go to the Jomablue Portal and log in with the provided username and password
2. Go to the Community section on the menu bar on the left. Click on the Canvas
3. Click on the Canvas where you want to add the ‘Image Slider’ Block
4. Click on the Layout Editor
   
   
   
5. Click on the Add Block, and a list of Blocks will appear. Then choose Image Slider Block
   
   
   
6. Image Slider Block is now added in the Canvas. You can now add a Title, configure, automate or delete the block.
   
   
   

Configuration options

The Image Slider Blocks has the following configuration options:

• Automatic Cycle: This can be toggled on or off. If set to on, images slide automatically after a brief interval. If set to off, the user must click the arrows to progress through the image.
• Cycling Interval: This is set in milliseconds. The default cycling interval is 1000 milliseconds, which is equivalent to one second.
• Hide Controls: Hide the left and right arrows on the images
• Hide Delimeters: Allows you to toggle the delimiters (black bar) to enable or disable. If disabled, the images are displayed without the black bar overlaid onto them.
• Layout: Allows you to select between "Fixed Height" and "Scalable"
• Width: When using the scalable mode, Width sets the width portion of the desired aspect ratio of the image.  It can be made responsive with multiple comma-separated values.
• Height: When using the scalable mode, set the height portion of the desired aspect ratio of the image. It can be made responsive with multiple comma-separated values.
• The Background Size:  Allows customisation of the selected images to fit within the limitations set by the above two settings. This field supports a few different options:
  
  • Cover: Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no space is left.
  • Contain: Scales the image as large as possible without cropping or stretching the image
• The full width of the image: This can be set to yes or no. If set to yes, the slider will take up the full width of the block without any padding. Image slider by default is set to no so as not to take up the full width of the Block.

Once an Image is added, you can configure the following settings for the Image within the Slider:

• URL to link image to: You can associate a URL with images in a Slider Block. Internal URLs (e.g., links to elsewhere in the Community) will open in the same window, while External URLs will open in a new tab/window.
• Select Vendor to Link Image to: Select any vendor from the list of added Vendors
• Select  Speaker to Link Image to: Select any speaker from the list of added speakers
• Select Session to Link Image to: Select any session from the list of added sessions
• Link name: Enter a custom Name that will be displayed in the Click Interaction. 

Image Slider Scalable Mode

There is an option for Image Slider to scale with any display size and allows setting different aspect ratios for different screen sizes. For example, when configuring an Image Slider Block, we can select 'scalable' in Layout and set the aspect ratio. In this case, as shown in the example below, aspect ratios (width and height) are set to 16:9 for large screens and 4:3 for small screens.


The result on a small screen is that the image displays at a 4:3 aspect ratio:


Recommended Image Dimensions in Image Slider

Below are the general image dimensions guidelines based on standard screen sizes of desktops and mobile devices:

• Common desktop screen (screen resolution of 1366x768):
  • For a 100% width Block, use images that are 980 wide and 490 high
  • For a 50% width Block, use images that are 490 wide and 250 high
  • For a 25% width Block, use images that are 245 wide and 125 high
• Larger desktop screen (screen resolution of 1920x1080):
  • For a 100% width Block, use images that are 1360 wide and 500 high
  • For a 50% width Block, use images that are 680 wide and 250 high
    
    
    
• Common mobile screen (screen resolution of 360x640):
  • For a 100% width Block, use images that are 290 wide and 400 high
  • We don't recommend smaller Block sizes at this screen width as the navigation features will become unusable
    
    
    

Interactions available for this Block

Whenever an attendee clicks on any of the images in the image slider, interaction is recorded. This interaction can also be stored for post-event manual reporting.

Internal Link Block

An Internal Link Block serves to redirect the users from one internal page to another internal page within a community.

Add an Internal Link Block to a Canvas

1. Go to the Jomablue Portal and log in with your email address and password
2. Click on Canvases under Community on the left-hand menu
3. Click on the Canvas type where you wish to add the Block (e.g., Lobby, Session, Vendor or Page)
4. Locate the specific Canvas where the Block will be added and click Edit
5. Click on Layout
6. Within a Flex, click Add Block. Here, a list of Blocks will appear. Select Internal Link
7. The Internal Link Block is now added to the Canvas. You may now add a Title, Configure, Automate, generate a Featured Block URL or Delete the Block.

Configuration options

An Internal Link Block has the following configurations available:

• Page Path: The path to the page that you wish the Block to link to. This can be anything in the Community such as the Agenda, Sessions, Vendors or Community Custom Pages. The Page path can be accepted in both forms as given below:
  • Full Community URLs: e.g.,https://xyz.jomablue.com/community/1/agenda
  • Portion after /community in the URL of the Community page you wish to link to.
    For example, you can use /1/agenda
• Link UID: The unique identifier that will be saved in the interaction when the Internal Link Block is clicked on
• Content: The content that will be displayed in the Block. This can be in the form of text, images or both. Note that some content must be present here in order for the Block to be clickable.
• Automatic Redirect: If the toggle is set to on, the Community will automatically redirect the user to the page indicated in the Page Path field, as soon as this Block is loaded (regardless of whether the Block was loaded upon Canvas load, or if it was revealed by a timed or manual Block reveal).

WYSIWYG Editor

What You See Is What You Get (WYSIWYG) Editor is a content management tool that lets attendees view the end result of the content in a way that is similar to when the content is being created. You can do basic editing of the text or images, such as bolding text, adding sub-heads, without getting into advanced coding in WYSIWYG Block.

Features of the WYSIWYG Block

The WYSIWYG Editor supports the following:

• Heading/Paragraph styles
• Bold, Italics
• Set the font colour and highlight colour
• Hyperlinks
• Alignment (left, middle, right, block)
• Indentation
• Image upload and placement
• Writing code (optional)
• Preview content on reduced width device (mobile device)

Add WYSIWYG Editor Block in a Community Canvas

Here is how to add a WYSIWYG Editor Block in Community Plus:

1. Go to the Jomablue Portal and log in with your email address and password
2. Click on Canvases under Community on the left-hand menu
3. Click on the Canvas type where you wish to add the Block (e.g., Lobby, Session, Vendor or Page)
4. Locate the specific Canvas where the Block will be added and click Edit.
5. Click on Layout.
6. Within a Flex, click Add Block. Here, a list of Blocks will appear. Select WYSIWYG.
   The WYSIWYG Block is now added to the Canvas. You may now add a Title, Configure, Automate or Delete the Block.

Images can be uploaded directly to the editor and placed within your content.

Responsive Mode

There is a ‘responsive’ option when uploading images to the WYSIWYG Block. It allows the image to scale responsively within the Block or Flex. You can select the 'responsive' option by clicking on the Class.

Responsive Inline Mode

For images that are to be displayed in WYSIWYG Blocks in line with text, there is an option for Responsive inline mode.  This mode is identical to the Responsive behaviour; only the image has line-height attached, and it will resize to smaller viewports if viewed on smaller displays. You can select the 'responsive inline' option by clicking on the Class.

Interactions available for this Block

There are no interactions available for this Block type.