Email Preview Plugin

If you already have an document object you saved from the editor, you can open the preview with the following function call:

const previewConfig = {
    document: {}, // email JSON - required
    settings: {
      buttons: {
        header: [] // an array of objects describing the content of the dropdown in the top right corner of the preview plugin
      defaultView: "mobile"
    hooks: {} // an object of available hooks (for example onHeaderButtonClicked)
const previewInstance = await chamaileonPlugins.previewEmail(previewConfig);

Preview instance functions

We only have one previewInstance function.


Closes the preview.

await previewInstance.close();

Preview configuration

As you have seen previously, some of the configuration values are pretty self-explanatory, some of them needs somewhat more clarification. The config object you pass to the previewEmail function, has the following properties:

Property Type Description
document object The document descriptor object. You might want to save it as a JSON object.
settings object The settings of the preview instance.
hooks object You can register callbacks on events from the preview instance.


The settings object has the following properties:

Property Type Description
buttons object The configuration of the header buttons.
defaultView string Default view tab of the Email Preview


You can configure the buttons in the top right corner of the preview. You can set up their icons, labels and ids. If a user clicks on them, then the onHeaderButtonClicked hook will be called with the id of the button. With this option, you can add custom functionality to the preview. For example, you can create custom dialogs. You can also configure dropdowns.


previewConfig.settings.buttons.header = [
        id: 'preview',
        type: 'button',
        icon: 'eye',
        label: 'Preview',
        color: '#aaaaaa',
        style: 'text' // filled, depressed (no shadow filled), outlined, text, plain
        type: 'dropdown',
        icon: 'dog',
        label: 'Dropdown',
        color: "secondary",
        style: 'outlined',
        items: [  // if any button has a items field will generate a dropdown button, and only the items get callbacks
                id: "share-email",
                label: "Get shareable link",
                icon: "share",
                id: "send-test-email",
                label: "Send test email",
                icon: "email",
                id: "request-review",
                label: "Request a review",
                icon: "comment-eye",


You can optionally set the default view tab (which will be displayed when opening the Email Preview Plugin).

Possible values are "mobile" (default) and "desktop". In result of this setting, the corresponding view tab will be displayed first.

previewConfig.settings.defaultView = "desktop";


Below are the list of hooks that you. Read more about them in the following sections.

previewConfig.hooks = {


If you have set up header buttons in the config, you can use this hook to implement anything you like. (Most likely you will pop up a dialog.)

 - buttonId: string id of the button from the editorConfig.dropdownButtons array

Has to resolve: nothing.
previewConfig.hooks.onHeaderButtonClicked = ({ buttonId }) => {
	return new Promise(resolve => {
		// Here, you can implement your custom dialog


We put together a demo and you can check out the code here.

You can also check out the email preview plugin on the Chamaileon SDK Playground.