---
url: https://plugin.stripo.email/editor-configuration/initialization-settings.md
---
# Initialization Settings
The new Stripo editor accepts a series of configuration parameters upon initialization, allowing you to customize the editor to meet your specific needs.
A minimal configuration looks like this:
```js
const stripoConfig = {
metadata: {
emailId: '...'
},
html: '...',
css: '...',
onTokenRefreshRequest: function(callback) {
/*
This function is called whenever the authentication token needs to be refreshed.
You should send a request to your backend to obtain a new token.
Example:
Send a request to your backend (e.g., https://your_domain/stripo/token) to retrieve the new token.
*/
const token = ... // Replace with the logic to obtain the token
callback(token); // Pass the retrieved token to the callback function
}
}
```
You can configure various parameters to customize its behavior and functionality. Below is a list of possible parameters
## Supported Parameters
### metadata
### onTokenRefreshRequest
### html
### css
### entityType
Defines what the editor opens for editing: `email` (default) or `module`. When set to `module`, the editor launches in **Module Editing Mode**, which lets you create or edit a reusable module instead of an email. Available on the **Enterprise** plan only — on any other plan the editor does not initialize and shows a toaster notification. See [Module Editing Mode](/editor-configuration/module-editing-mode).
### moduleId
**Module Editing Mode only.** The ID of an existing module to open for editing. When provided, any passed `html` and `css` are ignored and the module is loaded from the plugin database. If the module is missing, deleted, or does not belong to the current plugin, the editor does not initialize and shows a toaster notification. See [Editing an existing module](/editor-configuration/module-editing-mode#editing-an-existing-module).
### moduleType
Module Editing Mode only. Required when creating a new module (i.e. when `moduleId` is **not** provided). One of `STRIPE`, `STRUCTURE`, `CONTAINER`. If \``moduleId` is also provided, `moduleType` is ignored. If it is missing or invalid in create mode, the editor does not initialize and shows a toaster notification. See [Creating a new module](/editor-configuration/module-editing-mode#creating-a-new-module).
### key
Module Editing Mode only, optional. The storage key of the module folder the new module is saved to (the same **Storage Key ID** configured for module folders in your Plugin settings). If omitted, the first folder the user can write to is used. See [Module Editing Mode](/editor-configuration/module-editing-mode).
### moduleName
Module Editing Mode only, applies when **creating** a new module (ignored if `moduleId` is provided). Initial name of the new module. Maximum 200 characters; longer values are trimmed. Default: `New module`. See [Initial metadata for a new module](/editor-configuration/module-editing-mode#initial-metadata-for-a-new-module).
### moduleDescription
Module Editing Mode only, applies when **creating** a new module (ignored if `moduleId` is provided). Initial description of the new module. Maximum 500 characters; longer values are trimmed. Default: empty. See [Initial metadata for a new module](/editor-configuration/module-editing-mode#initial-metadata-for-a-new-module).
### moduleCategoryId
Module Editing Mode only, applies when **creating** a new module (ignored if `moduleId` is provided). Numeric ID of the category to assign to the new module. If the category does not exist or is unavailable for this plugin, it is silently ignored (no error, no toaster). Default: `Uncategorized`. See [Initial metadata for a new module](/editor-configuration/module-editing-mode#initial-metadata-for-a-new-module).
### moduleTags
Module Editing Mode only, applies when **creating** a new module (ignored if `moduleId` is provided). Array of tag strings applied to the new module. Default: no tags. See [Initial metadata for a new module](/editor-configuration/module-editing-mode#initial-metadata-for-a-new-module).
### name
### utm
### locale
The locale setting for the editor, determining the language and regional
settings.
**Supported locales:**\
`bg` — Bulgarian\
`cs` — Czech\
`de` — German\
`en` — English\
`es` — Spanish\
`fr` — French\
`it` — Italian\
`ja` — Japanese\
`ko` — Korean\
`nl` — Dutch\
`pl` — Polish\
`pt` — Portuguese\
`pt-br` — Portuguese (Brazilian)\
`ro` — Romanian\
`ru` — Russian\
`sl` — Slovenian\
`tr` — Turkish\
`uk` — Ukrainian\
`zh` — Chinese (Traditional)\
`zh-cn` — Chinese (Simplified)
### forceRecreate
### ignoreClickOutsideSelectors
### panelPosition
### notifications
### textEditorAllowedPasteContent
### imageGalleryViewMode
The `imageGalleryViewMode` parameter sets how images are displayed when users open the image selection dialog (Image Gallery). This affects the visual layout and browsing experience:
* `grid` - Traditional grid layout with uniform-sized image tiles arranged in rows
* `masonry` - Pinterest-style masonry layout where images maintain aspect ratio with varied heights
* `list` - Compact list view showing images as rows with thumbnails on the left
**Sample:**
```js
"imageGalleryViewMode": 'masonry'
```
**Behavior:**\
When the editor initializes:
* If `imageGalleryViewMode` is set to one of the allowed values, the image gallery will open in that view mode.
* If the parameter is omitted or set to an invalid value, the gallery defaults to `grid` mode.
* When the user manually switches view modes in the gallery, the editor triggers the `onImageGalleryViewModeChange` event ([see below](#onimagegalleryviewmodechange)).
### uiSettings
The `uiSettings` parameter passes editor UI preferences that your application stores per user and sends back on every initialization. Unlike the values the editor keeps in the browser, these preferences follow the user between devices and browsers.
**Fields:**
* `moduleGalleryViewMode` - view mode of the modules gallery: `grid`, `smallGrid`, or `list`. When passed, it applies to every modules folder and overrides the view mode saved in the browser.
* `defaultViewMode` - view mode the editor opens in: `DESKTOP` or `MOBILE`. Defaults to `DESKTOP`.
**Sample:**
```js
"uiSettings": {
"moduleGalleryViewMode": "list",
"defaultViewMode": "MOBILE"
}
```
**Behavior:**
* Every field is optional. A field that is omitted or has an invalid value falls back to the editor default.
* When the user changes the view mode of the modules gallery in the editor, the `onUiSettingsChange` callback receives the changed field ([see below](/editor-configuration/initialization-settings#onuisettingschange)). Save it and pass it back in `uiSettings` on the next initialization.
* `defaultViewMode` sets the initial state only. The user can switch between Desktop and Mobile in the editor header as usual; every switch, and the initial mode on load, is reported through the `onEditorVisualModeChanged` callback ([see below](/editor-configuration/initialization-settings#oneditorvisualmodechanged)). The `mobileViewButtonSelector` and `desktopViewButtonSelector` parameters keep working independently.
### preserveAltOnImageReplace
When `false` (default), ALT text is cleared when an image is replaced, requiring users to manually enter new ALT text for the replacement image.
**Sample:**
```js
"preserveAltOnImageReplace": true
// User replaces image_1.jpg with image_2.jpg
// ALT text: "Product screenshot" is preserved
```
**Use Cases:**\
When the editor initializes:
* Enable for templates where image descriptions apply across multiple image variations.
* Use for workflows where maintaining consistent ALT text is critical for accessibility.
* Disable for scenarios where different images require different descriptions.
### bankImagesDefaultSearchString
### codeEditor
### codeEditorButtonSelector
### counterRangeEnabled
Controls the drag-to-change behavior of numeric counter controls (paddings, sizes, and other stepper inputs) in the settings panel. When enabled, hovering over a counter input shows a range cursor, and dragging left or right decreases or increases the value — in addition to typing and the +/- steppers.
Type: `Boolean`\
Default: `true`
**Sample**
```js
"counterRangeEnabled": false
```
### mergeTags
### mergeTagsAutocomplete
Enables inline autocomplete for merge tags in the Text block. When the user starts typing the syntax of a configured merge tag directly on the canvas, the editor shows a suggestion list, so the tag can be inserted without opening the merge tags dropdown in the settings panel.
Type: `Boolean`\
Default: `false`
When enabled, typing two or more characters that match the beginning of a configured tag `value` (or a tag `label`, once the typed fragment starts with a tag opening sequence) opens a flat suggestion list. Picking a suggestion replaces the typed fragment with the merge tag; typing the full tag syntax manually keeps working exactly as before — the autocomplete is an optional shortcut, it never intercepts Enter/Tab unless a list item was highlighted with the arrow keys.
Tags with `hidden: true` never appear in the suggestions. If the merge tags UI is overridden by an extension (a custom `UE-MERGETAGS` element), the autocomplete is disabled regardless of this parameter.
**Sample**
```js
"mergeTagsAutocomplete": true
```
See the [Merge Tags Setup](/editor-configuration/initialization-settings#merge-tags-setup) section for the tags configuration.
### socialNetworks
### specialLinks
### hiddenShareItems
An array of share-item keys that should be hidden from the **Share** tab in the link-type selector. Accepts a subset of the supported keys: `facebook`, `x`, `linkedin`, `pinterest`. For a detailed description and usage instructions, refer to the [Share Link Configuration](#share-link-configuration) section.
### hideShareTab
A boolean flag that hides the entire Share tab from the link-type selector in the Link control. When set to `true`, the Share tab and all its contents are removed from the UI. For a detailed description and usage instructions, refer to the [Share Link Configuration](#share-link-configuration) section.
### viewOptions
### templateThemeMode
### editorFonts
### conditionsEnabled
### undoButtonSelector
### redoButtonSelector
### mobileViewButtonSelector
### desktopViewButtonSelector
### versionHistoryButtonSelector
### localePatch
```js
{
"localePatch": {
"en": {
"settingsPanel.accordion.structures": "Available Structures",
"settingsPanel.block.timer": "Clock"
}
}
}
```
Deprecated Format (Deprecated):
```js
{
"localePatch": {
"settingsPanel.accordion.structures": {
"en": "Available Structures"
},
"settingsPanel.block.timer": {
"en": "Clock"
}
}
}
```
::: warning ⚠️ Note:
The previous format is now deprecated but remains functional for backward compatibility. It is recommended to use the new format to ensure future compatibility.
:::
For a list of all editor phrases, refer to the editor phrases JSON file.
### defaultMenuItems
```js
"defaultMenuItems": [
{
"name": "Item 1",
"href": "https://google.com"
},
{
"name": "Item 2",
"href": "https://test.com"
}
]
```
### syncModulesEnabled
```js
"syncModulesEnabled": true
```
### disableAdaptDesign
```js
"disableAdaptDesign": true
```
### responsiveDesignByDefault
Defines the initial state of the “Responsive Design” control for newly created emails. Useful when the emails are sent through systems where responsive markup is not supported and the extra mobile CSS is undesirable.
Type: `Boolean`\
Default: `true`
When set to `false`, a new email is created with the “Responsive Design” control in General settings turned off — the result is the same as when the user turns the control off manually: mobile styles are disabled and excluded from the email code and export.
The parameter is applied once, at email creation. The control itself stays available: the user can turn Responsive Design back on in a specific email, and on reopening, the state is taken from the email — not from this parameter.
Unlike [`disableAdaptDesign`](/editor-configuration/initialization-settings#disableadaptdesign), which force-disables the responsive view, this parameter only sets the starting state and leaves the choice to the user.
**Sample**
```js
"responsiveDesignByDefault": false
```
### disableRemoteCursors
```js
"disableRemoteCursors": true
```
### moveBlockAvailability
```js
"moveBlockAvailability": true
```
### enableNativeSpellChecker
### enableTextEmojis
### enableXSSSecurity
```js
"enableXSSSecurity": true
```
### allowedScriptSourceDomains
```js
"allowedScriptSourceDomains": "https://domain1.com http://domain2.net"
```
### buttonTextDecorationsEnabled
Adds the Underline and Strikethrough options to the Text Style row of the Button block settings, next to the existing Bold and Italic. The options behave the same way as in the Text block.
Type: `Boolean`\
Default: `false`
When the parameter is omitted or set to false, the Button block Text Style row shows only Bold and Italic, as before.
**Sample**
```js
"buttonTextDecorationsEnabled": true
```
### supportOutlookButtonsByDefault
```js
"supportOutlookButtonsByDefault": true
```
### sameFontSizeForOutlook
This feature controls automatic font size optimization for button elements in Outlook.
**Usage:**\
Set the `sameFontSizeForOutlook` parameter to `true` to enable the built-in font size optimization logic for Outlook. The editor automatically calculates appropriate font sizes based on button dimensions and spacing. If you prefer to disable this optimization and use standard font sizing instead, set the parameter to `false`.
**Sample:**
```js
"sameFontSizeForOutlook": true
```
**How It Works:**\
The editor includes a built-in optimization algorithm that adjusts button font sizes while considering:
* Button height and overall dimensions
* Font size settings
* Padding and internal spacing
This logic ensures that button text renders correctly in Outlook without overflow or unwanted wrapping. If this automatic optimization doesn't match your design preferences or causes unexpected font sizing, you can disable it by setting the parameter to false to use standard, unmodified font sizes.
**Details:**\
When enabled, the optimization improves visual consistency between Outlook and modern email clients. When disabled, buttons use the exact font sizes specified without any Outlook-specific adjustments. Test both settings with your specific button designs across different Outlook versions (Outlook 2016, 2019, Outlook Online, Outlook for Mac) to determine which approach works best for your templates.
### shouldBeSavedToLibrary
```js
{
...
"shouldBeSavedToLibrary": function() {
return false;
},
...
}
```
```js
{
...
shouldBeSavedToLibrary: function(moduleHtml) {
// Your logic to determine if the module can be saved
return true; // or false
},
...
}
```
### validateModuleSave
```js
"validateModuleSave": function(data) {
// Your validation logic here
return { allowed: true };
}
```
### validateModuleDelete
```js
"validateModuleDelete": function(data) {
// Your validation logic here
return { ok: true };
}
```
### shouldHideImagePath
```js
shouldHideImagePath: function (url) {
// hide images already hosted on Stripo CDN
return url.includes('stripocdn.email') || url.includes('assets.mycompany.com');
}
```
```js
"shouldHideImagePath": (url) => url.startsWith("https://assets.mycompany.com/")
```
### disableImageUnadapt
```js
"disableImageUnadapt": true
```
### youtubeApiKey
```js
"youtubeApiKey": "YOUR_YOUTUBE_API_KEY_HERE"
```
::: warning ⚠️ **Deprecated since Plugin 2.82.0.**:
This parameter is no longer used. Video metadata and preview generation are now handled entirely on the Stripo backend, so the editor no longer sends requests to the YouTube API directly. You can keep passing `youtubeApiKey` for backward compatibility — the editor simply ignores it — but new integrations don't need to pass it.
:::
### keepModuleStylesEnabled
```js
"keepModuleStylesEnabled": true
```
In this configuration, the Keep Module Styles control becomes available in the module saving panel, allowing users to inline appearance styles into the module HTML when saving the module.
### keepModuleStylesByDefault
This parameter sets the initial state of the Keep Module Styles toggle in the module saving panel. By default, the toggle is off when the panel opens, and users turn it on for each module they want to save with inlined styles. When `keepModuleStylesByDefault` is set to `true`, the toggle is on by default for every new module. Users can still turn it off before saving; the module is saved with the toggle state at the moment of saving. Usage: Include the `keepModuleStylesByDefault` parameter during the initialization of the plugin together with `keepModuleStylesEnabled: true`. The parameter works only when the Keep Module Styles control is enabled; if the control is hidden, the parameter is ignored. When a user updates an existing module, the toggle shows the state that was saved in that module, not the value of this parameter.
Default: `false`
**Sample**:
```js
"keepModuleStylesEnabled": true,
"keepModuleStylesByDefault": true
```
In this configuration, the Keep Module Styles toggle is available in the module saving panel and is turned on by default for every new module.
### modulesDisabled
```js
"modulesDisabled": true
```
If this parameter is not specified, users will have the default ability to manage modules. Note that this parameter will be ignored if you deactivate Modules within the plugin configuration page. Disabling module management can be useful for maintaining control over the modules and ensuring a consistent user experience.
### showModuleUid
The `showModuleUid` parameter controls whether the module's unique identifier (uid) is displayed in the editor interface.
By default, this field is hidden because it is primarily intended for advanced scenarios such as internal workflows, integrations, or companion applications that require access to the module identifier.
When enabled, the module uid becomes visible in the module management interface, allowing users to view and reference it when saving, editing, or browsing modules in the library.
**Usage:**\
Include the `showModuleUid` parameter during plugin initialization. Set the value to `true` if you want to display the module UID in the module save form, edit form, and module list tooltip.
**Sample:**
```js
"showModuleUid": true
```
If this parameter is not specified or set to `false`, the module UID field will remain hidden.
When `showModuleUid` is enabled:
* the **Id (uid)** field is displayed in the **module save form**;
* the **Id (uid)** field is displayed in the **module edit form**;
* the **Id (uid)** is shown in the **tooltip/module information** inside the Modules Library.
### selectBlockAfterDropFromSettingsPanel
```js
"selectBlockAfterDropFromSettingsPanel": true
```
### selectElementAfterDrop
This feature allows any element dropped into the editor — whether it is a **block**, **extension**, **stripe**, **structure**, or **module** — to be automatically selected right after being placed in the editor.
Usage:
Set the selectElementAfterDrop parameter to true during the initialization of the Stripo editor to enable this functionality.
Sample:
```js
"selectElementAfterDrop": true
```
With this parameter enabled, as soon as the user drags and drops any element into the email layout, that element becomes instantly selected in the editor for immediate customization.
This improves workflow consistency by eliminating the need to manually click the dropped element before editing it — useful for all element types, including blocks, structures, stripes, modules, and extensions.
### modulesExcludedCategories
```js
"modulesExcludedCategories": [1, 2]
```
### messageSettingsEnabled
```js
"messageSettingsEnabled": true
```
### calendarDateTimeFormat
Defines the date and time display format for the Timer block in the editor.\
By default, Stripo uses the `MM DD YYYY` format (month–day–year).\
With this parameter, you can override the default and choose how the date should be displayed in the Timer.
**Supported Date Formats**\
The Timer block fully supports the following formats:
| Format | Example | Description |
| ------------------ | ----------------------- | ----------------------------- |
| `DD.MM.YYYY` | `25.12.2024` | Day.Month.Year |
| `DD/MM/YYYY` | `25/12/2024` | Day/Month/Year |
| `MM/DD/YYYY` | `12/25/2024` | US format |
| `YYYY-MM-DD` | `2024-12-25` | ISO format |
| `D MMMM YYYY` | `25 December 2024` | Day + full month name + year |
| `DD MMM YYYY` | `25 Dec 2024` | Day + short month name + year |
| `dddd, DD.MM.YYYY` | `Wednesday, 25.12.2024` | Weekday + date |
| `DD.MM.YY` | `25.12.24` | Short year |
*💡 Month and weekday names are displayed according to the editor’s selected locale.*
**Usage:**
```js
"calendarDateTimeFormat": "DD.MM.YYYY"
```
**Example:**
```js
{
...
"calendarDateTimeFormat": "MM/DD/YYYY",
...
}
```
This configuration will render a date such as **12/31/2025** in the Timer block.
**Notes**
* Only the formats listed above are supported.
* The formatting patterns follow a predefined internal rule set and do not use moment.js or similar libraries.
* If an unsupported format is passed, the editor will fall back to the default `DD MM YYYY`.
### displayTitle
```js
"displayTitle": false
```
### displayHiddenPreheader
```js
"displayHiddenPreheader": false
```
### displayUTM
```js
"displayUTM": false
```
### displayGmailAnnotations
```js
"displayGmailAnnotations": false
```
### previewIframeAttributes
```js
previewIframeAttributes: {
foo: "bar",
withoutValue: ""
}
```
### customViewStyles
```js
// turn custom styles ON
window.StripoEditorApi.actionsApi.activateCustomViewStyles(true);
// turn custom styles OFF
window.StripoEditorApi.actionsApi.activateCustomViewStyles(false);
```
Usage:
Add the parameter to your initEditor call and pass CSS as plain text.
```js
"customViewStyles": ".esd-block-button { border: 2px solid red; }";
```
Sample:
```js
"customViewStyles": "\n .esd-block-button {\n border-radius: 8px;\n padding: 12px 24px;\n background: linear-gradient(45deg,#ff8a00,#e52e71);\n color:#fff;\n }\n .esd-text h1 {\n font-family: 'Roboto Condensed', sans-serif;\n letter-spacing: 1px;\n }\n"
```
### brandColorPalette
```js
"brandColorPalette": [
{
"name": "Primary Brand Color",
"value": "#FF5733"
},
{
"value": "#33C1FF"
},
{
"name": "Accent",
"value": "rgba(50, 205, 50, 0.8)"
}
]
```
The heading of this section in the color picker can be customized with the `brandColorPaletteLabel` parameter. Each time a user applies a brand color, the editor emits a `color_palette_used` event through the `onEvent` callback, so your application can track brand palette usage.
### brandColorPaletteLabel
Custom heading for the brand colors section of the color picker.
Type: `String`\
Default: `"Brand Palette"`
**Sample:**
```js
"brandColorPaletteLabel": "Acme Corp Colors"
```
### colorPalette
Pre-populates the My Palette section of the color picker — the personal set of colors the user collects while
working in the editor.
If the parameter is not provided, the palette is restored from the user's browser storage. Users add the currently
selected color to this section with the “+” button; the palette holds up to 13 colors (newest first) and is
persisted in the browser between sessions.
Type: `Array` of CSS color values
**Sample:**
```js
"colorPalette": ["#FF5733", "#33C1FF", "rgba(50, 205, 50, 0.8)"]
```
### customColorPalette
Replaces the built-in Default Palette colors with your own fixed set. When this parameter is provided, the free-form
color picker (spectrum canvas) and the My Palette section are hidden, so users can only choose from the colors you
define — plus the transparent swatch and the brand palette, if configured. Use it when the color choice in the
editor must be limited to an approved set.
Note: the colors are displayed inside the Default Palette section, so this parameter takes effect only while
`defaultPaletteEnabled` is not set to `false`.
Type: `Array` of CSS color values
**Sample:**
```js
"customColorPalette": ["#000000", "#FFFFFF", "#FF5733", "#33C1FF"]
```
### defaultPaletteEnabled
Shows or hides the **Default Palette** section of the color picker — the built-in set of standard colors together
with the transparent swatch (or your own set, if `customColorPalette` is configured).
Type: `Boolean`\
Default: `true`
**Sample:**
```js
"defaultPaletteEnabled": false
```
### customColorsEnabled
Shows or hides the free-form color selection tools of the color picker: the spectrum canvas and the **My Palette** section with user-saved colors.
When set to `false`, users cannot pick arbitrary colors — only the colors available in the default, custom, or brand palettes.
If `defaultPaletteEnabled` and `customColorsEnabled` are both `false` and no `brandColorPalette` is configured, the color picker popup is disabled entirely; users can still type a color value manually into the input field.
Type: `Boolean`\
Default: `true`
**Sample:**
```js
"customColorsEnabled": false
```
### baseBlocks
```js
"baseBlocks": {
"ampAccordionEnabled": false,
"ampCarouselEnabled": true,
"ampFormControlsEnabled": false,
"bannerEnabled": false,
"buttonEnabled": true,
"htmlEnabled": true,
"imageEnabled": true,
"menuEnabled": true,
"socialNetEnabled": true,
"spacerEnabled": true,
"textEnabled": true,
"timerEnabled": true,
"videoEnabled": true
}
```
### ampFormServices
Defines a list of predefined backend endpoints available for AMP Form blocks in the editor. Each entry includes a `label` (user-friendly name) and a `value` (submission URL). These endpoints appear in the AMP Form block settings as selectable options for form submission. For a detailed description and configuration examples, refer to the [AMP Form Services section](/editor-configuration/initialization-settings#amp-form-services).
### showExternalAmpFormServices
Controls whether users can manually add their own external AMP Form endpoints. When set to `false`, the “Add external service” option is hidden, and users can only select endpoints from the predefined `ampFormServices` list. For a detailed description, refer to the [AMP Form Services section](/editor-configuration/initialization-settings#amp-form-services).
### copyPasteEnabled
Enables copying and pasting of email elements (stripes, structures, containers, and blocks) between tabs and windows of the editor through the system clipboard.
Type: `Boolean`\
Default: `false`
When set to `false`:
* Cmd/Ctrl+C on a selected element does not place the element into the clipboard, and Cmd/Ctrl+V does not paste one;
* the “You have copied an element…” notification with the Paste action is not shown — including when the element was copied in another tab;
* the “Copy to Clipboard” hint on the element handle is hidden.
Everything else stays unaffected: selecting and natively copying text inside text blocks works as usual, and the Duplicate action on the element handle remains available.
**Sample**: `"copyPasteEnabled": false`
### gradients
Granular control over the gradient options in the editor's color settings. Lets you hide the “Apply gradient” switcher and gradient controls — everywhere at once or per element type — when your sending environment does not support CSS gradients.
**Type**: Object (all fields are Boolean and default to `true`)
```js
"gradients": {
"enabled": true, // master switch for all gradient controls
"buttonEnabled": true, // General Styles > Button (incl. hover), inline button color/hover, button block background
"textEnabled": true, // text block background
"containerEnabled": true, // container background
"structureEnabled": true, // structure background
"stripeEnabled": true, // inline stripe backgrounds and General Styles > Stripes
"messageBackgroundEnabled": true, // General Settings > message background
"spacerEnabled": true, // spacer block background
"socialEnabled": true // social block background
}
```
Disabling an element type hides the gradient controls in all locations of that type at once (for example, `buttonEnabled: false` removes the gradient option from General Styles > Button, from inline button settings including hover styles, and from the button block background), together with their dark-mode counterparts. The regular solid color picker keeps working.
`enabled: false` takes priority over the individual flags and hides gradient controls everywhere.
Gradients that already exist in the template content are not removed from the HTML and keep rendering as they are — only the controls are hidden.
**Sample:**
```js
"gradients": {
"buttonEnabled": false
}
```
### imageResizeOnCanvasEnabled
Controls the availability of the on-canvas resize handle for image blocks. With this feature, users can drag the handle that appears in an image's bottom-right corner directly on the canvas to resize it, with a live width/height tooltip and a maximum clamped to the available column width — without opening the settings panel. The handle is available only in Desktop preview mode.
Type: `Boolean`\
Default: `true`
When set to `false`, the resize handle is not shown on the canvas. Images can still be resized through the **Size** control in the settings panel — this flag only turns off the canvas drag gesture, not image resizing itself.
**Sample**: `"imageResizeOnCanvasEnabled": false`
### containerResizeOnCanvasEnabled
Controls resizing of containers by dragging the borders between them directly on the canvas.
Type: `Boolean`\
Default: `true`
When set to `false`, the resize handles between the containers of a structure do not appear on hover and dragging the borders is unavailable. Managing container widths from the settings panel stays available and is not affected by this option.
**Sample**: `"containerResizeOnCanvasEnabled": false`
### structurePerRowEnabled
Controls the availability of the Containers per Row control — a sub-control of “Responsive structure” in the mobile mode of the structure settings that keeps two to four containers side by side on mobile devices instead of stacking them one under another. Useful for product grids, catalogs, and news digests that should look the same on mobile as on desktop.
Type: `Boolean`\
Default: `true`
While the parameter is enabled, users see the Containers per Row counter once “Responsive structure” is turned on. The default value 1 keeps the standard behavior (each container takes the full row); values from 2 to 4 keep the corresponding number of containers in one row — the maximum cannot exceed the number of containers in the structure at the moment of setting. The setting applies to the whole structure, including containers added later; containers keep their configured widths; a single container left in the last row takes the full row width; turning “Responsive structure” off restores the regular markup while preserving the counter value.
When set to `false`, the Containers per Row control is not shown, and structures keep the standard mobile behavior — one container per row. Use it when your integration relies on a fixed mobile layout of structures (for example, in custom extension blocks).
Sample:
```js
"structurePerRowEnabled": false
```
### dataFeed
Controls the availability of the **Data Feed** option in the Data tab of Smart Elements — the ability to fill a smart element from a structured data source instead of a website page.
Type: `Object`\
Default: `hidden` — the Data Feed option appears only when explicitly enabled
```js
"dataFeed": {
"enabled": true,
"allowExternalSourceUrl": false
},
"dataSources": [
{ "id": "products", "name": "Products", "type": "JSON", "sourceUrl": "https://api.acme.test/products.json" }
]
```
* If the `dataFeed` section is not passed at all, or `enabled` is `false`, users see only the “Website Page” option — no “Data Feed”.
* enabled: `true` with a non-empty `dataSources` shows the Data Feed option with your sources listed in the Data Source dropdown; when `allowExternalSourceUrl: true`, the “External Source URL” option is added to the list.
* `allowExternalSourceUrl: false` hides the “External Source URL” option, so users can pick only from the sources you passed.
* A configuration with no available source is treated as disabled: `enabled: true` with an empty `dataSources` and `allowExternalSourceUrl: false` hides the Data Feed option entirely.
Sample (external URLs only):
```js
"dataFeed": {
"enabled": true,
"allowExternalSourceUrl": true
}
```
### calendarEventLinkEnabled
Controls the availability of the **Calendar Event Link** type in the Link control. With this link type, users describe an event (title, time, time zone, location, description, recurrence) right in the editor and get a generated add-to-calendar link they can attach to any clickable element. The link can be switched between seven calendar types — Stripo landing page, Google, Outlook, Yahoo, AOL, Apple, and a downloadable .ics file — and generated events are reusable across the elements of the same email via the Events tab of the link type dropdown.
Type: `Boolean`\
Default: `true`
When set to `false`, the Calendar Event Link option is not offered in the link type dropdown. Links already generated with this feature are plain href elements in the email HTML, so existing emails keep working regardless of this option.
**Sample**: `"calendarEventLinkEnabled": false`
### dragImageFromGalleryEnabled
Controls the availability of the drag-to-document gesture in the settings-panel image gallery. With this feature, users can drag an image thumbnail out of the gallery and drop it directly onto the canvas — onto an existing image block to fill/replace it, or next to a block to insert a new image block at that position. It applies only to galleries whose target is the document itself (the main image picker); auxiliary galleries (rollover image, timer expiration image, menu/social icons, dark-mode variant, etc.) never offer drag-to-document, regardless of this flag.
Type: `Boolean`\
Default: `true`
When set to `false`, gallery thumbnails are no longer draggable onto the canvas. Users can still pick an image by clicking a thumbnail in the gallery — this flag only turns off the drag-and-drop path, not image selection itself.
### playInEmailEnabled
Controls the availability of the **Play in email** mode of the Video block. In this mode, the editor embeds a playable video into the email: an AMP-powered player for supported clients, with an automatically generated GIF and poster fallback for all other email clients.
Type: `Boolean`\
Default: `false`
The mode is disabled by default. To make it available to your users, pass `playInEmailEnabled: true` during the editor initialization — the **Play in email** tab then appears in the Video block settings.
**Plan availability:** the parameter takes effect on the Business and Enterprise Plugin plans. On lower plans, `playInEmailEnabled: true` is ignored and the mode stays disabled.
Disabling the mode affects only creating and changing videos: video blocks that already exist in the template keep rendering and are exported with their assets as usual, while the upload and regeneration controls are disabled with an explanatory hint.
**Sample**: `"playInEmailEnabled": true`
### elementLockEnabled
Enables the [Lock Element](/editor-configuration/lock-element) feature in your integration — the ability to lock stripes, structures, and containers against content or style changes.
Type: `Boolean`\
Default: `false`
The feature is disabled by default. When set to `true`, the Lock Element control becomes available to users who have the `elementsLock.write` permission — the parameter enables the feature but does not replace the permission check.
When the parameter is omitted or set to `false`, only the lock management control is hidden: elements that are already locked in the template remain protected according to their lock settings.
### historySaveAsNew
The `historySaveAsNew` function enables the Restore as new action in the Version History menu, which creates a new email from a selected version without modifying the current one. The editor passes the selected version's `patchID` to your application; creating the new email and copying the version is performed by your backend through the [Email Model Clone API](/reference/cloning-an-email-model#description/introduction).
**Function Signature**
```js
historySaveAsNew: function({ patchID }, callback) {
// patchID: string -- UUID of the version selected by the user
// callback: (error: string | null) => void -- call with null on success or an error message on failure
}
```
The action appears in the Version History menu only when this callback is provided, the user has the `versionHistory.write` permission, and the editor is online. The editor itself does not create a new email, modify the current model, or switch the user to another email.
For the full flow — backend copy request, retrieving the new email's HTML/CSS, and opening the new email — see [Restore a Version as a New Email](/plugin-invocations/javascript-api#restore-a-version-as-a-new-email).
### onUpdateDisplayConditionsForViewOptions
```js
onUpdateDisplayConditionsForViewOptions: function(displayConditions) {
// displayConditions is an array of:
// { id: 'audience-new', name: 'New Customers', visibility: true }
// Optionally update your View Options UI or save state externally
}
```
### onViewOptionsReset
```js
onViewOptionsReset: function(entity, entityId) {
// Optionally reset your interface to the default state
}
```
### onSettingsPanelBlockSorting
```js
onSettingsPanelBlockSorting: function(names) {
return names.sort();
}
```
### onPreheaderChanged
```js
onPreheaderChanged: function(preheader) {
// Custom logic to execute when the email preheader changes
}
```
### onRtlSet
```js
onRtlSet: function(value) {
console.log('rtl set', value);
}
```
### onTemplateLoaded
```js
onTemplateLoaded: function() {
// Custom logic to execute after the email is fully rendered
}
```
### onTitleChanged
```js
onTitleChanged: function(title) {
// Custom logic to execute when the email title changes
}
```
### onCodeEditorVisibilityChanged
```js
onCodeEditorVisibilityChanged: function(isOpen) {
// ...
}
```
### onConnectCustomFont
When provided, the **`onConnectCustomFont`** callback activates a **"Connect another font"** option in the font family dropdown. When the user clicks this option, the editor invokes the callback so your application can open a custom UI to collect font details and register the new font.
**Parameters:**
* `onSave` — a callback provided by the editor.
Call it with font data once the user confirms. Accepts an object with the following fields:
* `name` - display name shown in the selector,
* `value` - CSS `font-family` declaration,
* `link` (optional) - URL to the font stylesheet,
* `importMethod` (optional) - `'link'` | `'import'` | `'fontFace'` | `'local'`.
**Usage:**\
Define the **`onConnectCustomFont`** function during the initialization of the Stripo editor. When the user clicks "Connect another font", the editor invokes this function. Open your own modal or font selection UI, collect the font details, and call `onSave` to register the font.
**Sample:**
```js
onConnectCustomFont: function(onSave) {
// Open your font selection UI, then call onSave with font data
onSave({
name: 'Roboto',
value: "Roboto, sans-serif",
link: 'https://fonts.googleapis.com/css2?family=Roboto',
importMethod: 'link'
});
}
```
This callback ensures that your application can provide users with a seamless font connection experience directly from the font selector. If this parameter is not provided, the "Connect another font" option does not appear in the dropdown (unless activated via the `external-custom-font` extension in plugin mode). See [User-Added Fonts in Editor](/editor-configuration/initialization-settings#user-added-fonts-in-editor).
### onSettingsPanelPositionChanged
```js
onSettingsPanelPositionChanged: function(position) {
// Custom logic to execute when the settings panel position changes
}
```
### onVersionHistoryVisibilityChanged
```js
onVersionHistoryVisibilityChanged: function(isOpen) {
// Custom logic to execute when version history visibility changes
}
```
### onVersionHistoryReadAccessChanged
```js
onVersionHistoryReadAccessChanged: function(enabled) {
// Custom logic to execute when version history read access changes
}
```
### onSaveStarted
```js
onSaveStarted: function() {
// Custom logic to execute when the save procedure starts
}
```
### onSaveCompleted
```js
onSaveCompleted: function() {
// Custom logic to execute when the save procedure is completed
}
```
### onEditorVisualModeChanged
```js
onEditorVisualModeChanged: function(visualMode) {
// Custom logic to execute when the visual mode changes
}
```
### onUsersInfoRequest
```js
onUsersInfoRequest: function (userIds, successCallback, errorCallback) {
fetch(`/api/users/info`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ids: userIds })
}).then(res => res.json())
.then(data => successCallback(data.users))
.catch(err => errorCallback(err));
}
```
### onUsersInfoSearchRequest
```js
onUsersInfoSearchRequest: function (params, successCallback, errorCallback) {
fetch(`/api/users/search?query=${encodeURIComponent(params.filter || '')}`)
.then(res => res.json())
.then(data => successCallback(data))
.catch(err => errorCallback(err));
}
```
### onCommentModeChange
The `onCommentModeChange` function is called every time the editor's comment mode is turned on or off. Use it to keep your application's UI in sync with the editor — for example, to highlight your own "Comments" button in the host application header while the comment mode is active.
**Function Signature:**
```js
onCommentModeChange: function(isActive) {
// isActive: boolean -- true when comment mode is turned on, false when it is turned off
}
```
**Usage:**\
Define the optional `onCommentModeChange` function during the initialization of the Stripo editor (the [Commenting](/editor-configuration/commenting) feature must be enabled). The callback fires on every state change, regardless of how it was triggered — a click on the comments control or the keyboard shortcut (holding Ctrl on Windows / Cmd on Mac while in comment mode).
**Sample:**
```js
onCommentModeChange: (isActive) => {
myApp.header.setCommentsButtonActive(isActive);
}
```
### onUserListChange
```js
onUserListChange: function(usersList) {
// Custom logic to execute when the user list changes
}
```
### onEvent
```js
onEvent: function(type, params) {
// Handle different event types
}
```
### onEditorClicked
The `onEditorClicked` function is called at the beginning of any pointer interaction (`pointerdown`) inside the email preview area. Because the editor renders the email preview in a separate document, clicks inside it are not visible to the outside-click handlers of the host application.
This callback lets your application react to such clicks — for example, to close its own popovers, dropdown menus, or overlays when the user starts interacting with the email.
**Function Signature:**
```js
onEditorClicked: function() {
// called without any payload
}
```
**Usage:**\
Define the optional `onEditorClicked` function during the initialization of the Stripo editor. The editor invokes it on every `pointerdown` inside the email preview. The first click both triggers the callback and performs the regular editor action (for example, selecting a block), so the user does not have to click twice.
**Sample:**
```js
onEditorClicked: () => {
// Close all overlay menus of the host application
myApp.overlayManager.closeAllOverlays();
}
```
### onDataChanged
```js
onDataChanged: function() {
console.log('Data changed');
// Additional logic to handle unsaved changes
}
```
### onElementCopy
```js
onElementCopy: function(modifier) {
// Get the target element being copied
const targetElement = modifier.getTargetNode();
// Find all blocks (elements with class starting with 'esd-block')
const blocks = targetElement.querySelectorAll('[class*="esd-block"]');
// Set a custom attribute on each block to mark it as a copy
blocks.forEach(function(block) {
modifier.modifyHtml(block).setAttribute('data-copy-marker', 'copied');
});
}
```
### onElementMove
The `onElementMove` function is called whenever a block, container, structure, or stripe is moved within the email template — via drag-and-drop or via keyboard shortcuts.
**Parameters:**
* `modifier` — A TemplateModifier object. The root node of the moved element is pre-set as the target. Use it to read and modify the moved element's HTML. For more information, refer to the [Template Modification System](https://plugin.stripo.email/extensions/template-modification).
* `sourceElement` (optional) — A read-only `ImmutableHtmlElement` representing the parent element from which the node was moved (its container, structure, or stripe before the move). Use it to inspect the origin of the move.\
Resolving the source module:
```js
const sourceModule = sourceElement?.getClosestModuleElement();
const sourceModuleId = sourceElement?.getClosestModuleId();
```
This parameter is undefined if the original parent could not be resolved (for example, if it was removed as part of the move flow).
**Note:** You do not need to call `apply()` explicitly. It is called automatically after your function returns, and your changes are merged with the move patch as a single undo/redo entry.
**Difference from `onElementCopy`:**
`onElementCopy` is triggered when an element is duplicated (a new node is inserted).\
`onElementMove` is triggered when an existing element changes position within the document tree — no new node is created. Use `onElementMove` when you need to react to repositioning, such as updating link-tracking IDs that depend on a module context.
**Sample:**
```js
onElementMove: function(modifier, sourceElement) {
// Determine which module the element was moved FROM
const sourceModuleId = sourceElement?.getClosestModuleId();
// Determine which module the element was moved INTO
const targetModuleId = modifier.getTargetNode().getClosestModuleElement() ?.getAttribute('data-module-id');
// If the element crossed a module boundary, regenerate its tracking ID
if (sourceModuleId !== targetModuleId) {
modifier.setAttribute('data-tracking-id', crypto.randomUUID());
}
}
```
### onModuleAdd
```js
onModuleAdd: function(action, modifier) {
// Get the module being added or copied
const targetElement = modifier.getTargetNode();
// Generate new EVENT ID based on the action type
const eventId = action === 'COPY'
? targetElement.getAttribute('event-id') + '_copied'
: crypto.randomUUID();
// Set attribute to root module node
modifier.setAttribute('event-id', eventId);
}
```
### onModuleDetach
The `onModuleDetach` function is called when a user triggers the **"Unlink and Apply Changes Locally"** action for a synced module in the email template. It is the symmetric counterpart to [`onModuleAdd`](#onmoduleadd) and follows the same contract for the `modifier` parameter.
Without `onModuleDetach`, plugins that react to unlinking via the `module_detached` event and apply changes through a `templateModifier` produce two separate entries in the undo/redo stack — one for the unlink itself and one for the plugin's modifications.
This means the user must press Undo twice to fully revert the operation. `onModuleDetach` solves this by merging both the unlink action and your plugin-side modifications into a **single atomic undo/redo entry**. One Ctrl/Cmd+Z press reverts everything at once.
**Parameters:**
* **`modifier`** — A `TemplateModifier` object that provides methods to modify the unlinked module's HTML. The module's root node is set as the target node. The contract is identical to the `modifier` in `onModuleAdd`. For more information, refer to the [Template Modification System](/extensions/template-modification).
**Usage:**\
Define the `onModuleDetach` function during the initialization of the Stripo editor. Use it to perform any custom HTML transformations needed at the moment of unlinking — such as injecting link-tracking attributes, stripping internal `data-` attributes, or updating references. You do not need to call `apply()` at the end; it is called automatically, and your changes are merged with the unlink patch as one atomic operation.
**Backward compatibility:**\
If `onModuleDetach` is not defined, the existing `module_detached` event continues to fire as before, and any modifications applied via `templateModifier` in that event handler will create a separate undo-stack entry (requiring two Undo presses to fully revert).
**Sample:**
```js
onModuleDetach: function(modifier) {
// Get the root node of the module being unlinked
const targetElement = modifier.getTargetNode();
// Remove internal tracking attribute before unlinking
modifier.removeAttribute('data-module-sync-id');
// Add a custom marker to identify locally-applied modules
modifier.setAttribute('data-local-module', 'true');
}
```
### onBeforeModuleSave
```js
onBeforeModuleSave: function (data) {
const copilotApi = window.StripoEditorApi.editorCopilotApi;
const modifier = copilotApi.getTemplateModifier();
modifier
.modifyHtml(data.moduleNode)
.setAttribute('data-saved-at', new Date().toISOString())
.apply({
key: 'Set module save timestamp',
params: {},
getValue() {
return { key: this.key, params: this.params };
}
});
return { canSave: true };
}
```
### onImageSelected
The `onImageSelected` function is called whenever an image is inserted into the editor — from any image gallery tab (General, Custom/External) **or via upload from the local machine**. It fires for **every block that contains an** `` **tag (Image, Button, Menu, Video, Banner)**. This initialization parameter allows developers to programmatically add custom `data-*` attributes (or any other attributes/classes/styles) to the inserted `` immediately after selection.
**Function Signature**
```js
onImageSelected: function(params, modifier, selectedImgNode) {
// params: Image metadata object
// modifier: HtmlNodeModifier already targeting the inserted
// selectedImgNode: Immutable, read-only wrapper of the inserted
}
```
**Parameters:**
* `params` **–** image metadata (only `url` is guaranteed; other fields are optional):
```js
{
url: "https://example.com/image.jpeg", // freshly inserted URL (always present)
originalName: "photo.jpeg", // original filename
width: 640, // image dimensions in pixels
height: 427,
sizeBytes: 61656, // file size in bytes
aiGenerated: true, // present when the image was created with the built-in AI image generator
altText: "", // existing ALT text from the gallery item
thumbnailUrl: "https://example.com/thumb.jpeg", // thumbnail URL for preview
labels: { // custom labels / metadata
category: "Summer Campaign",
userId: "user123"
}
}
```
* `Modifier` – `HtmlNodeModifier` already targeting the inserted `` node. Use it to mutate the node: `setAttribute`, `removeAttribute`, `setClass`, `setStyle`, etc., refer to the [HTML Node Modification Section](/extensions/reference/modification/HtmlNodeModifier#htmlnodemodifier).
* `selectedImgNode` – immutable, read-only wrapper of the `` node (`getAttribute`, `hasClass`, `getStyle`, `getTagName`, `querySelector` …).
**IMPORTANT:** it reflects the CRDT state **before** the new `src` is committed — `selectedImgNode.getAttribute('src')` returns the *previous* URL. Use `params.url` to read the freshly inserted value.
The `aiGenerated` flag lets your platform distinguish AI-generated visuals from regular images — for example, to apply a visible AI-content disclosure in your own UI, as required for realistic AI-generated images of people by the EU AI Act (Article 50). The flag accompanies the image both when it is uploaded to the image storage and when it is selected from the gallery.
**Use Cases:**\
Define the `onImageSelected` function during the initialization of the Stripo editor. This function will be automatically triggered every time a user selects and inserts an image from any gallery tab into any image-containing block: Image, Button, Menu, Video, Banner, etc.
The callback allows you to execute custom logic to enrich image elements with additional metadata before they are permanently added to the template.
**Sample:**
```js
onImageSelected: (params, modifier, selectedImgNode) => {
if (params.labels?.category === 'summer-campaign') {
modifier
.setAttribute('data-campaign', params.labels.category)
.setAttribute('data-recipient', window.externalService.getRecipient());
}
}
```
### onImageGalleryViewModeChange
The `onImageGalleryViewModeChange` function is called when a user changes the view mode of the image gallery during the editing session. This function helps to notify your application about changes in the gallery display mode, allowing you to manage user preferences and adjust the interface accordingly in real-time.
**Parameters:**
* **mode** — string — The new view mode selected by the user. Possible values are `grid`, `masonry`, or `list`.
**Usage:**\
Define the `onImageGalleryViewModeChange` function during the initialization of the Stripo editor. This callback is invoked whenever the user switches between different image gallery view modes, allowing your external front-account system to receive and process these changes.
**Sample:**
```js
onImageGalleryViewModeChange: function(mode) {
// Notify your application about gallery view mode change
console.log('Gallery view mode changed to:', mode);
// Send to your backend or state management
updateUserPreference('galleryViewMode', mode);
}
```
This callback ensures that your application stays synchronized with user interactions in the image gallery, enabling you to persist user preferences, update UI controls, or log analytics data whenever the gallery view mode is changed.
### onUiSettingsChange
The `onUiSettingsChange` function is called when a user changes an editor UI preference during the editing session, for example, switches the view mode of the modules gallery. It receives only the fields that changed, so your application can save them and pass the full set back in the `uiSettings` parameter on the next initialization.
**Parameters:**
* `changes` — object — Only the fields of `uiSettings` that changed. Currently, the editor reports `moduleGalleryViewMode` (`grid`, `smallGrid`, or `list`). Switching between Desktop and Mobile view is not reported here; use `onEditorVisualModeChanged` for that.
**Sample:**\
Define the `onUiSettingsChange` function during the initialization of the Stripo editor.
```js
onUiSettingsChange: function(changes) {
// changes example: { moduleGalleryViewMode: 'list' }
saveUserPreferences(changes);
}
```
## Metadata Information
The `metadata` parameter is mandatory because it is used to identify the email. Additionally, you can specify the username and avatar, which will be used in the version history and during simultaneous editing. You can pass any information needed by the editor, and all these data will be sent to your server in the information provided to the permission checker API.
This is also the right place to define the values for any variables needed during initialization. For example, if a customer configures the folder path for [images](image-gallery) or [modules](modules-library) and needs to operate with specific variables, the editor needs to know the values for those variables. This can be accomplished by including them in the `metadata` parameter.
| Parameter | Description | Required |
| ------------ | ----------------------------------------------------------------------------------- | -------- |
| `emailId` | Email identifier | Yes |
| `username` | Username. Used for version history and simultaneous editing | No |
| `email` | User email | No |
| `avatarUrl` | URL to the user's avatar image. Used for visualization during simultaneous editing. | No |
| `customVar1` | Custom variable 1 | No |
| `customVar2` | Custom variable 2 | No |
Example:
```js
{
...,
"metadata": {
"emailId": "123",
"username": "John Smith",
"email": "john.smith@stripo.email",
"avatarUrl": "https://yourdomail.com/avatars/avatar_1.png",
"customVar1": "12345",
"customVar2": "12345"
},
...
}
```
**Use Cases**
1. Version History and Simultaneous Editing:
* The `username` and `avatarUrl` help in identifying users in the version history and during simultaneous editing.
2. Folder Paths:
* If the customer configures a folder path for storing images or modules, the `custom` variables can be included in the metadata. This allows the editor to know where to save or retrieve these resources.
3. Custom Variables:
* Any other custom variables required by the editor can be included in the `metadata` parameter. For instance, if certain configuration settings or values need to be dynamically provided during initialization, they can be passed here.
By defining these values during initialization, the editor is equipped with all necessary information to function correctly and efficiently, tailored to the customer's specific setup and requirements.
:::success
Please be advised, all the data from this parameter will be included into the UIData parameter within the [Email Resources Permissions API](server-webhooks#email-resources-permissions-api).
:::
## Notification Settings
The notifications parameter is used to display different types of messages on the application's UI.
For example,
::: image-wrap
{width=964 height=144}
:::
Message parameters:
Example:
```js
{
...,
"notifications": {
"info": function(message, id, params) { /* Show info message */ },
"error": function(message, id, params) { /* Show error message */ },
"success": function(message, id, params) { /* Show success message */ },
"warn": function(message, id, params) { /* Show warn message */ },
"loader": function(message, id, params) { /* Show loader message */ },
"hide": function(id) { /* Hide message by id */ },
},
...
}
```
## Pasting Content Restrictions
The `textEditorAllowedPasteContent` parameter allows you to restrict the tags and attributes that can be pasted from the clipboard into a text block. This is particularly useful in scenarios where maintaining a consistent and secure format for the text blocks is critical.
**Use Case:**
Imagine you are developing an email template editor for a marketing platform. To ensure that the pasted content adheres to your formatting standards and to prevent any potential security risks from unwanted HTML tags or attributes, you can use the `textEditorAllowedPasteContent` option. By defining which HTML tags and attributes are allowed, you can ensure that only specific elements and attributes are included when users paste content into the text editor. Any tags and attributes not specified in the allowed list will be ignored, and the text will be inserted as plain text.
For example, you may want to allow basic formatting tags like `