🎄

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:

  1. Create a livepage
image
  1. Go to People Tab, create a user and generate a magic link. Paste the content of your clipboard in a new browser tab.
  2. image
  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.
image

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