# Email configuration helper

While configuring an email editor looks like a demanding task, the email configuration helper plugin is the best way to start and make this experience more manageable.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

Look at the logs below to see the configuration problems.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

The logs displayed below come from DevTools and show problems encountered by the editor during configuration validation. These issues may cause emails to be displayed incorrectly in various email clients.

<a id="email-configuration-devtools">

**JS Console**

This demo presents a limited set of features. Visit the [feature-rich editor example](../../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

After [installing the editor](../../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor } from 'ckeditor5';
import { EmailConfigurationHelper } from 'ckeditor5-premium-features';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ EmailConfigurationHelper, /* ... */ ],
		link: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor } = CKEDITOR;
const { EmailConfigurationHelper } = CKEDITOR_PREMIUM_FEATURES;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ EmailConfigurationHelper, /* ... */ ],
		link: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="activating-the-feature">

### Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../../getting-started/licensing/license-key-and-activation.md) guide for details.

<a id="configuration">

## Configuration

<a id="logs-and-warnings">

### Logs and warnings

The [`EmailConfigurationConfig`](../../api/module_email_emailconfigurationconfig-EmailConfigurationConfig.md) property lets you suppress warnings or log messages about email client compatibility.

```js
ClassicEditor
	.create( {
		email: {
			logs: {
				suppressAll: false,
				suppress: [
					'email-configuration-unsupported-reversed-list',
					'email-configuration-unsupported-list-style-type',
					// ... other message codes
				]
			}
		}
	} )
```

<a id="common-api">

## Common API

The [`EmailConfigurationHelper`](../../api/module_email_emailconfigurationhelper-EmailConfigurationHelper.md) plugin registers the following components:

* The [`EmailConfigurationHelper`](../../api/module_email_emailconfigurationhelper-EmailConfigurationHelper.md) component.
* The [`EmailConfigurationConfig`](../../api/module_email_emailconfigurationconfig-EmailConfigurationConfig.md) property.

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)