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,
		proxyImages: true, // sets if the plugin should use the built in backend for image proxying
    disableDirectLinks: false, // you can disable the direct link clicks and send them via a hook instead
	},
	hooks: {}, // an object of available hooks
};

const thumbnailInstance = await chamaileonPlugins.createInlinePlugin(
	thumbnailConfig,
	{
		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.

thumbnailInstance.methods

These are methods provided by the plugin instance.

thumbnailInstance.methods.updateSettings

Updates the settings inside the plugin instance on the fly.

const newSettings = {
	scroll: false,
}

await thumbnailInstance.methods.updateSettings(newSettings);

thumbnailInstance.methods.updateData

Updates the data inside the plugin instance on the fly.

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

thumbnailInstance.methods.updateHooks

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 });

thumbnailInstance.methods.getDocumentHeight

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

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

thumbnailInstance.destroy

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.

thumbnailConfig.data

The data object has the following properties:

Property	Type	Description
document	object	The email document.

thumbnailConfig.settings

The settings object has the following properties:

Property	Type	Description
scroll	boolean	To enable vertical scrolling in the thumbnail. Default is false.
proxyImages	boolean	To enable the built-in image proxy feature. Default is true.
disableDirectLinks	boolean	You can disable direct links and send the urls via hooks instead.

thumbnailConfig.hooks

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 = {
	sendDOMHeight,
  sendLink,
};

thumbnailConfig.hooks.sendDOMHeight

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
		resolve();
	});
};

thumbnailConfig.hooks.sendLink

This function is called when the user clicks a link and disableDirectLinks is enabled.

/*
Params: nothing.

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

Examples

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.