Email Preview Plugin

If you already have an document object you saved from the editor, you can open the preivew 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
      }
    },
    hooks: {} // an object of available hooks (for example onHeaderButtonClicked)
}
const previewInstance = await chamaileonPlugins.previewEmail(previewConfig);

Preview instance functions

There are not so many previewInstance functions.

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.

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

You can see below the hooks you can use. Read more about them in the following sections.

editorConfig.hooks = {
    onHeaderButtonClicked
};

editorConfig.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.
*/
editorConfig.hooks.onHeaderButtonClicked = ({ buttonId }) => {
    return new Promise(resolve => {
        // Here, you can implement your custom dialog
        resolve();
    });
};

Example

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