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


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. 



  1. Create a livepage

  2. Go to People Tab, create a user and generate a magic link. Paste the content of your clipboard in a new browser tab.
  3. Make changes and click on Save & Publish changes.
  4. 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 } };


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