---
title: Template Editor Sessions | PostGrid
description: 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](https://docs.postgrid.com/#6b82eab7-4f09-42b4-b63e-cd73a3f2182a) is launched inside an iframe. When users save the template the editor sends structured events to the parent application using the browser’s [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/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>
```
