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:

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

Parameter	Description
`metadata` Required parameter.	Additional data to be passed during the initialization. This can include user-specific or email-specific metadata. A detailed description can be found in the metadata section
`onTokenRefreshRequest` Required parameter.	Called by the editor to obtain an authentication token. Parameters: the callback (token) must be called after receiving the token. A detailed description can be found in the Authentication section
`html` Required parameter. Only for emails opened for the first time in the plugin or when using the forceRecreate: true parameter	The HTML content of the email template to be loaded into the editor.
`css`	The CSS styles associated with the email template.
`name`	The name of the email template. The email name is used to set the default value of the `utm_campaign` parameter. This helps in tracking the campaign associated with the email by automatically populating the `utm_campaign` field with the email's name.
`utm`	UTM parameters for tracking purposes, such as source, medium, campaign, content, and term. A detailed description can be found in the UTM Parameters.
`locale`	The locale setting for the editor, determining the language and regional settings. Supported locales: {“en”, “pt”, “cs”, “de”, “es”, “fr”, “it”, “nl”, “pl”, “sl”, “tr”, “zh”, “uk”, “ru”} Default value: “en”
`forceRecreate`	A boolean parameter that forces the replacement of an existing email in Stripo’s database with new HTML and CSS during editor initialization. This parameter works only if no one is currently working on the email.
`ignoreClickOutsideSelectors`	An array of element selectors on the page specifies which elements should ignore clicks and not reset the selected block. This means that when these elements are clicked, they won't cause any changes to the currently selected block, maintaining the user's focus and selection. Sample: `[".ignore-click", "#skip-element"]`
`panelPosition`	Panel positioning on the screen: ”BLOCKS_SETTINGS” — block panel on the left, settings panel on the right; ”SETTINGS_BLOCKS” — settings panel on the left, block panel on the right Devalut value: `"BLOCKS_SETTINGS"`
`notifications`	Set of methods for displaying notifications. A detailed description can be found in the notifications section.
`textEditorAllowedPasteContent`	Set of tags and attributes allowed to be pasted into a text block. This is useful for limiting unsupported markup when copying code from external sources. A detailed description can be found in the textEditorAllowedPasteContent section.
`bankImagesDefaultSearchString`	The default search string for images from the "Stock" tab in the gallery (if enabled) refers to the pre-configured keyword or phrase used to automatically search for and display a set of default images when the Stock Images tab is opened. This helps to provide users with an immediate selection of relevant images without requiring them to enter a search term manually. Default value depends on current season: “spring” / “summer” / “autumn” / “winter” Sample: `"summer"`
`codeEditor`	The initial settings for displaying the code editor are specified in detail in the codeEditor section. These settings define how the code editor will appear and function when first opened, including aspects such as layout, themes, and default configurations. For a comprehensive explanation of these settings, refer to the codeEditor section.
`codeEditorButtonSelector`	The CSS selector for the element to which a click handler for opening/closing the code editor will be automatically added. Sample: `".code-editor-button"`
`mergeTags`	The list of merge tags to be added to the text block editing panel is specified in the mergeTags section. These merge tags allow users to dynamically insert personalized content into emails, such as recipient names or other variables. For a comprehensive description and how to use these merge tags, refer to the mergeTags section.
`socialNetworks`	The list of social networks to be added to the social networks block is specified in the socialNetworks section. This list defines which social media platforms will be available for inclusion in the block, allowing users to link to their social media profiles or share content. For a detailed description and configuration options, refer to the socialNetworks section.
`specialLinks`	The list of links to be added to the link selection component is specified in the specialLinks section. This list provides predefined links that users can easily add to their content. For a detailed description and usage instructions, refer to the specialLinks section.
`editorFonts`	The list of fonts to be included in the Font Family control for the basic blocks is specified in the Font Management section. This list defines the available font options that users can choose from when editing text. This customization allows you to control which fonts are available to users, ensuring consistency with your design guidelines and brand standards.
`conditionsEnabled`	This feature enables the Conditions tab in the editor, allowing users to set display conditions for their email content. This provides users with the ability to define when and how certain content should be displayed based on specified conditions. For a detailed description and configuration options, refer to the "Display Conditions" section.
`undoButtonSelector`	The CSS selector for the element to which a click handler for undoing the last action will be automatically added. Sample: `".undo-button"`
`redoButtonSelector`	The CSS selector for the element to which a click handler for redoing the last undone action will be automatically added. Sample: `".redo-button"`
`mobileViewButtonSelector`	The CSS selector for the element to which a click handler for switching to mobile view will be automatically added. Sample: `".mobile-view-button"`
`desktopViewButtonSelector`	The CSS selector for the element to which a click handler for switching to desktop view will be automatically added. Sample: `".desktop-view-button"`
`versionHistoryButtonSelector`	The CSS selector for the element to which a click handler for opening/closing the version history will be automatically added. Sample: `".version-history-button"`
`localePatch`	This feature allows for overriding any translation in the editor, providing customized localization. Usage: Set the `localePatch` parameter during the initialization of the Stripo editor to define custom translations. Provide keys and new values for the language you need. Sample: js `{ "localePatch": { "settingsPanel.accordion.structures": { "en": "Available Structures" }, "settingsPanel.block.timer": { "en": "Clock" } } }` For a list of all editor phrases, refer to the editor phrases JSON file.
`defaultMenuItems`	This feature allows you to define predefined values for menu items, including the number and titles of the items. Usage: Set the `defaultMenuItems` parameter during the initialization of the Stripo editor to specify default menu items with their names and links. These predefined values will appear once the Menu block is dropped into the email. Sample: js `"defaultMenuItems": [ { "name": "Item 1", "href": "https://google.com" }, { "name": "Item 2", "href": "https://test.com" } ]` This configuration provides a predefined set of menu items that users can use or modify.
`syncModulesEnabled`	The `syncModulesEnabled` parameter controls the synchronization of modules. Usage: Include the `syncModulesEnabled` parameter with `true` value during the initialization of the plugin to enable module synchronization. This ensures that any changes made to modules are automatically synchronized across different instances. Sample: js `"syncModulesEnabled": true` Passing this parameter with a true value will enable modules to be synchronized. For more details, refer to the “Synchronized Modules" section. Enabling module synchronization is essential for maintaining consistency and ensuring that all module updates are reflected across all instances.
`disableAdaptDesign`	This feature provides the opportunity to disable the responsive view for your email template. Usage: Set the `disableAdaptDesign` parameter to true during the initialization of the Stripo editor to disable the responsive view for the email template. When enabled, the “Responsive design” control within the Appearance tab of the editor will be deactivated by default. Sample: js `"disableAdaptDesign": true` This setting ensures that the email template does not adapt to different screen sizes, maintaining a fixed layout.
`moveBlockAvailability`	This parameter controls the ability to move blocks inside the structure. When set to `true`, users can drag and drop blocks within the structure, allowing them to rearrange content more easily. Usage: Set the `moveBlockAvailability` parameter to `true` during the initialization of the Stripo editor to enable the drag-and-drop functionality for blocks. This allows users to move blocks within the structure using a mouse, making it easy to rearrange content by simply dragging and dropping blocks to the desired location. Sample: js `"moveBlockAvailability": true` Passing this parameter with a `true` value will enable the functionality to move blocks within the editor. Enabling block movement enhances the user experience by providing a flexible and intuitive way to organize content within the editor.
`enableNativeSpellChecker`	Set to `true` to enable the native spellchecker for the users in the editor. In this case, text with typos will be underlined and, by right-clicking, will appear in the context menu of suggestions for correction. Works in beta mode.
`enableXSSSecurity`	This parameter enables the inclusion of a Content Security Policy (CSP) meta tag in the edited document, helping to protect against certain types of attacks, such as Cross-Site Scripting (XSS). When set to true, the editor will automatically add a CSP tag that restricts the sources from which content can be loaded, enhancing the security of the emails being edited. Usage: Set the `enableXSSSecurity` parameter to true during the initialization of the Stripo editor to apply the Content Security Policy. This helps prevent unauthorized scripts and other potentially malicious content from being executed within the email. Sample: js `"enableXSSSecurity": true`
`allowedScriptSourceDomains`	This feature specifies a list of domains that are allowed to be sources for script tags within the editor. Usage: Set the `allowedScriptSourceDomains` parameter during the initialization of the Stripo editor to define which domains are permitted for script tags, enhancing security and control over script sources in the editor environment. Sample: js `"allowedScriptSourceDomains": [ "https://domain1.com", "http://domain2.net" ]` This configuration ensures that scripts from the specified domains can run within the editor.
`supportOutlookButtonsByDefault`	This feature enables the "Outlook Support" control for the "Button" block by default. Usage: Set the `supportOutlookButtonsByDefault` parameter to `true` during the initialization of the Stripo editor to ensure that buttons are automatically optimized for Outlook. This is particularly useful for ensuring that buttons render correctly in Outlook email clients. Sample: js `"supportOutlookButtonsByDefault": true` This setting ensures that the “Outlook Support” control is active for all button elements by default, enhancing compatibility with Outlook.
`shouldBeSavedToLibrary`	The `shouldBeSavedToLibrary` parameter controls the 'save as module' functionality for individual containers, structures, or stripes within the editor. This can be set to a boolean value or a function to determine the availability of the feature based on specific conditions. Usage: To completely disable the 'save as module' functionality for all containers, structures, or stripes, set `shouldBeSavedToLibrary` to a function that always returns `false` js `{ ... "shouldBeSavedToLibrary": function() { return false; }, ... }` In this configuration, the 'save as module' functionality is disabled in the editor for specific element, preventing users from saving them as modules. Sample: Provide a function that returns a boolean value to conditionally enable or disable the 'save as module' functionality based on the content of the module. js `{ ... shouldBeSavedToLibrary: function(moduleHtml) { // Your logic to determine if the module can be saved return true; // or false }, ... }` In this configuration, the provided function will be called with the HTML content of the module as an argument. The function should return `true` to enable the 'save as module' functionality or false to disable it. This allows for greater flexibility in controlling when and how modules can be saved to the library, ensuring that only appropriate content is preserved as reusable modules.
`youtubeApiKey`	The `youtubeApiKey` parameter connects with YouTube to fetch video links and generate screenshots for the “Video” block. This key is necessary for accessing YouTube's API and ensuring proper functionality of video-related features within the plugin. Usage: Include the `youtubeApiKey` parameter during the initialization of the plugin. This parameter should contain your YouTube API key, which you can obtain by following the instructions in the “How to Get a YouTube API Key” article. Sample: js `"youtubeApiKey": "YOUR_YOUTUBE_API_KEY_HERE"` If you don’t pass this parameter, our default key will be used instead; however, we do not recommend using it for security reasons. Using your own YouTube API key ensures better security and reliability of the video functionalities in your application.
`modulesDisabled`	The `modulesDisabled` parameter is used to control whether users can manage the modules within the settings panel. When set to `true`, users will not have the ability to see and manage modules, including the ability to save new ones. Usage: Include the `modulesDisabled` parameter during the initialization of the plugin. This parameter should be set to `true` to disable module management for users. Sample: `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.
`selectBlockAfterDropFromSettingsPanel`	This feature allows the block to be automatically selected after being dragged and dropped from the settings panel. Usage: Set the `selectBlockAfterDropFromSettingsPanel` parameter to `true` during the initialization of the Stripo editor to enable this functionality. This improves the workflow by immediately selecting the newly added block for further customization. Sample: js `"selectBlockAfterDropFromSettingsPanel": true` This setting ensures that any block added from the settings panel is instantly selected, streamlining the editing process.
`modulesExcludedCategories`	This parameter specifies an array of category IDs that should be excluded from the modules list within the editor. By providing a list of IDs, you can control which categories of modules are hidden from users, ensuring that only relevant modules are available for selection. Usage: Implement the `modulesExcludedCategories` parameter in your initialization script to exclude specific categories of modules from the editor's module library. This can be useful for tailoring the editor interface to specific use cases or for simplifying the module selection process by hiding unnecessary categories. Sample: js `"modulesExcludedCategories": [1, 2]` In this example, the categories with IDs 1 and 2 will be excluded from the modules list in the editor.
`messageSettingsEnabled`	This parameter enables or disables the message settings within the editor. When set to true, users will have access to additional message-related settings, such as title, preheader, UTM parameters, and more. This can be particularly useful if you want to manage these settings directly within the editor. However, if your application already provides these controls in its UI, it may be beneficial to hide them in the editor by setting this parameter to `false`. Usage: Implement the `messageSettingsEnabled` parameter in your initialization script to toggle the availability of message settings in the editor. This provides flexibility in managing how message-related configurations are handled, either within the editor or through the application's own UI. Sample: js `"messageSettingsEnabled": true` When set to `true`, the message settings panel will be enabled, allowing users to configure options like title, preheader, and UTM parameters. If set to `false`, these settings will be hidden, which is useful if they are already controlled by the application's UI.
`previewIframeAttributes`	This parameter allows you to add custom attributes to the `iframe` container that displays the preview of the opened email. This can be useful for applying specific configurations or styling that is required for your use cases. Usage: Implement the `previewIframeAttributes` parameter in your initialization script to define custom attributes for the `iframe` used in the email preview. You can specify any number of attributes, each represented as key-value pairs. Sample: js `previewIframeAttributes: { foo: "bar", withoutValue: "" }` In this example, the `iframe` will include a `foo` attribute with the value `"bar"` and an attribute `withoutValue` without any assigned value.
`onSettingsPanelBlockSorting`	The `onSettingsPanelBlockSorting` function is used to order blocks in the settings panel. This function allows you to customize the sorting of blocks to match your specific requirements for block display order. Usage: Define the `onSettingsPanelBlockSorting` function during the initialization of the plugin. This function should take an array of block names as an argument and return the sorted array. Sample: js `onSettingsPanelBlockSorting: function(names) { return names.sort(); }` If it is not specified, blocks sorting works without changes. This callback ensures that your blocks in the settings panel are sorted according to your custom logic, improving the overall organization and user experience of the settings panel.
`onPreheaderChanged`	This parameter allows you to define a function that will be triggered whenever the email preheader is changed within the editor. The function you provide can include custom logic that responds to these changes, enabling you to perform additional actions or updates based on the new preheader value. Usage: Set the `onPreheaderChanged` parameter to a function during the initialization of the Stripo editor. This function will be called whenever the preheader of the email is modified by the user, allowing you to implement custom behaviors in response to this event. Sample: js `onPreheaderChanged: function(preheader) { // Custom logic to execute when the email preheader changes }` Passing a function to this parameter ensures that your custom logic is executed each time the email preheader is updated, providing real-time feedback and handling within the editor.
`onRtlSet`	The `onRtlSet` function allows you to determine whether a customer has activated the RTL (Right-to-Left) function. This function can be used to execute custom code or logic based on the RTL setting. Usage: Define the `onRtlSet` function during the initialization of the plugin. This function will be called with a boolean value indicating whether RTL has been set. Sample: js `onRtlSet: function(value) { console.log('rtl set', value); }` Using this function, you can track changes to the RTL setting and perform any necessary actions or updates when the RTL mode is activated or deactivated. This improves the overall user experience and ensures compatibility with RTL languages.
`onTemplateLoaded`	The `onTemplateLoaded` function is called by the editor after the email has been rendered and the editor is ready to work. This function helps to notify your application that the email template is fully rendered and ready for interaction. Usage: Define the `onTemplateLoaded` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need once the email is fully loaded and ready for editing. Sample: js `onTemplateLoaded: function() { // Custom logic to execute after the email is fully rendered }` This callback ensures that your application can perform any necessary actions or updates once the email rendering process is complete, improving the overall user experience and workflow integration.
`onTitleChanged`	This parameter allows you to define a function that will be triggered whenever the email title is changed within the editor. The function you provide can include custom logic that responds to these changes, enabling you to perform additional actions or updates based on the new title value. Usage: Set the `onTitleChanged` parameter to a function during the initialization of the Stripo editor. This function will be called whenever the title of the email is modified by the user, allowing you to implement custom behaviors in response to this event. Sample: js `onTitleChanged: function(title) { // Custom logic to execute when the email title changes }` Passing a function to this parameter ensures that your custom logic is executed each time the email title is updated, providing real-time feedback and handling within the editor.
`onCodeEditorVisibilityChanged`	The `onCodeEditorVisibilityChanged` function is called by the editor when the code editor is opened or closed. This function helps to notify your application about changes in the visibility of the code editor, allowing you to handle these changes appropriately. Parameters: `isOpened — true` if the code editor is opened, `false` if it is closed. Usage: Define the `onCodeEditorVisibilityChanged` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when the code editor's visibility changes. Sample: js `onCodeEditorVisibilityChanged: function(isOpen) { // ... }` This callback ensures that your application can respond appropriately to changes in the visibility of the code editor, providing real-time feedback and handling to enhance the user experience.
`onDisabledBlockClicked`	The `onDisabledBlockClicked` function is called when clicking on a block icon in the block panel that is disabled. This function helps to notify your application about attempts to interact with disabled blocks, allowing you to provide feedback or handle the event appropriately. Parameters: `localizedTitle` — Localized block name. `type` — Block type. Available values: `'BLOCK_IMAGE'` `'BLOCK_TEXT'` `'BLOCK_BUTTON'` `'BLOCK_SPACER'` `'BLOCK_VIDEO'` `'BLOCK_SOCIAL'` `'BLOCK_BANNER'` `'BLOCK_TIMER'` `'BLOCK_MENU'` `'BLOCK_MENU_ITEM'` `'BLOCK_HTML'` `'BLOCK_AMP_CAROUSEL'` `'BLOCK_AMP_ACCORDION'` `'BLOCK_AMP_FORM'` Usage: Define the `onDisabledBlockClicked` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when a disabled block is clicked. Sample: js `onDisabledBlockClicked: function(localizedTitle, blockType) { // Custom logic to execute when a disabled block is clicked }` This callback ensures that your application can respond appropriately to attempts to interact with disabled blocks, providing real-time feedback and handling to enhance the user experience.
`onSettingsPanelPositionChanged`	The `onSettingsPanelPositionChanged` function is called when changing the settings panel position. This function helps to notify your application about changes in the position of the settings panel, allowing you to adjust your UI or perform other necessary actions. Parameters: `position` The new position of the settings panel, either "left" or "right". Usage: Define the `onSettingsPanelPositionChanged` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when the settings panel position changes. Sample: js `onSettingsPanelPositionChanged: function(position) { // Custom logic to execute when the settings panel position changes }` This callback ensures that your application can respond appropriately to changes in the settings panel position, providing real-time feedback and handling to enhance the user experience.
`onVersionHistoryVisibilityChanged`	The `onVersionHistoryVisibilityChanged` function is called by the editor when the version history is opened or closed. This function helps to notify your application about changes in the visibility of the version history feature. Parameters: `isOpened — true` if the version history is open, `false` if it is closed. Usage: Define the `onVersionHistoryVisibilityChanged` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when the visibility of the version history changes. Sample: js `onVersionHistoryVisibilityChanged: function(isOpen) { // Custom logic to execute when version history visibility changes }` This callback ensures that your application can respond appropriately to changes in the visibility of the version history, providing real-time feedback and handling to enhance the user experience.
`onVersionHistoryReadAccessChanged`	The `onVersionHistoryReadAccessChanged` function is called by the editor when changing the read access to the version history. This function helps to notify your application about changes in permissions related to the version history feature. Parameters: `isEnabled — true` if it is allowed to open the version history, `false` if it is not allowed. Usage: Define the `onVersionHistoryReadAccessChanged` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when the read access to the version history changes. Sample: js `onVersionHistoryReadAccessChanged: function(enabled) { // Custom logic to execute when version history read access changes }` This callback ensures that your application can respond appropriately to changes in version history permissions, providing real-time feedback and handling to enhance the user experience.
`onSaveStarted`	The `onSaveStarted` function is called when the save procedure starts. This function helps to notify your application that the saving process has begun. Usage: Define the `onSaveStarted` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when the save process initiates, such as showing a loading indicator or logging the event. Sample: js `onSaveStarted: function() { // Custom logic to execute when the save procedure starts }` This callback ensures that your application can respond appropriately to the start of the save process, improving the overall user experience by providing real-time feedback and handling.
`onSaveCompleted`	The `onSaveCompleted` function is called when the save procedure is completed. This function helps to notify your application that the saving process has finished, and it provides information about any errors that may have occurred. Parameters: `error` — Description of the error, if any, or `undefined` if there is no error, Usage: Define the `onSaveCompleted` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need once the save process is complete, such as hiding a loading indicator, showing a success message, or handling errors. Sample: js `onSaveCompleted: function() { // Custom logic to execute when the save procedure is completed }` This callback ensures that your application can respond appropriately to the completion of the save process, providing real-time feedback and error handling to enhance the user experience.
`onEditorVisualModeChanged`	The `onEditorVisualModeChanged` function is called when changing the visual mode of the editor. This function helps to notify your application whenever the visual mode of the editor changes, allowing you to perform any necessary updates based on the current state. Parameters: `visualMode` — The current state of the editor, either "mobile" or "desktop". Usage: Define the `onEditorVisualModeChanged` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when the visual mode changes, such as adjusting the UI or logging the event. Sample: js `onEditorVisualModeChanged: function(visualMode) { // Custom logic to execute when the visual mode changes }` This callback ensures that your application can respond appropriately to changes in the editor's visual mode, improving the overall user experience by providing real-time feedback and adjustments based on the current state.
`onUserListChange`	The `onUserListChange` function is called when any user connects or disconnects from the editing session. This function helps to notify your application about changes in the user list, allowing you to manage user presence and interactions in real-time. Parameters: `usersList` — An array of objects representing the users in the session. `avatar`: string — The URL of the user's avatar. `color`: string — The color associated with the user. `name`: string — The name of the user. `isCurrentUser`: boolean — `true` if this object represents the current user, `false` otherwise. Usage: Define the `onUserListChange` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when the user list changes, such as updating the UI to reflect the current users in the session. Sample: js `onUserListChange: function(usersList) { // Custom logic to execute when the user list changes }` This callback ensures that your application can respond appropriately to changes in the user list, improving the overall user experience by providing real-time feedback and updates based on the current session participants.
`onEvent`	The `onEvent` function is called after a corresponding event occurs in the editor. This function helps to notify your application about various events, allowing you to handle them accordingly. Parameters: `type` — The type of the event. `params` — The parameters associated with the event. For a detailed description, refer to the onEvent section in the documentation. Usage: Define the `onEvent` function during the initialization of the Stripo editor. This function can be used to execute any custom code or logic you need when specific events occur in the editor. For a detailed description, refer to the onEvent section. Sample: js `onEvent: function(type, params) { // Handle different event types }` This callback ensures that your application can respond appropriately to various events occurring in the editor, providing real-time feedback and handling to enhance the user experience.
`onDataChanged`	This parameter is a callback function that is triggered when there are unsaved changes in the email. It allows you to perform specific actions whenever the data within the editor changes but hasn't yet been saved. This parameter is particularly relevant when autosaving is deactivated, as it provides a way to monitor changes that require manual saving. Usage: Implement the `onDataChanged` parameter in your initialization script to monitor changes to the email data. This can be useful for enabling save buttons, alerting users to unsaved changes, or triggering manual save functionalities when autosaving is turned off. Sample: js `onDataChanged: function() { console.log('Data changed'); // Additional logic to handle unsaved 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 or modules 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:

{
  ...,
  "metadata": {
    "emailId": "123",
    "username": "John Smith",
    "email": "john.smith@stripo.email",
    "avatalUrl": "https://yourdomail.com/avatars/avatar_1.png",
    "customVar1": "12345",
    "customVar2": "12345"
  },
  ...
}

Use Cases

Version History and Simultaneous Editing:
- The username and avatarUrl help in identifying users in the version history and during simultaneous editing.
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.
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.

Please be advised, all the data from this parameter will be included into the UIData parameter within the Email Resources Permissions API.

Notification Settings

The notifications parameter is used to display different types of messages on the application's UI.

For example,

Parameter	Description
`info`	Used to display informational messages. Parameters: message — the message text; id — the message identifier; params — parameters for the message
`error`
`success`
`warn`
`loader`
`hide`	Used to close a message

Message parameters:

Parameter	Description
`closeable`	True if the message can be closed
`autoClose`	True if the message can be automatically closed after a certain period
`customClasses`	CSS classes to be added to the message's markup
`action`	Adds an action button to the message. Parameters: label — the button label; func — the function to execute when the button is clicked

Example:

{
 ...,
 "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 <p>, <a>, <strong>, and <em> but restrict other tags that could disrupt the email's design or introduce security vulnerabilities. Additionally, you can specify which attributes are allowed for certain tags, such as allowing only href and title attributes for <a> tags, and src and alt attributes for <img> tags. Other tags and attributes will be stripped out, ensuring that only clean and secure content is inserted.

Parameter	Description
`tags`	An array of tags that are allowed to be pasted
`attributes`	An array of attributes that are allowed to be pasted

{
  ...,
  "textEditorAllowedPasteContent": {
    "tags": ['b', 'strong', 'i', 'a'],
    "attributes": ['href', 'target']
  },
  ...
}

In this example, only the specified tags and attributes will be permitted when pasting the coppied content into the text block. This ensures that the content remains consistent with the desired format and helps prevent any unintended HTML or security issues.

Code Editor Settings

This parameter is used to configure the default display state of the code editor.

Parameter	Description
`isOpen`	True — if the code editor is open by default
`isDefaultCSSOpen`	True — if the default CSS section is open by default
`isCustomCSSOpen`	True — if the custom CSS section is open by default
`containerHeight`	Default height of the code editor in pixels
`defaultCSSPanelWidth`	Width of the default CSS section by default in pixels
`customCSSPanelWidth`	Width of the custom CSS section by default in pixels

Example:

{
  ...,
  "codeEditor": {
    "isOpen": false,
    "isDefaultCSSOpen":true,
    "isCustomCSSOpen": false,
    "containerHeight": 80,
    "defaultCSSPanelWidth": 100,
    "customCSSPanelWidth": 100
  },
  ...
}

In this example, the code editor is initially closed (isOpen: false), the default CSS section is open (isDefaultCSSOpen: true), and the custom CSS section is closed (isCustomCSSOpen: false). The default height of the code editor container is set to 80 pixels, and both the default and custom CSS panel widths are set to 100 pixels.

Merge Tags Setup

The mergeTags parameter is used to specify merge tags displayed in the settings of a text block. Merge tags are placeholders that dynamically insert personalized content, such as a recipient's name or other specific information, into the text. This is particularly useful in email marketing, where personalization can significantly improve engagement and response rates.

Use Case:

Imagine you are developing an email marketing platform that allows users to create and send personalized emails to their subscribers. To enhance the effectiveness of these emails, you want to allow users to insert personalized content easily. The mergeTags parameter lets you define which merge tags are available for users to insert into their email text blocks. For example, you might want to include merge tags for the recipient's first name, last name, and specific campaign details.

By defining these merge tags, users can quickly add personalized elements to their emails without manually inputting each recipient's information. When the email is sent, the merge tags are replaced with the actual data for each recipient, creating a more personalized and engaging message.

Parameter	Description
`category`	Name of the merge tag group
`entries`	An array of merge tags, where: `label` — the name displayed in the text block settings; `value` — the value of the merge tag `hint` (optional): Additional description for the tag. `hidden` (optional): This parameter hides/shows the merge tag from the drop-down menu depending on the `true`/`false` value.

Example:

{
  ...,
  "mergeTags": [
    {
      "category": "eSputnik",
      "entries": [
        {
          "label": "First Name",
          "value": "%FIRST_NAME%",
          "hint": "Recipient's first name",
          "hidden": false
        },
        {
          "label": "Last Name",
          "value": "%LAST_NAME%",
          "hint": "Recipient's last name",
          "hidden": false
        }
      ]
    }
  ],
  ...
}

In this example, there are two categories of merge tags: "eSputnik" and "Campaign." Each category contains entries with labels and values that will be displayed in the text block settings. For instance, the "eSputnik" category includes merge tags for "First Name" and "Last Name," allowing users to personalize emails with the recipient's name.

Using these merge tags, users can effortlessly create personalized and targeted email content, improving the overall effectiveness of their email marketing campaigns.

Custom Appearance of Merge Tags

You can independently choose how exactly your personalization tags should be displayed. This can be configured during initialization with the following parameters:

customAppearanceMergetags: Enables custom appearance for merge tags.
customAppearanceMergetagsInLinks: Enables custom appearance for merge tags within links.
customAppearanceMergetagsBorderColor: Specifies the border color for merge tags.
customAppearanceMergetagsBackgroundColor: Specifies the background color for merge tags.

Example:

{
  ...
  "customAppearanceMergetags": true,
  "customAppearanceMergetagsInLinks": true,
  "customAppearanceMergetagsBorderColor": "blue",
  "customAppearanceMergetagsBackgroundColor": "green"
}

This configuration customizes the appearance of merge tags, making them visually distinct with a blue border and green background.

Custom Thumbnails for Images with Merge Tags

When customers use personalization tags (Merge tags) for different images, the editor can't recognize them and as a result, replaces the image with a "broken" icon:

Some users find this confusing. If you want to replace the "broken" icon with your own image, use the configuration below:

{
  "defaultImgForMergeTagSrc": "URL"
}

where:

URL - is the link to your image.

You should apply this configuration during initialization, and it will work as shown in the screenshot below:

The socialNetworks parameter is used to specify the list of social networks that will be added to the social networks block. This feature is especially useful for individuals or businesses who want to include links to their social media profiles directly within their email templates, allowing recipients to easily connect with them across various platforms.

Use Case:

Imagine you are creating an email template for a marketing campaign. Including links to your social media profiles in the email can increase engagement and drive traffic to your social media pages. By specifying the socialNetworks parameter, you can define which social media icons and links should be displayed in the email's social networks block. If this parameter is specified with social networks, these icons will be added by default once the social network block is dropped into the email template. This ensures that your audience can easily find and follow your social media accounts, helping to build your online presence and foster community engagement.

Parameter	Description
`name`	Name of the social network
`href`	URL of the social network profile

Example:

{
  ...,
  "socialNetworks": [
    {
      "name": "facebook",
      "href": "https://facebook.com"
    }
  ],
  ...
}

Supported Social Network Names or Icons:

Category	Names
`socials`	facebook, twitter, instagram, linkedin, pinterest, snapchat, youtube, tiktok, vimeo, reddit, tumblr, weibo, threads, discord, mastodon, custom
`chat`	whatsapp, messenger, telegram, skype, hangouts, viber, wechat, slack, teams, zoom
`others`	askfm, workplace, blogger, behance, email, dribbble, website, flickr, foursquare, gmail, glassdoor, iTunesPodcasts, tripAdvisor, lastfm, rss
	appstore, myspace, line, windowsstore, soundcloud, medium, spotify, dropbox, googledrive, github, pdf, doc, xls, ppt, onedrive, meetup
	patreon, kofi, buyMeACoffee, yammer, huaweiAppGallery, googleBusiness, strava, google, goodreads, yelp

Using the socialNetworks parameter ensures that the social media links are consistently formatted and easily accessible, enhancing the overall effectiveness of the email marketing campaign by encouraging social media interaction and engagement.

You can independently choose which style should be applied to the social icons when your customer drops them into an email message. All you need to do is initialize the Plugin with the configuration below:

"socialIconsDefaultView": "squareColoredBordered"

Available Values:

logoBlack, logoGray, logoWhite, circleColored, roundedColoredBordered, circleColoredBordered, roundedColored, squareColored, squareColoredBordered, circleBlack, circleBlackBordered, roundedBlack, roundedBlackBordered, squareBlack, squareBlackBordered, circleGray, circleGrayBordered, roundedGray, roundedGrayBordered, squareGray, squareGrayBordered, circleWhite, circleWhiteBordered, roundedWhite, roundedWhiteBordered, squareWhite, squareWhiteBordered, logoColored

The final result depends on your chosen value. In this example, the configuration is set to logoColored.

By customizing the socialIconsDefaultView parameter, you can ensure that the social icons in your email messages match your preferred style and branding.

Special Links Configuration

The specialLinks parameter is used to specify a list of links that will be added to the link selection component. This feature is particularly useful for adding commonly used links, such as unsubscribe, support, or social media profile links, directly into email templates. It ensures consistency, saves time, and makes the email creation process more efficient.

Use Case:

Imagine you are managing an email marketing platform where users frequently need to include specific links in their email templates, such as unsubscribe links or customer support links. Manually entering these URLs each time can be tedious and prone to errors. The specialLinks parameter allows you to define these essential links once, and then make them easily accessible for users to insert into their emails.

For example, you might want to include links for unsubscribing from the newsletter, contacting support, or viewing email in browser. By using the specialLinks parameter, you can group these links under specific categories, making it easy for users to find and insert them into their emails

Parameter	Description
`category`	Name of the group of links
`entries`	An array of links, where: label: The name displayed in the settings value: The URL of the link hidden: This parameter accepts `true` or `false` and ensures the link will be hidden in the UI if set to `true`.

Example:

{
  ...,
  "specialLinks": [
    {
      "category": "eSputnik",
      "entries": [
        {
          "label": "Unsubscribe",
          "value": "https://esputnik.com/unsubscribe",
          "hidden": false
        }
      ]
    }
  ],
  ...
}

This approach not only ensures that the links are correctly formatted and consistently used but also significantly speeds up the email creation process. It reduces the likelihood of errors and enhances the overall user experience by providing quick access to frequently used links.

Using the specialLinks parameter, you can help users maintain a high standard of professionalism and compliance in their email campaigns while also making the editing process more efficient and user-friendly.

Custom Appearance of Special Links

Please refer to the section Custom Appearance of Merge Tags.

Font Management In paid subscriptions only

The Font Management option enables users to customize the fonts available in the Stripo editor, providing flexibility in design and brand consistency.

Use Cases

Font management helps implement a variety of scenarios, such as:

Customizable Font Lists: Users can customize the list of fonts loaded in the editor. For example, an interface in your app can be created to configure the editor with specific fonts.
Brand Consistency for Agencies: Digital marketing agencies can customize the list of fonts in the editor according to a client's brand requirements.
Expanded Font Options: To expand the list of available fonts in the editor, add your web fonts from popular services like Google Fonts.
Reduced Font Options: By limiting the number of fonts, default fonts are removed, making it easier for users to adhere to brand guidelines.

How to Activate

To activate option, include the editorFonts parameter in the plugin initialization script. This parameter allows specifying custom fonts, displaying default fonts, and organizing favorite fonts.

"editorFonts": {
  "showDefaultStandardFonts": true,
  "showDefaultNotStandardFonts": true,
  "favouriteFonts": {
    "label": "Favourite Fonts",
    "values": [
      {
        "name": "Barriecito",
        "fontFamily": "'Barriecito', cursive",
        "url": "https://fonts.googleapis.com/css?family=Barriecito&display=swap"
      }
    ]
  },
  "customFonts": [
    {
      "name": "Oswald",
      "fontFamily": "'Oswald', 'helvetica neue', helvetica, arial, sans-serif",
      "url": "https://fonts.googleapis.com/css?family=Oswald"
    },
    {
      "name": "Barriecito",
      "fontFamily": "'Barriecito', cursive",
      "url": "https://fonts.googleapis.com/css?family=Barriecito&display=swap"
    }
  ]
}

Find the parameter descriptions below:

Parameter	Type	Description
`showDefaultStandardFonts`	`Boolean`	Determines whether default standard fonts are displayed. Default is `true`.
`showDefaultNotStandardFonts`	`Boolean`	Determines whether default non-standard fonts are displayed. Default is `true`.
`customFonts`	`Array`	List of custom fonts to include, each with `name`, `fontFamily`, and `url` properties. This allows adding web fonts from popular services like Google Fonts. Requirements are as follows: `name` — this line will be shown in the drop-down fonts list. Long lines could distort the interface, thus we recommend using short ones. Do not enter the following characters: {} []: "/ \ \|?; `fontFamily` — describes a set of CSS fonts that will be applied to the final HTML. It is important to provide at least one fallback font so that the text is not displayed in any font of an unsupported font family on a user's device. It is important to use single quotes with font names instead of double quotes to maintain the correct JSON syntax; `url` — this parameter is used only when working with web fonts. It is important to make the URL point at a CSS file with @font-face properties, and not directly at font files. Make sure CSS is hosted on the HTTPS protocol.
`favouriteFonts`	`Object`	Defines a section for favorite fonts at the top of the list. This object contains a `label` for the section name and values, an array of favorite fonts each with `name`, `fontFamily`, and `url` properties.

Please be advised that Stripo accepts only the CSS font embedding method, and the CSS file must be hosted in HTTPS protocol. You can use services like Google fonts that provide host font stacks and a well-formatted CSS file. If you want to change the default set of fonts, you need to disable them and use custom fonts to indicate a new set, including the URL parameter for web fonts. In this case, you don’t have to pass the URL parameter to the fonts from the “Standard fonts” list.

User-Added Fonts in Editor

To enable users to add custom fonts to the Stripo editor, follow these steps:

Step 1: Modify the Initialization Script

Add the externalCustomFont parameter to the plugin's initialization script. This parameter allows for the addition of external custom fonts.

externalCustomFont: window.ExternalCustomFont

Step 2: Include the Script

Insert the appropriate script in the body section of your web page. This script will be responsible for handling the functionality of adding custom fonts.

Refer to the external-custom-font-sample for a complete example.

Step 3: Configure Custom Fonts

When users click to add a custom font, a pop-up window will appear where they can enter the following details:

name: The name of the font.
fontFamily: The CSS font-family declaration.
url: The URL to the font file.

Optional: Change "Add Font" Hint

To customize the hint for the "Add font" option, use the following parameter:

addCustomFontTitle: 'Add custom font title'

This configuration provides users with a seamless way to add and manage custom fonts within the Stripo editor, enhancing their ability to tailor email designs to specific branding requirements.

Display Conditions

Display conditions allow you to change the content of emails displayed to recipients, depending on whether the specified condition on your end is met or not.

Users can set conditions manually in the editor (Local) or select them from a list of predefined conditions set earlier (Predefined).

Use Cases:

Personalized Content: Show different content blocks to different segments of your audience. For example, display a special offer only to female customers or show different products based on user preferences.
Conditional Display: Include or exclude certain content based on specific conditions, such as geographic location, membership status, or user activity.
Dynamic Marketing Campaigns: Enhance engagement and relevance by tailoring email content to different user segments.

Important Considerations:

Editor and Application Responsibilities: While the editor is responsible for placing the conditional statements into the correct places within the HTML of the email, it is the responsibility of the application (where the plugin is embedded) to correctly handle these statements when it’s time to send the email, according to their business needs.
No Language Limitations: The editor does not have any limitations regarding the language of these statements, so they can be written in any scripting language supported by your application.

Now let’s go through the initial process of activating and customizing the Display Conditions for the editor users.

Activating Display Conditions

To activate Display Conditions during Plugin initialization, include the following parameter:

{
  ...
  "conditionsEnabled": true, // activation of the Display Conditions control in the Editor
  ...
}

This activates the Conditions tab in the editor:

Allowing Local Display Conditions Creation

To allow users to create local Display Conditions directly in the editor, you need to enable the custom conditions setting during the Plugin initialization. This provides users with the flexibility to define conditions based on their specific needs without relying solely on predefined conditions.

Add the following setting to your Plugin initialization configuration:

{
  ...
  "conditionsEnabled": true,
  "customConditionsEnabled": true, // enables creating Local Display Conditions inside the Editor
  ...
}

Once activated, users will see an option to create custom conditions in the editor:

Setting Up Predefined Conditions

There are two types of predefined conditions: predefined categories and predefined external.

Predefined Categories

This type expects the editor to get a set of possible categories of conditions with arrays of the conditions themselves.

Example configuration for predefined categories:

{
  ...
  "conditionCategories": [
    {
      "type": "PREDEFINED",
      "category": "Gender",
      "conditions": [
        {
          "id": 1,
          "name": "Female",
          "description": "Only female customers will see this part of the email.",
          "beforeScript": "{% if contact.gender == \"Female\" %}",
          "afterScript": "{% endif %}"
        },
        {
          "id": 2,
          "name": "Male",
          "description": "Only male customers will see this part of the email.",
          "beforeScript": "{% if contact.gender == \"Male\" %}",
          "afterScript": "{% endif %}"
        }
      ]
    }
  ],
  ...
}

Predefined External

Predefined external conditions work differently. On the UI, the customer will see a button, which once activated triggers the opening of an external modal window where the user may see various conditions offered by the external applications. The external window is totally under the control of the customer's application in which the plugin is embedded. Once the condition is selected, the editor expects the callback with the needed data.

Example configuration for predefined external conditions:

{
  ...
  "conditionCategories": [
    {
      "type": "EXTERNAL",
      "category": "Gaming platform",
      "openExternalDisplayConditionsDialog": function(cb) {
        // Your code goes here
        cb({
          "name": "Console",
          "description": "Only console gamers will see this part of the email.",
          "beforeScript": "{% if contact.gamingPlatform == \"peasant\" %}",
          "afterScript": "{% endif %}"
        });
      }
    }
  ],
  ...
}

Parameter Description:

Parameter	Description
`type`	Type of condition. Currently only “PREDEFINED” and “EXTERNAL” are supported
`category`	Name of the category
`conditions`	An array of condition details

Conditions Details:

Parameter	Description
`id`	Unique identifier of the condition
`name`	Name of the condition
`description`	Description of the condition
`beforeScript`	Content to be inserted into the email before the block with the condition
`afterScript`	Content to be inserted into the email after the block with the condition

Example Usage:

{
  "conditionsEnabled": true,
  "customConditionsEnabled": true,
  "conditionCategories": [
    {
      "type": "PREDEFINED",
      "category": "Gender",
      "conditions": [
        {
          "id": 1,
          "name": "Female",
          "description": "Only female customers will see this part of the email.",
          "beforeScript": "{% if contact.gender == \"Female\" %}",
          "afterScript": "{% endif %}"
        },
        {
          "id": 2,
          "name": "Male",
          "description": "Only male customers will see this part of the email.",
          "beforeScript": "{% if contact.gender == \"Male\" %}",
          "afterScript": "{% endif %}"
        }
      ]
    },
    {
      "type": "EXTERNAL",
      "category": "Gaming platform",
      "openExternalDisplayConditionsDialog": function(cb) {
        // Your code goes here
        cb({
          "name": "Console",
          "description": "Only console gamers will see this part of the email.",
          "beforeScript": "{% if contact.gamingPlatform == \"peasant\" %}",
          "afterScript": "{% endif %}"
        });
      }
    }
  ]
}

Link Selector Customization

he Link Selector Customization feature allows you to set up the view of available link protocols independently. If certain protocols are not needed, you can hide them from customers.

Usage

To customize the link selector, use the following parameters during the initialization of the plugin:

{
  "hideLinks": ['mail', 'tel', 'https://some.special.link.url'],
  "hideLinksCategories": ['eSputnik']
}

Where:

mail, tel are General protocols.
https://some.special.link.url represents special links that you have defined in the editor.
eSputnik' is a category of special links where it is placed.

After enabling these parameters, the specified protocols will be hidden.

By customizing the link selector, you can streamline the user interface and ensure that only the necessary link protocols are available to your customers, improving their experience and reducing potential confusion

Event Handling

The onEvent parameter is used to define event handlers for various actions within the editor. These events help track user interactions and trigger specific functions in response to those interactions. Below is a list of available events and their descriptions, along with the parameters passed for each event.

Available Events:

Parameter	Description	Event parameters
`editor_view_mode_changed`	Triggered when switching between mobile and desktop views.	js `{state: 'DESKTOP' \| 'MOBILE'}`
`modules_panel_opened`	Triggered when opening a tab from the modules panel.	js `{ target: string }`
`module_dropped`	Triggered when adding a module to the email from pre-made or saved ones.	js `{ target: string; moduleId: string; moduleCategory: { key: string \| number; order: number; translatedValue: string; } syncModule: boolean; blockType: string; }`
`module_saved`	Triggered when saving a module.	js `{ target: string; moduleId: string; blockType: string; moduleCategory: string; syncModule: boolean; }`
`module_deleted`	Triggered when a module is deleted from the Module Library of saved modules. Use this event to handle permanent removals from saved collections.	js `{ moduleId: string; moduleCategory: { key: string \| number; order: number; translatedValue: string; } syncModule: boolean; blockType: string; }`
`module_removed`	Triggered when a user removes a module that was dropped into the email template currently open in the editor. This event is useful for handling temporary removals within the template layout.	js `{ moduleId: string; moduleCategory: { key: string \| number; order: number; translatedValue: string; } syncModule: boolean; blockType: string; }`
`block_added`	Triggered when adding a block (Text, Button, Image) through actions in an empty container.	js `{blockName: string}`
`block_dropped`	Triggered when adding blocks to the email from the blocks panel.	js `{blockName: string}`
`block_copied`	Triggered when copying a block.	js `{blockName: string}`
`block_deleted`	Triggered when deleting a block.	js `{blockName: string}`
`block_moved`	Triggered when moving a block.	js `{blockName: string}`

Example Usage:

{
    "onEvent": function handleEvent(type, params) {
        switch (type) {
            case "editor_view_mode_changed":
                // Handle view mode change
                break;
            case "modules_panel_opened":
                // Handle modules panel opening
                break;
            case "module_dropped":
                // Handle module dropped
                break;
            case "module_saved":
                // Handle module saved
                break;
            case "module_deleted":
                // Handle module deleted
                break;
            case "module_removed":
                // Handle module removed
                break;
            case "block_added":
                // Handle block added
                break;
            case "block_dropped":
                // Handle block dropped
                break;
            case "block_copied":
                // Handle block copied
                break;
            case "block_deleted":
                // Handle block deleted
                break;
            case "block_moved":
                // Handle block moved
                break;
            default:
                console.warn("Unhandled event type:", type);
        }
    },
    ...
}

By configuring the onEvent parameter, you can effectively monitor and respond to user interactions within the editor, providing valuable insights and enhancing the overall user experience.

UTM Parameters

The utm parameter is used to configure the initial settings for UTM tags in your email templates. These tags are essential for tracking the performance of your email campaigns in analytics platforms.

Use Case:

Imagine you are setting up an email marketing campaign and you need to track its performance in Google Analytics. By using UTM tags, you can identify which email brought traffic to your website and how effective it was in terms of conversions. The utm parameter allows you to predefine these tags, ensuring that all links in your email carry the necessary tracking information.

Here's a detailed description of each parameter and its usage.

Parameter Description:

Parameter	Description
`utmSource`	Source of the traffic (e.g., 'eSputnik')
`utmMedium`	Medium of the campaign (e.g., 'email')
`utmCampaign`	Name of the campaign (e.g., 'Spring_Sale')
`utmContent`	Content of the campaign (e.g., 'Banner')
`utmTerm`	Term used for paid search campaigns (e.g., 'Discount')
`customUtms`	Additional custom UTM tags. Parameters: name: The name of the tag value: The value of the tag

Example Usage:

{
  ...,
  "utm": {
    "utmSource": "eSputnik",
    "utmMedium": "email",
    "utmCampaign": "Spring_Sale",
    "utmContent": "Banner",
    "utmTerm": "Discount",
    "customUtms": [
      {
        "name": "utmCustom1",
        "value": "someValue"
      }
    ]
  },
  ...
}

Detailed Explanation:

utmSource: This parameter identifies the source of the traffic. For example, if your emails are sent through the eSputnik platform, you might set utmSource to "eSputnik".
utmMedium: This parameter specifies the medium of the campaign. In the case of email campaigns, you would typically set this to "email".
utmCampaign: This parameter names the campaign. For example, if you are running a Spring Sale, you could set utmCampaign to "Spring_Sale".
utmContent: This parameter differentiates content within the same ad or campaign. For instance, if you have multiple banners, you could label them individually using utmContent.
utmTerm: This parameter is used for paid search campaigns to capture the keyword term. Even if you are not running paid search campaigns, you can use this field to track specific promotions or discounts, like "Discount".
customUtms: This array allows you to add additional custom UTM tags that may be specific to your needs. Each custom UTM includes a name and a value.

How to Utilize:

Predefine UTM Tags: Set the initial values for UTM tags in your email templates using the utm parameter. This ensures consistency across all your email campaigns.
Add Custom Tags: Use the customUtms array to include any additional tracking parameters that are unique to your campaign requirements.
Track Campaign Performance: By embedding these UTM tags in your email links, you can track the effectiveness of your campaigns in your analytics platform, such as Google Analytics. This helps you understand which emails drive the most traffic and conversions, allowing you to optimize future campaigns.

By setting up these UTM tags initially, you ensure that all the necessary tracking information is included in your email links, facilitating comprehensive campaign performance analysis.

Initialization Settings ​

Supported Parameters ​

metadata ​

onTokenRefreshRequest ​

html ​

css ​

name ​

utm ​

locale ​

forceRecreate ​

ignoreClickOutsideSelectors ​

panelPosition ​

notifications ​

textEditorAllowedPasteContent ​

bankImagesDefaultSearchString ​

codeEditor ​

codeEditorButtonSelector ​

mergeTags ​

socialNetworks ​

specialLinks ​

editorFonts ​

conditionsEnabled ​

undoButtonSelector ​

redoButtonSelector ​

mobileViewButtonSelector ​

desktopViewButtonSelector ​

versionHistoryButtonSelector ​

localePatch ​

defaultMenuItems ​

syncModulesEnabled ​

disableAdaptDesign ​

moveBlockAvailability ​

enableNativeSpellChecker ​

enableXSSSecurity ​

allowedScriptSourceDomains ​

supportOutlookButtonsByDefault ​

shouldBeSavedToLibrary ​

youtubeApiKey ​

modulesDisabled ​

selectBlockAfterDropFromSettingsPanel ​

modulesExcludedCategories ​

messageSettingsEnabled ​

previewIframeAttributes ​

onSettingsPanelBlockSorting ​

onPreheaderChanged ​

onRtlSet ​

onTemplateLoaded ​

onTitleChanged ​

onCodeEditorVisibilityChanged ​

onDisabledBlockClicked ​

onSettingsPanelPositionChanged ​

onVersionHistoryVisibilityChanged ​

onVersionHistoryReadAccessChanged ​

onSaveStarted ​

onSaveCompleted ​

onEditorVisualModeChanged ​

onUserListChange ​

onEvent ​

onDataChanged ​

Metadata Information ​

Notification Settings ​

Pasting Content Restrictions ​

Code Editor Settings ​

Merge Tags Setup ​

Custom Appearance of Merge Tags ​

Custom Thumbnails for Images with Merge Tags ​

Social Networks Configuration ​

Special Links Configuration ​

Custom Appearance of Special Links ​

Font Management In paid subscriptions only ​

Use Cases ​

How to Activate ​

User-Added Fonts in Editor ​

Step 1: Modify the Initialization Script ​

Step 2: Include the Script ​

Step 3: Configure Custom Fonts ​

Optional: Change "Add Font" Hint ​

Display Conditions ​

Activating Display Conditions ​

Allowing Local Display Conditions Creation ​

Initialization Settings

Supported Parameters

metadata

onTokenRefreshRequest

html

css

name

utm

locale

forceRecreate

ignoreClickOutsideSelectors

panelPosition

notifications

textEditorAllowedPasteContent

bankImagesDefaultSearchString

codeEditor

codeEditorButtonSelector

mergeTags

socialNetworks

specialLinks

editorFonts

conditionsEnabled

undoButtonSelector

redoButtonSelector

mobileViewButtonSelector

desktopViewButtonSelector

versionHistoryButtonSelector

localePatch

defaultMenuItems

syncModulesEnabled

disableAdaptDesign

moveBlockAvailability

enableNativeSpellChecker

enableXSSSecurity

allowedScriptSourceDomains

supportOutlookButtonsByDefault

shouldBeSavedToLibrary

youtubeApiKey

modulesDisabled

selectBlockAfterDropFromSettingsPanel

modulesExcludedCategories

messageSettingsEnabled

previewIframeAttributes

onSettingsPanelBlockSorting

onPreheaderChanged

onRtlSet

onTemplateLoaded

onTitleChanged

onCodeEditorVisibilityChanged

onDisabledBlockClicked

onSettingsPanelPositionChanged

onVersionHistoryVisibilityChanged

onVersionHistoryReadAccessChanged

onSaveStarted

onSaveCompleted

onEditorVisualModeChanged

onUserListChange

onEvent

onDataChanged

Metadata Information

Notification Settings

Pasting Content Restrictions

Code Editor Settings

Merge Tags Setup

Custom Appearance of Merge Tags

Custom Thumbnails for Images with Merge Tags

Social Networks Configuration

Special Links Configuration

Custom Appearance of Special Links

Font Management In paid subscriptions only

Use Cases

How to Activate

User-Added Fonts in Editor

Step 1: Modify the Initialization Script

Step 2: Include the Script

Step 3: Configure Custom Fonts

Optional: Change "Add Font" Hint

Display Conditions

Activating Display Conditions

Allowing Local Display Conditions Creation