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.

close

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.

previewConfig.settings

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

previewConfig.settings.buttons.header

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.

Example:

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",
            },
        ]
    }
];

previewConfig.settings.defaultView

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";

previewConfig.hooks

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

previewConfig.hooks = {
    onHeaderButtonClicked,
};

previewConfig.hooks.onHeaderButtonClicked

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.)

/*
Params:
 - 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
		resolve();
	});
};

Examples

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.