Table of contents

1. Live Reload
   1. What is Live Reload?
      1. Demonstration
   2. Add Custom Event Listener
      1. Types of events
      2. Common use cases
      3. Example
      4. Event Body

Live Reload

What is Live Reload?

Venue builder supports live reloading, hence any changes to the page is reflected on the live webpage without the user having to refresh the page.

Demonstration

Figure 1: Live Page

Figure 2: Generate live page link

1. Ensure that page is live and publish any changes if needed (Refer to Figure 1).

2. Under the People section, add a new user with the required details (Refer to Figure 2).

3. Click on Generate and select the live page.

4. You should receive a notification pop up, indicating that a link has been copied to clipboard.

5. Open up a new tab and paste the link to enter the live page.

6. Go back to the venue builder live page and make any changes to your desired component, and click Save & Publish changes.

7. The user should see the changes reflected on the live page, without the need to refresh the live page.

Add Custom Event Listener

Types of events

As a developer, you are able to add customizations such as alert/notification functions for these different events:

1. gevme-content-created
2. gevme-content-updated
3. gevme-content-deleted
4. gevme-content-reorder
5. gevme-header-updated
6. 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.

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
});

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 } };