Community Configuration

Jomablue Community is a feature-rich online event delivery platform designed to integrate seamlessly with the Jomablue platform. It offers various features for delivering virtual and hybrid virtual/in-person events.

Community features

The features of Jomablue Community include:

Event Lobby

Each Event has its own lobby, which is the default page that loads when users visit for the first time. It displays your Community header image, some event details, an optional Welcome Message, and login (authentication).

Login (Authentication)

Users are not required to register or log in to see basic information. However, Attendees who do login will enjoy a personalised experience and gain access to Vendor and Session Canvases, as well as the Networking feature. There are two login methods available for Community:

• Logging in with a registered mobile/cell phone number
• Logging in with a registered email address

Agenda/Sessions

The Community platform features an Agenda that synchronises with the Agenda in Jomablue. It presents a chronological list of all visible Sessions (each Session can be set to invisible via the Portal), including Session names, start/end times, and Locations.

Vendors

A list of Vendors participating in your Event is available, displayed in alphabetical order or grouped by sections such as Sponsorship levels or other relevant groupings.

Speakers

Community features a list of Speakers at your Event, presented in alphabetical order. Each entry includes the speaker’s Profile picture, Name, Job Title, Company and available contact links.

Networking

Community offers a Networking feature that intelligently recommends other attendees for Community users to connect with. This feature presents the attendee’s name, Profile Picture, Company, Job Title, Bio, and contact information. Users must opt-in to become visible in the Networking feature and have full control over what information is shared in their networking profile.

Custom Pages

Community allows you to create custom HTML content to display within the platform. Custom Pages can be used to display important information, link to external websites, display a map of the Event, or anything else you wish to make available to your attendees.

Canvases

The platform includes a feature called Canvases, which allows you to create custom displays for Session content, Vendor content, Lobby content, and more.

Note: In Jomablue Community, everything happens in real-time. Changes made in Community may take up to 2 minutes to be reflected.

Create digital experiences with your brand

Businesses often invest in skilled professionals to design their marketing material for a good reason - it helps tell their brand story and connect with their audience. Similarly, the experience attendees have with your events on Jomablue is a valuable opportunity to present your story.

When producing an online event, we suggest engaging a digital designer to visually communicate your event’s narrative. A designer with the right skills in digital projects can significantly enhance the user experience. Additionally, they will likely possess knowledge of CSS/HTML and be adept at working with Content Management Systems (CMS).

Four essential steps before starting creative design:

1. Prepare a site map and page wireframes close to final approval. Ensure that you have at least your Lobby and Session Canvas wireframes ready for sign-off.
2. Gather any corporate or event branding guidelines.
3. Write down any specific requirements or design directions you have in mind to align expectations and minimise rework.
4. Provide .psd, .ai, or .eps files of existing assets and logos, along with details of the fonts and colour palettes you wish to use.

What to expect from your designer

It’s a good idea to ask the designer to propose one or two design concepts. This may include an event banner, page background treatments, standard fonts, colour palettes, and an email header.

This process ensures your designer understands the event concept and brand direction, allowing you to select your preferred design concept for the event.

Implementing the design

The implementation of your chosen design involves a combination of design tasks and using CSS modification to achieve the desired outcome. This process is managed within the Jomablue platform, and the time it will take will depend on the number of assets and complexity of the design complexity. For a less experienced digital designer and a basic theme, allow between 4 and 6 hours to implement it in Jomablue. More sophisticated design implementations may take longer.

Working with a Jomablue Designer

Jomablue has in-house design services that can support you in creating custom themes for your events. Please contact the Jomablue team for pricing.

1. Concept Design and Implementation Package

Deliverables:

The package includes the following:

• Two custom themes designed to include an event banner, background, font, and colour palette. Design concepts will be presented on a Lobby and 1 other page. Output includes the creation of individual assets/files
• One edit to the design (if required)
• Implementation of the custom theme and assets within the event, which includes:
  • Upload of individual image assets
  • Configure the site to adopt the chosen design

Requirements:

To ensure successful implementation, you will need to provide packaged design files, high res images, vector files for logos/icons (Ai or EPS), and custom font files.

Scheduling:

Designer resources are subject to availability and should be pre-booked at least 5 days in advance.

2. Custom Design work

In some cases, custom design work may be necessary to support a Community build. With suitable notice, a Jomablue Designer may be available for this work, billed at an hourly rate.

Plan for internal audience events

This section is intended for internal IT contacts with enterprise customers. The success of an internal-focused event relies on the information provided here.

For events with a large internal audience (e.g., staff), it is important to consider that IT policies (such as firewalls and content filters) on either the customer side or Jomablue’s side could exceed a threshold and disrupt services.

Example event

Imagine your company is hosting an internal sales meeting using a Jomablue Community, expecting over 4,000 staff members to log in and engage with the content.

Potential IT Policies to consider:

• Internal Rate limiting
• Corporate Firewall rules
• Bandwidth consumption for high-definition video streaming

If 4,000 employees log in from the same common corporate network or use our platform within the network, it may trigger policies on the customer network (such as firewall rules) that fail to recognise legitimate traffic from Jomablue.

For example, if 4,000 people are connected to a 6Mbps HD live stream, significant traffic will enter the corporate network (without considering any caching), potentially causing bandwidth issues and warranting a preference for employees to use a specific network configuration (e.g., not using the corporate VPN). This should be communicated beforehand.

Note: For some live streams HTTP caching can be leveraged.

Whitelist - Emails

We strongly recommend whitelisting our email domain (event-email.io) to ensure the timely delivery of passcodes required for logging into the Jomablue Community. Delays or misclassification of these emails as spam may impede staff access to the platform. It is common for us to send thousands of emails within minutes of an event starting–sometimes exceeding 50 emails per second to your domain. If no previous emails have been received from our domain, it might trigger spam protections.

It is also strongly recommended to load mobile numbers for staff. Mobile numbers are designed to provide staff with an alternate channel to receive passcodes if emails are being caught by spam filters or delayed in transit for reasons beyond our control.

If these customer-spam protections are triggered and mobile numbers are not provided, users can't access the event and rectifying this is beyond Jomablue's control.

Please note that testing with individuals or smaller audience sizes generally does not provide a realistic indication of how the customer infrastructure will respond to the load impact of a production event.

Action Points:

• Whitelist event-emai.io for incoming emails to your corporate network
• Whitelist jomablue.com URL to allow web browsing and media consumption

Whitelist - Web App

We recommend whitelisting the domain name of Jomablue Community for users to access via their browser on your corporate network. The domain name will be a subdomain of jomablue.com, unique to each customer. These domains are dynamically created and could be blocked by products like Cisco Umbrella as they are considered “recently created” domains by default.

Additionally, Jomablue components utilise other domain names to load assets. You will see a large number of requests hitting these endpoints as well as jomablue.com. If required, Jomablue can provide these endpoints upon request.

Actions:

• Whitelist jomablue.com domains for your users to access

Whitelist - Egress IP/VPN's

Lastly, for audiences larger than 200 staff members connecting from the same office/VPN network/corporate network, you must provide Jomablue with egress/public-facing IP addresses. This allows Jomablue to whitelist incoming traffic from your corporate networks. Failing to do so may result in service interruptions for your end users.

Actions:

• Provide Jomablue with Office/Corporate Network egress IPs for whitelisting.

Configure your Community Settings

The Community offers a wide range of customisation options to ensure it aligns with your brand and looks great for your event. Three main areas can be customised:

• General (settings for the entire Community)
• Recommendations
• Login

Settings can be found under Community > Settings in the left-hand menu of your event.

The General section of Community Settings is where you activate the Community, customise some of its appearance, and enable direct messaging. To set up your Community, navigate to the Settings in Community and edit the following fields:

Active

Set the Community to 'Active' or 'Not Active.' It must be marked ‘Active’ to be visible to users.

Appearance

Community Header Image

Upload a Community Header Image that will be used for the Calendar of Events and may also appear on the Lobby Canvas. The recommended size is 2880px × 270 px.

Community Menu Image

This Image appears at the top of the navigation menu within Community. The recommended size is 600 px × 192 px.

Community Colour

This optional setting is recommended to enhance your branding. It will apply various elements such as buttons and hyperlinks. Please use a hex code that contrasts with white (e.g. #0000FF).

Lobby Background Image

Adding a Lobby Background image is optional. For more information see the article: Canvases.

Background Colour

If you choose not to add a Lobby Background image, you may wish to add a Community Background Colour using a hex code (e.g., #FFFFFF).

Welcome Message

The Welcome Message appears on the default login page for unauthenticated users. You can add a brief event description using a basic content editor.

Features

Direct Messaging

You can enable or disable direct messaging. When enabled, Community users can send direct messages to each other–provided the person has their profile set to public– through the following features:

• Clicking on a person's name in Live Chat
• Clicking on a person’s name in the Photo Booth Gallery
• Accessing the Networking Block

Advanced

Organisation-wide Community Settings

Any branding set at the organisation level should reflect your organisation or company, rather than a specific Event. Since Events within your instance can contain multiple Communities, ensure that the content set here is generic and reusable across all your Events. For additional information see the article: General information.

Customisation (for Advanced Users only)

The Advanced Customisation field allows for advanced customisation of the Community. Familiarity with structuring JSON data is required. For more information, please see the section: Advanced Customisation below.

Default Event Setting for Community PWAs

This feature allows the setting of a PWA (Progressive Web App) default event at the instance level, allowing multi-client instances (e.g., agencies) to select a default event when viewing the Community in PWA mode (e.g., when the Community is installed as an app to your device) without revealing any other events in the same instance.

Configure a Default Event

1. Navigate to Community, then select Settings
2. Click the Edit Organisation Settings button on the right of the screen
3. Choose an event from the Show Default Event drop-down menu
4. Click Save

Note:

• By default, no event is selected
• To de-select a default event (e.g., return the instance to normal behaviour), click the Close icon (the small 'x') to the right of the drop-down menu
• Only one event can be set as the default at any one time. If you have multiple events running in parallel (e.g., an agency is running 2 Community events at the same time), it is recommended to avoid this feature.
• For all non-PWA users (those accessing the Community in a browser without having installed the PWA), there will be no change in behaviour.
• For all PWA users (those who have installed the Community as an app on their device), if a default event is set, the following changes in behaviour will apply:

  • If that user is directed to the Events List view of the Community from within the PWA by an Internal Link, they will automatically be redirected to the default event, without seeing the full list of events in that instance.

    For example, if a Block links to https://instancename.jomablue.com/community, it will automatically redirect back to the lobby of the default event.

    For example, if the default event is Event 2, and from within the PWA they are linked to Event 3 Lobby, they will stay in Event 3. Another Internal Link would have to be provided to move the user to a different event.

  • If an Internal Link directs a user to an event other than the default event, they will remain in the new event until they are directed to a different event. This will persist even if they close and reopen the PWA.

For example, if the default event is Event 2, and from within the PWA they are linked to Event 3 Lobby, they will stay in Event 3. Another Internal Link would have to be provided to move the user to a different event.

Using custom fonts

A Custom Font can be used in a Community using external font declarations (think of a declaration as pointers or signposts) in style sheets. These can either be customer-hosted or on public services such as 'Google Fonts'. If the font is customer-hosted, you will need two main components:

• One or more hosted font files
• A hosted CSS file referencing the hosted font files

Both the hosted font files and CSS file will need to be:

• Hosted on a publicly accessible endpoint (e.g., internet accessible, not internally hosted)
• Capable of handling high volumes of incoming requests (e.g., hosted on an S3 bucket via a CDN)

If you are using enterprise fonts, these should be web-safe fonts and hosted in an appropriate location (e.g., AWS S3 bucket or CDN - Content Delivery Network). Fonts can be in *.ttf format but it's recommended that additional formats such as woff/woff2 are also used to ensure the best cross-browser support.

Once the font files are in a publicly accessible and suitable location, the CSS needs to be defined and hosted. This is the CSS file that will be referenced in the Jomablue Community Advanced Customisation. The CSS file should be as small as possible, containing only the required font declarations and no other CSS (for the best user experience and to avoid any conflicts with other CSS that would reside on Jomablue)

Example:

Here is an example of hosted fonts (these are *.ttf but additional font formats such as woff/woff2 are recommended for cross-browser support). In this example, we have uploaded these fonts to an AWS S3 bucket with a CDN:

Font file URL(s):

https://cdn.jomablue.com/fonts/OpenSans-Bold.ttf

https://cdn.jomablue.com/fonts/OpenSans-Regular.ttf

Once we've hosted our font files, we can then build a CSS file that looks like this:

Note that each of the font files corresponds to a "font-family" name, which we will use to reference individual fonts in Jomablue Community Advanced Customisation.

We then host that file in a public location (that is publicly accessible and scalable). In this case, we have it hosted in the same place the fonts are (this isn't a requirement but it may be more convenient to do so).

CSS file URL: https://cdn.jomablue.com/fonts/myCustomFonts.css

Finally, the CSS file URL can be referenced in Jomablue Community Advanced Customisation (see "href" at the top of the image below), and the individual fonts can be assigned to variables in Advanced Customisation using the "font-family" names defined in the CSS file (see "body-font-family" and "heading-font-family" in the image below):

For additional information on how to add external fonts, please see the section: Add External Font API URL below.

Community Agenda

The Agenda view within Community is a valuable tool for displaying all Sessions occurring during an event in chronological order. It offers several features that personalise each user’s Agenda view and keep it up-to-date.

Each Session in the Agenda includes the Session name, start and end times, and location. A sample Agenda view can be seen below:

Features of Community Agenda

My Agenda

The Agenda allows users to create a personalised Agenda, accessible via the My Agenda toggle in the top bar. Users can add Sessions to their personalised Agenda by tapping the calendar icon next to each Session name. See below for an example of the Agenda and My Agenda views:

Note: Sessions saved in My Agenda can only be viewed in the browser where they were saved. There is no synchronisation across devices, which means sessions saved in My Agenda won't be visible if accessed from a different device or browser.

Jump-to-now

While an event is live, opening the Agenda will automatically scroll to the Session(s) that are currently running, showing the current date/time. Ongoing Sessions will be highlighted with the “on now” text pulsing in green.

Quick Dates

Users can easily jump to different days of the event using date buttons located at the top of the screen. This allows users to jump directly to the Sessions scheduled for that day.

The date tab is visible only for event days that have Sessions. The displayed date format is designed to be region-agnostic and is not configurable.

Agenda Filtering

Users can filter the Agenda based on a set of configurable Session Traits, which are properties that can be applied to Sessions for better organisation. They can be grouped by type and enable the Sessions they are interested in. To Filter the Agenda, click the Filtering icon in the top right of the Agenda:




Then use the checkboxes to select the desired Session types:

Filtering is also available based on a Session's Location (for example, different Streams or the Keynote Stream):

On desktop or laptop devices, the Filter button for the Agenda is located in the top right-hand corner, as shown in the example below:

The colour of the Filter button corresponds to the Primary colour of the Community. You can change the word 'Filter' by modifying the Advanced Customisation section in Community Settings. For example, as shown below, adding the following JSON Snippet will replace ‘Filter’ with ‘Stream’:

Agenda Display

Agenda dates are highlighted when a desktop user hovers over a day or Session in the Agenda. The date corresponding to the day the Session is in will become highlighted at the top of the Agenda, as shown below:

Note: The clock icon and promo text (shown to the left of the session time) both derive from the dark "rgb" variable in custom theming. These are set to 30% and 50% opacity. This cannot be configured in the Community and can only be configured through custom theming.

Session Entitlements

When a user is logged in, they can see whether they are entitled to attend each Session.

• If a Person is not entitled to attend a Restricted Session, a red padlock will appear next to the Session name in the Agenda
• If they are entitled, a small green unlocked padlock will appear instead
• Entitlements are managed by an organiser, either at an individual level or entitling anyone within a category to attend a session.

Not Entitled to attend:


Entitled to attend:



Automatic updating

If changes are made to the Agenda in Jomablue, they will automatically updated within the Community Agenda.

This eliminates the need for downloadable PDF agendas, which can quickly become outdated, are harder to manage, and are less convenient to view compared to a responsive web page like the Community Agenda.

Notes:

• Sessions can be hidden from the Community. This setting can be configured under the Session details in Jomablue.

Community Schedule

The Community Schedule provides an alternative view of the Agenda. For additional information see the article: Session Canvases.

Preview Mode

It’s recommended to check your Canvases in Preview Mode before launching them to attendees. Preview Mode allows you to ensure the configuration is correct and that the content appears as intended without revealing it to the entire Community audience.

Preview a Canvas in Preview Mode

To view a Canvas in Preview Mode, follow the below steps:

1. Before previewing the Canvas, ensure its visibility is set to active by visiting the Canvas Details page
2. Go to the People tab to ensure you have a person’s record in the event
3. Log in at xyz.jomablue.com/community/organiser (“xyz” should be replaced with your relevant instance name) using your Jomablue user email and password
4. Select the event you wish to check by clicking View in Preview Mode.
   
   
   
   

You will now see the Community in Preview mode and can access the Canvas you wish to review.

View Canvases and Blocks scheduled to reveal in the future

If you are using Block reveal times to display Blocks at a time in the future, you can preview how this will look like when the Block reveals using Preview Mode.

In Preview Mode, a box at the top of the screen will display:

The bottom banner displays that you are in Preview Mode and have the option to ‘disable’ the mode.

The top banner displays the time at which you are viewing the Canvas. Controls in this panel enable you to view the Canvas at a specified future time, letting you preview blogs that are not yet revealed. This is especially useful for complex Block reveal/hide timing considerations. For example, if you have a Vimeo VOD Block set to reveal after a Live Stream, you can preview the scheduled ‘visible from’ time set on the Vimeo Block to check that the correct video will appear on the Canvas.

You can step forwards or backwards in time in 1hr and 1 min increments, and refresh the page contents while preserving the current viewing time. Please note that refreshing the page will reset the viewing time back to real-time.

You can click on the ‘Settings’ icon to:

• Quickly toggle between viewing the Canvas "Now" and "at the specified time"
• Configure the specified time and date
• View the timezone that the Event is in
• View inactive blocks by toggling the "Show inactive Blocks" option
  
  
  

To apply any of these changes, you will need to click Apply Settings

Notes:

• No Block interactions are saved in Preview Mode
• Session entitlements are ignored, and Canvases are displayed regardless of visibility settings
• Once authenticated into ‘Organiser,’ the idle timeout is 72 hours. If there is no activity within this period, the organiser is automatically logged out and must log in again.
• If you have multiple timed Blocks in the same location, these cannot be viewed in Preview Mode
• Preview mode does not cache Community, so changes made in the Portal will be immediately visible in Preview Mode

URL for Community

The Community can be accessed in a web browser, allowing you to include a link to the Community in pre-event communications, emails or other activities.

The URL is the same across all platforms (e.g., no different stores for Android vs Apple), including desktop browsers.

You can find your Community URL by navigating to Community Settings and clicking Go to Community.

The new window/tab that is launched will contain the URL you can share with Attendees. Example url: https://acme.jomablue.com/community. Use this structure of URL if you are going to publicly advertise a URL (e.g., printing on a paper guide).

Direct Linking

Directly linking to specific pages within the Community is supported. For example, you may want to link directly to a particular event or a specific page within the Community, such as the Login page, Agenda or Vendors.

This feature is especially useful for sending an SMS upon check-in to a Session, linking users directly to the Session details within the Community.

Let's say, you have multiple Events in the Community and you want to link people directly to the Event they are attending, not the full Calendar of Events. Simply navigate to the page you would like people to land on, and directly copy and publicise the URL.

Examples:

Note:

• Ensure you copy the URL from your Event App so the link works correctly.
• In these examples, “xyz” should be replaced with your relevant instance name.
• Don't link to pages that require authentication, such as Networking or the Feed. This will result in an error message for the user. To verify that your URL doesn't require authentication, test the link in Incognito mode. If you see the page, you're good to go.

Link directly to an Event:

https://xyz.jomablue.com/community/1

Link Directly to the Agenda:

https://xyz.jomablue.com/community/1/agenda

Link Directly to a Vendor Profile:

https://xyz.jomablue.com/community/1/vendors/3

Manage the appearance of the Community Page Title

Jomablue allows you to control the visibility of the Community Page Title. You can set the Page Title to be visible or hidden, allowing for flexibility in branding throughout the Community.

By default, the Community Page Title is visible, as shown in the example below:

Disable the Community Page Title

Note: This disables the Page Title for the entire Community.

To disable the Community Page Title, please follow these steps:

1. Navigate to Portal > Community > Settings > Customisation
2. Add the following code to the Advanced Customisation section of Community Settings: pageTitleEnabled":false
3. Click Save. The Community Page Title will now be hidden, as shown in the example below:
   
   
   

HTML Support

The Community supports the use of a content editor, meaning no coding is required. The code examples below are no longer maintained. For additional information see the article: Block Types - Others under the section WYSIWYG Editor.

Session Descriptions

The following is supported within a Session description:

<br />

<img src=" ">

<a href= " " target="_blank"></a>

<b></b>

<center></center>

<h2></h2>

<h3></h3>

<p></p>

<p color="red">This is some red text!</p>

Vendor Descriptions

The following is supported within a Vendor Description:

<br />

<img src=" ">

<a href= " " target="_blank"></a>

<b></b>

<center></center>

<h2></h2>

<h3></h3>

<p></p>

<p color="red">This is some red text!</p>

Speaker Descriptions

The following is supported within a Speaker bio:

<br />

<img src=" ">

<a href= " " target="_blank"></a>

<b></b>

<center></center>

<h2></h2>

<h3></h3>

<p></p>

<p color="red">This is some red text!</p>

Restrict Access to a Custom Page using Category Entitlements

Custom Pages are pages in Community that can be used to present content outside of other pages such as the Lobby, Session and Vendor Canvases. They are fully customisable static HTML pages that can serve various purposes.

If you want to restrict access to certain Custom Pages for specific attendee types (e.g., enabling only VIPs to access a VIP Custom Page), you can apply Category Entitlements to the Custom Page of your choice.

Apply Category Entitlements to a Custom Page

To apply Category Entitlements to a Custom Page, follow the steps below:

1. Go to the Portal > Community > Community Pages
   
   
   
2. Click on the respective Community Page where you want to change the Entitlement, as shown below:
   
   
   
   
3. To apply the Category Entitlement, select ‘yes’ on ‘Requires Authorisation’
   
   
   
   Note: if set to ‘No,’ viewing the page does not require authentication.
4. Select the Category you wish to allow access to:
   
   
   

Category entitlements are now applied to the Custom Page in Community. Only authenticated Community users belonging to the selected categories will be able to view the Custom Page.

Hide events from the Community Calendar

Sometimes you may need to hide an Event from the Calendar in your Community. You may want to keep the Event hidden from the Calendar until the Event is fully set up, or you may want to hide it once the Event life cycle has concluded. To do this, follow these steps:

1. In Jomablue, select the Event you wish to hide from the Community
2. Navigate to App Specific > Settings
3. At the top left of the screen, you will find a radio switch labelled Active. Switch this from "Yes" to "No" (as shown below)
   
   
   
4. Click Save at the top right of the page to save your settings

Conduct a content audit of a Community site

Introduction

Just as in-person events require careful organisation, producing digital experiences with live or simulated components also requires checks and balances for success. This includes executing a testing or audit plan in the final days before going live.

The purpose of an audit is to verify that every piece of content and every configuration (such as session titles, speakers, videos, and reveal timings) is correct. It's important to catch discrepancies that may arise during the upload and Community build process. Additionally, things can change at the last minute, and without proper change-management processes in place, these changes may not be captured.

At the start of your project, determine when you need to have all your content complete and uploaded. Set realistic deadlines and make sure to allocate time for your audit, allowing for any issues that may arise during the process. Avoid scheduling the audit for the night before you plan to go live with your Community.

Plan for a successful audit

• Build time into your project plan to complete a content audit
• Ensure the Community site is 100% complete before the audit
• Use a show flow document as a reference to verify the site’s content (e.g., what times will Canvases and Blocks be revealed?).
• Allocate 2 people to conduct the audit, preferably those who did not complete the content upload
• An audit is best done in the morning, and if possible, not on the last business day of the week

You need a consolidated document to cross-check the site against and we suggest using a detailed show flow. As you make decisions during planning and collecting content, your show flow should be populated so it becomes a single source of truth before building your site or adding content.

Checklist before you start the audit

• The show flow is complete
• Every video has been watched before upload (and the audit)
• All copies have been proofread before uploading
• All content has been uploaded to the site
• Block and Canvas reveal times have been set

What to Audit and How

Below is a list of items typically included in an audit. Recognise that every Community and every project is different, so some items may not be necessary for all projects. Your audit team of 2 should work together using the show flow displayed on a separate screen from the site. This works if they are in-person and doing it virtually.

Your show flow is ideally created within a tool such as Google Sheets for easy filtering of content by date, time, or location (what page) it happens on. For example, we suggest you audit one content page at a time rather than looking across all things that occur at 9 am.

What to Audit

• The time each session reveals and potentially is then locked
• The time each block reveals
• The configuration of each Block, including the Name
• Any expected automation per Block is correct
• Flex and Layout configurations
• Overall layouts appear as expected
• If multiple blocks are in the same position, test them in each state
• Video Table and Live Chat settings are correct
• Tracking Pixel is on each Canvas

Blacklist Users from a Community Event

During your event, you may be required to blacklist or cancel Community users from your Community event. Once a Community user is cancelled from the event, they will be automatically logged out of the event they are in. There may be a short delay of up to 60 seconds before the person is logged out.

To cancel a Person from the event, follow these steps:

1. Go to People in the left-hand navigation
2. Search for the person you want to cancel from the event by their first name, last name, or company in the Search for People field
3. Click on the Person name you want to cancel
4. Click on the Actions button at the top right
5. Select Cancel Event Registration
6. The person is now cancelled from the event and they cannot access the event anymore

Note: You can reverse the cancellation by selecting the Actions button and clicking the Reverse Cancellation of Event Registration button, so the person will be able to access Community and receive communications again.

User Experience when a Person is Blacklisted

Once the person is cancelled, they will be automatically logged out. If the Community user attempts to log in again, they will see the following message on the login card in Community:

Community header image safe space

To provide a responsive experience for all users on Desktop and Mobile devices, it is essential to consider if the Community Header Image looks good on Desktop and Mobile devices. We recommend following the design safe space.

Any important logos or design elements should be placed within the designated safe space to ensure they will properly display across all devices. Design elements located outside of this safe space may not be displayed on mobile devices (and is dependent on the width of the device).

Safe Space: Approximately 1/3 from the left

Asset Total Size: 2880px x 270px

Advanced customisation

The Advanced Customisation field allows for advanced customisation of the Community. By using JSON, you can customise labels (e.g., Agenda can become Schedule) and modify the presentation of the menu items. There are default settings for all customisable elements in Advanced Customisation, so if you don't make any customisations, the app will operate as expected.

You need to be familiar with structuring JSON data. It’s advisable to use a JSON linter to validate your customisation before placing it in the field. Be aware that it will only validate that the structure is correct and won't check if you have the correct values for the customisation of the Community. Moreover, while you can copy CSS (advanced customisation) from one event to another, copying CSS between different Canvases is not possible.

Customising Community Menu items is achieved by creating a JSON object, which can be found in the Jomablue Portal under the Community section on the Settings page, in the Customisation text box. This JSON object must contain two keys: language, and nav. The language key should refer to an Object, while the nav key should refer to a List of Objects. A JSON object for this purpose will look like this:

{

  "language": {

     "page_name_1":"new_page_name_1",

     "page_name_2":"new_page_name_2",

     ...

     "page_name_n":"new_page_name_n"

  },

  "nav": [

    {

      "name":"page_name_1",

      "order":1,

      "enabled":true

    },

    {

      "name":"page_name_2",

      "order":2,

      "enabled":true

    },

    ...

    {

      "name":"page_name_n",

      "order":n,

      "enabled":true

    }

  ]

}

Hide menu

You can toggle the visibility of the left-hand Menu on the desktop view by setting the property to true (visible) or false (hidden). By default, the visibility is off, which means the menu is hidden. You can expand the menu by clicking on the menu icon, commonly referred to as the 'hamburger icon,' in the upper left corner of the page. On mobile view, the menu is also hidden by default.

{

  "permanentMenu":true,

}

Menu language

You can change the labels of the following words.

• Vendor / Vendors
• Agenda

For example, you might wish to change Vendors to Exhibitors and Agenda to Program. To do so, inside the language object, add the page name as the key and the desired new wording as the value. Here is the JSON example of that customisation renaming "Vendor" to "Exhibitor", "Vendors" to "Exhibitors", and "Agenda" to "Program":

{

  "language": {

    "vendor": "exhibitor",

    "vendors": "exhibitors",

    "agenda": "program"

  }

}

You can choose to include or omit any value within the JSON e.g., only include 'Vendors' if you're not waiting to change the 'Agenda' language.

If you don't see the change applied, it may indicate incorrect JSON formatting. Changes take effect immediately, so refreshing the Community page should display the change.

Menu order

With this customisation, you can change the order of menu items and disable certain items. If you disable a menu item that usually appears in the 'quick links' on the homepage, it will also be hidden.

Ordering menu items

Place a single menu item in the first position in the menu:

{

    "nav": [{

    "name": "agenda",

    "order": 1

    }]

}

Important: Custom pages are considered as a single menu element. Therefore, you can order all custom pages as a "block" inside the menu, but you can't order them individually alongside other menu items.

Here is the ordering Agenda in position 2, speakers in position 3, and then all the custom pages in position 4:

{

    "nav": [{

    "name": "agenda",

    "order": 2

    },

    {

    "name": "speakers",

    "order": 3

    },

    {

    "name": "custom_pages",

    "order": 4

    }

    ]

}

Disabling/hiding Menu items

In the Jomablue Community, you may want to hide certain pages based on the style of your event. This can be done using JSON in Community Settings > Customisation field.

Default Pages

The default pages and their names in Community Menu are:

• Login ("path": "/:eventid/login")
• Networking ("path": "/:eventid/networking")
• Speakers ("path": "/:eventid/speakers")
• Agenda ("path": "/:eventid/agenda")
• Vendors ("path": "/:eventid/vendors")
• Logout ("path": "/:eventid/logout")

Here is an example of disabling the Networking, Event Feed, and Vendors functionality:

{

    "nav": [{

    "path": "/:eventid/vendors",

    "enabled": false

    },

    {

    "path": "/:eventid/feed",

    "enabled": false

    },

    {

    "path": "/:eventid/networking",

    "enabled": false

    }

    ]

}

Hiding Switch event

It is recommended that the Home and Switch Event menu items not be hidden, however if required, you can remove the Switch Event by applying the following JSON code:

{

"nav": [

    {

          "path":"/events",

           "enabled":false

     }

   ]

}

Hiding Static Elements

Common static elements in the Lobby, such as the welcome message, event description, and profile section, can be hidden by adding the following JSON code snippet in the Customisation field within Community Settings:

{

   "hideStaticElements":true

 }

Example of the Lobby Canvas with the Static elements:

Example of the Lobby Canvas with the Static elements hidden:

Combine language and menu customisation

The JSON structure allows you to include multiple customisations within the same customisation field. Here is an example of changing the language while also disabling some pages.

{

    "language": {

    "vendor": "exhibitor",

    "vendors": "exhibitors",

    "agenda": "program"

    },

    "nav": [{

    "name": "speakers",

    "order": 2

    },

    {

    "path": "/:eventid/vendors",

    "enabled": false

    }

    ]

}

Important notes:

• The name or path inside of nav must be the original name. It can't be the updated language name. For example, above you see we renamed Agenda to 'Schedule' but within the nav object for changing the order it's still named 'Agenda'
• Some menu items are only displayed based on the user’s status. For example, if a user is logged in, the ‘Login’ option will not appear. However, the order of items will still be visible, even if the user cannot see them.

Menu icons

The community uses Material Design Icons. You can see all available icon options in the library here. Here is an example of changing two of the icons.

Note: If you have created Custom Pages for your event, icon settings are configured within Custom Page settings and can't be customised via Advanced Customisation.

{

    "language": {

    "vendor": "exhibitor",

    "vendors": "exhibitors",

    "agenda": "program"

    },

    "nav": [{

    "name": "speakers",

    "order": 2,

    "icon": "assignment_ind"

    },

    {

    "name": "networking",

    "icon": "whatshot"

    }

    ]

}

__________________________________________________________________

All page names and available attributes

Page Names:

"name": "login",

"name": "feed",

"name": "networking",

"name": "speakers",

"name": "agenda",

"name": "vendors",

"name": "switch event",

"name": "custom_pages",

"name": "logout",

Attributes:

"order": (1,2,3,4 etc)

"enabled": (true, false)

"icon": ("icon_name" from material design library)

Renaming Lobby

To rename the Lobby Page to Homepage or any other title, navigate to the Portal > Community Settings and add the following code in the advanced customisation box:

"language": {

"Lobby": "Homepage"

},

Below is a visual example:



The new name of the Lobby will appear on both the navigation bar and the top title. You can review the changes you made by clicking Go to Community.

Add external font API URL

Any self-hosted fonts and CSS must be externally accessible and have the appropriate CORS configuration for the Jomablue application to access the resources. If you use a service like Google Fonts API, this is all taken care of and Google Font API URL is simply inserted into the Jomablue Community Advanced Customisation.

1. Go to Google Font library

2. Search for the font ‘DM Sans’
3. Select the font and choose your desired style
4. Click Select this style on the right
5. Copy HREF and the font family from the codes as shown below:

• • "https://fonts.googleapis.com/css2?family=DM+Sans&family=Ms+Madi&display=swap"
    
    
    

6. Navigate to your Portal>Community>Settings>Advanced Customisation

7. Add the copied URL into the Advanced Customisation tab under ‘theme,’ as shown below:

• • "href":
    "https://fonts.googleapis.com/css2family=DM+Sans&family=Ms+Madi&display=swap"",

8. Update the JSON code variable to choose the correct font:

• • "heading-font-family": "DM Sans, sans-serif", 
    
    
    
  • "body-font-family": "DM Sans, sans-serif",
    

9. The Google font API is now added to the Jomablue Community

Note: We advise against hotlinking to other websites' CSS unless you have permission and are knowledgeable about the scale capabilities. Improper usage may result in unexpected traffic spikes on the destination website or block requests from Jomablue, which can cause additional issues for delegates attempting to access other resources. Furthermore, it may inadvertently alter the appearance of the Jomablue Community.

Troubleshooting

Blurry images in Community

Example of a blurry Vendor logo:

Example of a blurry Speaker image:

Images are recommended to be 500px x 500px. If your Speaker profile photos or Vendor logos appear blurry or pixelated, the source image uploaded to Jomablue might not be of sufficient quality (resolution).

Speaker Photos

Keep in mind that Speaker photos in Community are automatically centred on the Speaker's face. So, a full-body shot of the Speaker taken at 500px x 500px may still end up blurry once it is cropped to focus on the face. To address this, use a cropped image of the Speaker's head and shoulders at a size of 500px x 500px or ensure that a full-body shot is at least at least 2000px x 3000px.

New content not displaying

Jomablue Community uses worldwide caching to provide users with fast in-app experiences worldwide. This means no matter where you are in the world, Community content loads quickly for the best experience possible.

As part of caching the content, updates to Community content can take up to 2 minutes to roll out and be visible in the Community.

This is only noticeable if you are the one making changes in Jomablue and are refreshing your browser to double-check your work. To the attendees, this 2 minute delay is not noticeable at all.

How to see your updates immediately

If you are updating content and want to see the change instantly, you can add this URL parameter. By doing this, you will always see your updates immediately.

Be careful, this URL should only be used for you to check the content and never distributed as the link for attendees to access the event app.

Simply add the following parameter to any Community URL: ?cache=0

For example:

https://xyz.jomablue.com/eventapp?cache=0

https://xyz.jomablue.com/eventapp/1/agenda?cache=0

Referenced articles