Template Editor Sessions

Print & Mail

API

Embed the PostGrid Template Editor in your application via iframe and handle real-time save and error events using the browser postMessage API.

Template Editor Sessions allow you to embed the PostGrid Template Editor in your application and receive real-time events when a template is saved or when an error occurs.

Overview

A Template Editor Session is launched inside an iframe. When users save the template the editor sends structured events to the parent application using the browser’s postMessage API.

Your application is responsible for: • Embedding the editor • Listening for editor events • Handling success and error states

Editor Event Types

When saved the editor emits the following events.

Saved:

{
    type: 'template_saved';
    templateID: 'template_ayfqzhKTfcPLJcEhdndZrZ';
}

Error:

{
    type: EditorEventType.TEMPLATE_SAVE_ERROR;
    templateID: 'template_save_error;
    error: 'Failed to save template';
}

Your application can listen for events using the browser’s message event.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Template Editor Listener Example</title>
  </head>
  <body>
    <h1>Template Editor Host Page</h1>

    <!-- Embedded Template Editor -->
    <iframe
      id="template-editor"
      src="https://editor.postgrid.com/session/SESSION_ID"
      height="800"
      style="border: none;"
    ></iframe>

    <script>
      window.addEventListener("message", function (event) {
        // Always validate the origin
        if (event.origin !== "https://editor.postgrid.com") {
          return;
        }

        const data = event.data;

        if (!data || !data.type) {
          return;
        }

        switch (data.type) {
          case "template_saved":
            console.log("Template saved:", data.templateID);
            break;

          case "template_save_error":
            console.error("Template save error:", data.templateID, data.error);
            break;
        }
      });
    </script>
  </body>
</html>