Landing Page Editor Instance

Initialization

Load the editor script, then call the global LandingPageEditor factory. Options go under config; callbacks are top-level properties passed next to config.

<script
  src="https://v1.page-assets.topol.io/loader/build.js"
  type="text/javascript"
></script>

The legacy https://v1.page-assets.topol.io/topol-lpe.js URL still serves the same file for existing integrations.

const editor = LandingPageEditor({
  config: {
    authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" },
    // ... other options
  },
  onSave({ json, html }) {
    console.log("Saved:", json, html);
  },
  onInit() {
    console.log("Editor is ready");
  },
});

editor.render("#landing-page-editor");

Methods Reference

render(selector: string) => void

Renders the editor into the specified DOM element. Learn more

load(json: Record<string, unknown>) => void

Loads a template JSON into the editor.

save() => void

Renders the current template server-side, then triggers the onSave({ json, html }) callback.

togglePreview() => void

Toggles preview mode on or off.

setPreviewSize(index: number) => void

Switches the preview device by numeric index (0 = mobile, 1 = mobile landscape, 2 = tablet, 3 = desktop). Any other value selects desktop.

undo() => void

Undoes the last change.

redo() => void

Redoes the last undone change.

chooseFile(url: string) => void

Returns the selected file URL to the editor (for custom file manager). Learn more

refreshSyncedSections() => void

Refreshes synced sections listing and reloads template with latest changes. Learn more

refreshComments(key: string) => void

Refreshes comments for a specific conversation. Learn more

openPremadeTemplatesSelection() => void

Opens the premade templates picker dialog.

setTemplateName(name: string) => void

Sets the template name shown in the editor.

updateOptions(options: Partial<IPluginOptions>) => void

Reconfigures a running editor. Accepts any editor options except authorize. Learn more

toggleSelectionPanel() => void

Collapses or expands the right-side selection panel (properties of the selected element).

updateApiAuthorizationHeader(newAuthHeader: string | Record<string, string>) => void

Updates the authorization header for all subsequent API calls. Learn more

createNotification(notification: INotification) => void

Displays a custom notification in the editor. Learn more

close() => void

Tears down the editor iframe completely. Comes from the underlying zoid iframe wrapper rather than the editor itself — there is no destroy() method on the instance.

Example Usage

// Load a template
editor.load(templateJson);

// Trigger save
editor.save();

// Update authorization header
editor.updateApiAuthorizationHeader("Bearer new_token");

// Refresh synced sections
editor.refreshSyncedSections();

// Reconfigure a running editor
editor.updateOptions({ hideSelectionPanel: true });

// Tear down the editor iframe
editor.close();

TypeScript Interface

interface ILandingPageEditor {
  render: (selector: string) => void;
  load: (json: Record<string, unknown>) => void;
  save: () => void;
  togglePreview: () => void;
  setPreviewSize: (index: number) => void;
  undo: () => void;
  redo: () => void;
  chooseFile: (url: string) => void;
  refreshSyncedSections: () => void;
  refreshComments: (key: string) => void;
  openPremadeTemplatesSelection: () => void;
  setTemplateName: (name: string) => void;
  updateOptions: (options: Partial<IPluginOptions>) => void;
  toggleSelectionPanel: () => void;
  updateApiAuthorizationHeader: (
    newAuthHeader: string | Record<string, string>
  ) => void;
  createNotification: (notification: INotification) => void;
  /** Provided by the zoid iframe wrapper */
  close: () => void;
}