Email Thumbnail Plugin

You can use this plugin to create a HTML thumbnail from our email document JSON object. This is very similar to the email preview, but the difference is that you can set the size and scale value of the thumbnail.

With this you can create email cards with thumbnails, or you can preview the email before opening the editor.

You can initialize this plugin with the following function call:

const thumbnailConfig = {
	plugin: "thumbnail",
	data: { document }, // email document JSON
	settings: {
		scroll: true,
	hooks: {}, // an object of available hooks

const thumbnailInstance = await chamaileonPlugins.createInlinePlugin(
		container: "#email-thumbnail", /* HTML Element */
		dimensions: {
			width: 1000, // default 100%
			height: 720, // default 100%
			scale: 1, // default 1

Thumbnail instance functions

These will be returned after a successful plugin initialization.


These are methods provided by the plugin instance.


Updates the settings inside the plugin instance on the fly.

const newSettings = {
	scroll: false,

await thumbnailInstance.methods.updateSettings(newSettings);


Updates the data inside the plugin instance on the fly.

await thumbnailInstance.methods.updateData({ document });


Updates the hooks inside the plugin instance on the fly.

You can read more about the updateHooks method here.

await thumbnailInstance.methods.updateHooks({ hooks, resetHooks });


You can get the current document height from the plugin instance.

const thumbnailFullHeight = await thumbnailInstance.methods.getDocumentHeight();


Destroys the thumbnail instance.

await thumbnailInstance.destroy();

Thumbnail configuration

Property Type Description
data object The initial data of the plugin instance
settings object The initial settings of the plugin instance
hooks object You can define functions that will be called on different events that occur inside the plugin. For more, please check out the thumbnailConfig.hooks section.

The data object has the following properties:

Property Type Description
document object The email document.


The settings object has the following properties:

Property Type Description
scroll boolean To enable vertical scrolling in the thumbnail. Default is false.


Each and every hook should be an asynchronous process, so all of the hook handler functions have to return Promises.

In most cases you just have to resolve the promise when the async operation is done without any params, but in some cases, you will have to resolve certain objects with properties that the plugin can use. Similarly to the parameters, we always expect an object to be resolved, even if it only has one property. (This way it will be easier to add new properties later on if needed.)

If any errors occurred on your side, you can reject the promise with an instance of Error. In this case, the error message will be shown in a snackbar inside the plugin instance.

function handler(params) {
	return new Promise((resolve, reject) => {
		// You can put the logic here.
		// Resolve the promise when everything is okay
		// Reject the promise on error

		if (!error) {
			resolve(dataToResolve) // In some cases, you don't have to resolve any data. You can resolve the promise without a parameter.
		} else {
			reject(new Error("Your error message"))

Note that, with the async syntax, the unexpected errors will be also displayed:

async function handler(params) {
	// Unexpected errors will also cause promise rejections in this case
	// For example, if you get a timeout error, that will also be displayed in a snackbar in the editor.
	// Any exception will be caught by the SDK and the message property of the error object will be shown in a snackbar.
	return dataToResolve;

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

thumbnailConfig.hooks = {


This function is called when the thumbnail preview has finished the rendering process. It will send back the current DOM height.

Params: nothing.

Has to resolve: nothing.
thumbnailConfig.hooks.sendDOMHeight = ({ height }) => {
	return new Promise(resolve => {
		// you can put the logic here that modifies the thumbnail container based on the current height


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

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