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

← Previous: Feature Restrictions