A Theme on GEVME can be highly customised not only in terms of the look and feel that attendees get to experience but also from the editing experience.
Event Managers and Sponsors have access to customize a venue and set it up for an event.
As a venue developer, you have the opportunity to make that editing experience as smooth as possible.
The following topics go into more detail on how to do so.
- User Roles
- Feature Restrictions
- Live Preview in Editor
User Roles
Types of Roles
There are 2 supported user roles that access the Editor:
- Event Manager
- Sponsor
1. Event Manager
An Event Manager is someone who has access to the Gevme Omnichannel and is responsible for setting up and configuring the virtual event.
Typically, when you are logged in to Gevme, you are a Manager of that project by default.
There can be multiple managers to a single project.
2. Sponsor
A Sponsor is a user that is given access to an event under the Sponsorship module:
Once a Company for a sponsor is created, users can be created and assigned to the company. These users all have the Sponsor user role. Sponsors can access the Editor to manage their "booths" (effectively LivePages).
Feature Restrictions
Introduction
Through the template.json and experience.json configuration files, there are different permutations on how features could be restricted for different user roles in the Venue Editor.
The sections below give some examples.
Restricting Widgets
Restricting to Manager Users Only
If you would like to restrict widgets to be editable by Manager user role only, you can use the following code in template.json:
"widgets": {
"hide": {
"SPONSOR": true,
"MANAGER": false
},
"enabledWidgets": "*"
}Enabling Only Header Widget for All Users
If you would like to enable only the Header widget for all users, you can use the following code in template.json:
"widgets": {
"enabledWidgets": ["header"]
}Note that the above code did not include the hidden key. If it is excluded, that means by default the enabledWidgets will be shown to all user roles.
Restricting Blocks
Restrict Available Blocks to Users
To simplify the experience for users of your venue in the Venue Editor, you might want to restrict the available content blocks - removing the complex ones. This is particularly useful for sponsor booths. You can do so as such:
"blocks": {
"preventAdd": false, // All users can add content blocks
"enabledBlocks": ["RichText", "LiveStream", "Image", "ImageList", "ImageSlideshow", "Pdf", "Resources", "Link"],
"predefinedBlocks": {
// Predefined blocks configuration goes here
}
}Preventing Sponsors to Add Blocks & Restricting Available Blocks
The code snippet below shows how you can:
- Prevent sponsors to add blocks
- Allow managers to add blocks
- Restrict the available blocks to managers
"blocks": {
"preventAdd": {
"SPONSOR": true, // Add Block button not available to sponsors
"MANAGER": false
},
"enabledBlocks": ["RichText", "LiveStream", "Image", "ImageList", "ImageSlideshow", "Pdf", "Resources", "Link"],
"predefinedBlocks": {
// Predefined blocks configuration goes here
}
}Prevent Editing of Block Settings and the Changing of Block Type
The following example is a common use case for 3D Venues.
The following code snippet shows the case where:
- 1 predefined block is configured.
- All users are able to add new blocks
- New blocks are restricted only to specific lists of content blocks
- 1 predefined block is configured
- Sponsors cannot change the block settings, but managers can
- Sponsors cannot change the type of the block, but managers can
- Sponsors and managers cannot delete the block
"blocks": {
"preventAdd": true,
"enabledBlocks": ["RichText", "LiveStream", "Image", "ImageList", "ImageSlideshow", "Pdf", "Resources", "Link"],
"predefinedBlocks": {
"vertical-cover-image": {
"preventBlockSettings": {
"SPONSOR": true,
"MANAGER": false
},
"preventChangeType": {
"SPONSOR": true,
"MANAGER": false
},
"preventEdit": {
"SPONSOR": true,
"MANAGER": false
},
"preventDelete": {
"SPONSOR": true,
"MANAGER": true
},
"type": "Image",
"title": "Cover Image",
"data": {
"heading": "Middle Panel",
"headingVisibility": false,
"headingAlignment": "left",
"livestreamTitle": "Livestream",
"livestreamTitleVisibility": true,
"streamingService": "customstream",
"livestreamUrl": "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4",
"displaySomethingWhenNotLive": "video",
"displayImageWhenNotLive": null,
"displayVideoWhenNotLive": null,
"disableVideoQualityOptions": false,
"disableAutoplay": true,
"order": 1,
"alignment": "left",
"backgroundCoverImage": "https://venues.gevme.com/c8e2767b-e553-4349-b722-2e8424e09ee4/main-stage/media/panel_image.png",
"backgroundCoverImageDimension": { "width": 1000, "height": 640 },
"backgroundCoverImageDistortion": {
"topLeft": ["0, 0", "10, 8"],
"bottomLeft": ["0, 640", "6, 403"],
"bottomRight": ["1000, 640", "429, 374"],
"topRight": ["1000, 0", "423, 81"]
},
"blockWidth": "100%",
"blockHeight": "100%",
"widthType": "full",
"fitHeightToContent": false,
"boundingBox": true,
"contentPadding": "0px"
}
}
}
}Live Preview in Editor
What is Live Preview?
To make the experience of editors smooth in the Venue Editor, we have to ensure there is a true WYSIWYG experience - i.e, when a user makes a change on the left hand content editing panel, the preview on the right hand panel should be almost instantaneous.
If you are building a complex venue that does not use our standard frontend components, then you might need to add the support for the Live Preview by using our Javascript event listeners.
Demonstration
Steps:
- Create a livepage
- Go to People Tab, create a user and generate a magic link. Paste the content of your clipboard in a new browser tab.
- Make changes and click on Save & Publish changes.
- Notice that on the link generated URL, the changes is automatically updated without the user having to refresh the page.
Custom Event Listeners
Types of events
As a developer, you are able to add customizations such as alert/notification functions for these different events:
- gevme-content-created
- gevme-content-updated
- gevme-content-deleted
- gevme-content-reorder
- gevme-header-updated
- gevme-livebar-updated
Common use cases
Common use cases for addEventListener:
- Trigger notification alert dialog on the webpage when a block is created
- Scroll automatically to the block that was just updated
- Re-initialize 3rd party script SDK
- Send data for analytics service and many more.
Event Body
Body of each events are as such:
'gevme-content-created', { detail: { data: ContentBlock } };
'gevme-content-updated', { detail: { data: { old: ContentBlock, new: ContentBlock } } };
'gevme-content-deleted', { detail: { data: ContentBlock } };
'gevme-header-updated', { detail: { data: Header } };
'gevme-livebar-updated', { detail: { data: Livebar } };
'gevme-content-reorder', { detail: { data: { order: number; id: string; name: string; } } };
'gevme-content', { detail: { data: data } };Example
You may write your own custom logic as such
document.addEventListener("gevme-content-created", (event) => {
const contentBlockThatJustGotCreated = event.detail.data;
// do something with this block
});
document.addEventListener("gevme-content-updated", (event) => {
const oldBlock = event.detail.data.old;
const newBlock = event.detail.data.new;
// do something with this block
});
document.addEventListener("gevme-content-deleted", (event) => {
const contentBlockThatJustGotDeleted = event.detail.data;
// do something with this block
});