Plugin Docs

Appearance

This plugin is new and currently in beta. For the stable version, please use the previous version of the plugin.

JavaScript API ​

The new Stripo editor provides a flexible API for interaction with external environments. Access to the API can be obtained through the global StripoEditorApi object.

Accessing the Stripo API:

js
const StripoEditorApi = window.StripoEditorApi

Available APIs:

APIDescription
actionsApi API for performing various actions in the editor. A detailed description can be found in the actionsAPI section.
emailMetadataApi API for working with email metadata like email title and prehader. A detailed description can be found in the emailMetadataApi section.
versionHistoryApi API for working with version history. A detailed description can be found in the versionHistoryApi section.
codeEditorApi API for working with the code editor. A detailed description can be found in the codeEditorApi section
devToolsApi API for working with developer tools of the Stripo editor. A detailed description can be found in the devToolsApi section.

Example Usage:

To access the version history API, you can use the following code:

js
const VersionHistoryApi = window.StripoEditorApi.versionHistoryApi

Actions API ​

The actionsApi provides methods for performing various actions within the Stripo email editor. This API allows for dynamic interactions with the editor, enabling users to execute commands such as saving templates, undoing/redoing changes, setting names, and more.

Available Methods:

MethodDescription
getTemplateData The getTemplateData method retrieves the template data, including the HTML, CSS, and additional parameters related to the template.

This is typically done when you want to save the current state of the email template in your database for future use or further processing.
js
const callback = function ({html, css, width, height, utmParams, syncModulesIds}) {
  // Process the template data here
};

window.StripoEditorApi.actionsApi.getTemplateData(callback);
Detailed Explanation:
  • getTemplateData: Method: This is called on the StripoEditorApi object to extract the current HTML and CSS of the email template.
  • Callback Function: The callback function that receives an object containing the following fields:
    • html (String): The HTML content of the template.
    • css (String): The CSS content of the template.
    • width (Number): The width of the template.
    • height (Number): The height of the template.
    • utmParams (Object): UTM parameters applied to the template (if any). More information here.
    • syncModulesIds (Array): A list of synchronized module IDs used within the template.
  • Saving the Template: The extracted HTML and CSS can then be saved to your database or processed further as needed.
Use Cases:
  1. Saving Templates: After users have made changes to their email templates, you can use the getTemplateData method to save the updated template to your database.
getTemplate

Deprecated

 The getTemplate method is used to retrieve the HTML and CSS codes, including the Plugin's internal extra styles and editor markup. This method is essential for extracting the modified template from the editor to save it in your database.

This is typically done when you want to save the current state of the email template in your database for future use or further processing.
js
const callback = function (html, css, width, height) {
  // ...
}

window.StripoEditorApi.actionsApi.getTemplate(callback)
Detailed Explanation:
  • getTemplate Method: This is called on the StripoEditorApi object to extract the current HTML and CSS of the email template.
  • Callback Function: The callback function is defined to handle the returned data. It receives four parameters: HTML, CSS, width and height.
    • HTML: The modified HTML code of the email template.
    • CSS: The modified CSS styles of the email template.
    • Width: The width of the email template.
    • Height: The height of the email template.
  • Saving the Template: The extracted HTML and CSS can then be saved to your database or processed further as needed.
Use Cases:
  1. Saving Templates: After users have made changes to their email templates, you can use the getTemplate method to save the updated template to your database.
compileEmail The compileEmail method is used to retrieve the compiled email template, including its HTML, AMP HTML, and other relevant information. This method is essential for obtaining the final version of the email, which can then be sent out or further processed.
js
const сompileEmailCallback = function(error, html, ampHtml, ampErrors, displayConditions) {
  // ...
};
const utmParameters {
  utmSource: '',
  utmMedium: '',
  utmCampaign: '',
  utmContent: '',
  utmTerm: '',
  customUtms: [
    {
      'name1': 'val1',
      'name2': 'val2'
    }
  ];
}
window.StripoEditorApi.actionsApi.compileEmail(
  {
    callback: сompileEmailCallback,
    minimize: true,
    utmEntity: utmParameters,
    mergeTags: [],
    forseAmp: false,
    resetDataSavedFlag: false,
    disableLineHeightsReplace: true
  }
);
Detailed Explanation:
  • compileEmail Method: This is called on the actionsApi object to compile the email template.
  • Callback Function (compileEmailCallback): The function that handles the response from the compileEmail method. It receives several parameters:
    • error: Any error that occurred during the compilation process.
    • html: The compiled HTML version of the email.
    • ampHtml: The compiled AMP HTML version of the email.
    • ampErrors: Any errors related to the AMP HTML.
    • displayConditions: The display conditions applied to the email.
  • UTM Parameters (utmParameters): An object containing UTM parameters for tracking the email campaign. It includes standard UTM parameters and custom UTM tags.
  • Method Options:
    • minimize: Whether to minimize the HTML and AMP HTML.
    • mergeTags: An array of merge tags to be used in the email.
    • forceAmp: Whether to force the generation of AMP HTML.
    • resetDataSavedFlag: Whether to reset the data saved flag.
    • disableLineHeightsReplace: Whether to disable the replacement of line heights.
Use Cases:
  1. Finalizing Email Content: After making all necessary changes and customizations to the email template, use compileEmail to obtain the final version for sending.
  2. Email Tracking: Include UTM parameters to track the performance of your email campaigns in analytics platforms.
  3. Handling AMP HTML: Ensure that the AMP HTML version of your email is properly compiled and handle any related errors.
By using the compileEmail method, you can retrieve the fully compiled email template, complete with UTM tracking parameters and display conditions. This allows you to finalize and send your emails with confidence, knowing that all modifications and tracking information are included.
setName The setName method on the actionsApi method is used to set a new name for the email template. This can be useful for organizing and identifying different email templates within your application.

To set a new name for the email template, call the setName method on the actionsApi object of the StripoEditorApi.
js
window.StripoEditorApi.actionsApi.setName('New email name')
Detailed Explanation:
  • Method:setName
  • Description: This method sets a new name for the current email template.
  • Parameter:
    • name (string): The new name you want to assign to the email template.
Use Cases:
  1. Organizing Templates: Assign meaningful names to email templates to easily identify and manage them within your application.
  2. Dynamic Naming: Change the email template name dynamically based on user input or other application logic.
  3. Template Management: Ensure that each email template has a unique and descriptive name, which can be particularly useful when handling multiple templates.
isAllDataSaved To check if all user changes are saved, call the isAllDataSaved method on the actionsApi object of the StripoEditorApi.
js
const isAllDataSaved = window.StripoEditorApi.actionsApi.isAllDataSaved()
Detailed Explanation:
  • Method:isAllDataSaved
  • Description: This method checks if all changes made by the user in the email editor are saved.
  • Return Value:
    • Boolean: Returns true if all changes are saved, false if there are unsaved changes.
Use Cases:
  1. Preventing Data Loss: Before closing the email editor or navigating away, check if there are unsaved changes to prevent data loss.
  2. User Prompts: Prompt the user to save their changes if the method returns false, ensuring that no modifications are lost.
  3. Conditional Logic: Implement conditional logic based on whether all changes are saved, such as enabling or disabling certain actions.
The isAllDataSaved method is a crucial tool for ensuring that all changes made by the user in the email editor are saved before closing or navigating away from the editor. By using this method, you can help prevent data loss and provide a smoother user experience.
save The save method is used to manually save user changes when autosave is disabled. This is useful in scenarios where you want to provide users with control over when their changes are saved, rather than relying on automatic saving.

To manually save user changes, call the save method on the actionsApi object of the StripoEditorApi.
js
const saveCallback = function (error) {
  //...
}
window.StripoEditorApi.actionsApi.save(saveCallback)
Detailed Explanation:
  • Method: save
  • Description: This method saves the current changes made by the user in the email editor. It is particularly useful when autosave is disabled.
  • Parameter:
    • saveCallback (function): Callback that is called then all changes are saved. If there are errors during save, then the error param will contain error details.
Use Cases:
  1. Manual Save Control: Provide users with the ability to manually save their changes, which can be useful in scenarios where users prefer to save their work at specific points rather than relying on autosave.
  2. Autosave Disabled: In situations where autosave is disabled for performance or user preference reasons, the save, method ensures that changes can still be saved manually.
  3. Custom Save Triggers: Implement custom triggers for saving, such as a "Save" button or saving changes before performing other actions like closing the editor or switching templates.
undo The undo method is used to revert the last change made by the user in the email editor. This is useful for providing a seamless editing experience by allowing users to easily correct mistakes or revert changes.

To undo the last user change, call the undo method on the actionsApi object of the StripoEditorApi.
js
window.StripoEditorApi.actionsApi.undo()
Detailed Explanation:
  • Method: undo
  • Description: This method undoes the most recent change made by the user in the email editor.
  • Parameters: None.
Use Cases:
  1. Error Correction: Allow users to quickly revert unintended changes or mistakes.
  2. Editing Flexibility: Enhance the editing experience by providing easy access to undo actions, making it simple to experiment with different designs and revert if needed.
  3. User Control: Give users more control over their editing process, improving overall usability and satisfaction.
redo The redo method is used to reapply the last change that was undone by the user in the email editor. This feature complements the undo functionality by allowing users to restore changes they have previously reverted.

To redo the last undone user change, call the redo method on the actionsApi object of the StripoEditorApi.
js
window.StripoEditorApi.actionsApi.redo()
Detailed Explanation:
  • Method: redo
  • Description: This method undoes the most recent change made by the user in the email editor.
  • Parameters: None.
Use Cases:
  1. Reversing an Undo: Allow users to easily reapply a change that they have previously undone, providing flexibility in the editing process.
  2. Editing Flexibility: Enhance the editing experience by allowing users to navigate back and forth between changes, making it easier to experiment with different designs and options.
  3. User Control: Give users more control over their editing process, improving overall usability and satisfaction.
showAmpErrorsModal The showAmpErrorsModal method is used to display AMP validation errors in the Stripo preview mode if any errors exist in the email template. This feature helps users identify and address AMP-related issues directly within the preview interface.

To display AMP validation errors, call the showAmpErrorsModal method on the actionsApi object of the StripoEditorApi.
js
window.StripoEditorApi.actionsApi.showAmpErrorsModal(
  ampErrors,
  [
    {
      text: 'Preview',
      action: () => {
        console.log('"Preview" button clicked')
      },
    },
  ],
  () => {
    console.log('"Close" button clicked')
  },
  () => {
    console.log('"Fix in Code Editor" button clicked')
  }
)
Detailed Explanation:
  • Method:showAmpErrorsModal
  • Description: This feature helps to notify users about AMP errors and help them fix the bugs.
  • Parameters:
    • ampErrors (array of string): An array of AMP errors received after calling the compileEmail function. This array contains details about each error that needs to be addressed.
    • userSuccessButtons (array of objects with ‘text’ and ‘action’ keys): An array of external buttons that may be displayed in the preview window if there are no validation errors. These buttons provide additional actions for the user when no errors are present.
    • onCancel (function): A callback function that is called when the user closes the preview window. This function allows the editor to handle the user's cancellation action appropriately.
    • onSubmit (function): A callback function that is called when the user clicks the "Fix in Code Editor" button if there are any errors. This button is displayed only if the codeEditorButtonId was provided during the Plugin initialization. The function allows users to directly navigate to the code editor to fix the identified errors.
Use Cases:
  1. Error Identification: Display AMP validation errors to help users quickly identify and address issues in their email templates.
  2. Preview Enhancements: Provide additional functionality in the preview mode, such as external action buttons, to improve the user experience.

Email Metadata API ​

The emailMetadataApi provides methods for accessing and managing the metadata associated with an email template in the Stripo email editor. This API allows users to retrieve and update metadata such as the email title and preheader, facilitating integration with external systems and enhancing the customization of the email editing experience.

Available Methods:

MethodDescription
getTitle The getTitle method is used to retrieve the current title of the email template within the Stripo email editor. This method allows you to access the title that has been set for the email template, which can be useful for displaying or managing the title within your application.

This is typically done when you want to synchronize the title displayed in your application with the title used in the editor.

Sample:
js
const callback = function (title) {
  if (title) {
    console.log('Current email title:', title)
  } else {
    console.log('No title is specified for the email in the editor.')
  }
}
window.StripoEditorApi.emailMetadataApi.getTitle(callback)
Detailed Explanation:
  • getTitle Method: This is called on the StripoEditorApi.emailMetadataApi object to retrieve the current title of the email template.
  • Callback Function: The callback function is defined to handle the returned title. It receives a single parameter:
    • Title: The current title of the email template as a string. If the title is undefined, it indicates that no title has been specified for the email in the editor.
  • Handling Undefined Title: If the method returns undefined, it means that the email template currently does not have a title set in the editor. This is important to check to avoid unexpected behavior in your application.
Use Cases:
  • Displaying the Title: You can use the getTitle method to display the current email title within your application's UI, ensuring that users see the correct title as they work with the template.
  • Title Synchronization: If your application has a custom field for managing the email template's title, this method is essential for retrieving and displaying the current title in your interface. This ensures that any title changes made within the editor are reflected in your application.
setTitle The setTitle method is used to update the title of the email template within the Stripo email editor. This method allows you to dynamically change the email title, which can be particularly useful when customizing or personalizing templates based on specific criteria or user inputs.

This is typically done when you want to set or update the title of the email to reflect the content or purpose of the template during the editing process.
js
const newTitle = 'Welcome Email'
window.StripoEditorApi.emailMetadataApi.setTitle(newTitle)
Detailed Explanation:
  • setTitle Method: This is called on the StripoEditorApi.emailMetadataApi object to update the title of the email template.
  • Title Parameter: The newTitle parameter represents the new title to be set for the email template. It should be passed as a string.
  • Updating the Title: By calling this method, the title of the email template is immediately updated within the editor interface.
Use Cases:
  • Custom Title Management: If the application owner has a custom field to display and manage the title of the opened email template within the editor, this method becomes crucial. If a customer updates the title through this custom field, it’s essential to call the setTitle method to ensure the template's title is updated within the editor, as this title will be reflected in the <title> tag of the editor.
getHiddenPreHeader The getHiddenPreHeader method is used to retrieve the current hidden preheader of the email template within the Stripo email editor. The hidden preheader is an essential part of an email, as it is often displayed by email clients alongside the subject line, providing additional context to the recipient.

This method is typically used when you want to access the preheader text that is set within the editor, either for display in your application or for synchronization purposes

Sample:
js
const callback = function (preheader) {
  if (preheader) {
    console.log('Current hidden preheader:', preheader)
  } else {
    console.log('No hidden preheader is specified for the email in the editor.')
  }
}
window.StripoEditorApi.emailMetadataApi.getHiddenPreHeader(callback)
Detailed Explanation:
  • getHiddenPreHeader Method: This is called on the StripoEditorApi.emailMetadataApi object to retrieve the current hidden preheader of the email template.
  • Callback Function: The callback function is defined to handle the returned preheader text. It receives a single parameter:
    • Preheader: The current hidden preheader of the email template as a string. If the preheader is undefined, it indicates that no hidden preheader has been specified for the email in the editor
  • Handling Undefined Preheader: If the method returns undefined, it means that the email template currently does not have a hidden preheader set in the editor. Checking for this is crucial to avoid issues when displaying or processing the preheader in your application.
Use Cases:
  • Displaying the Preheader: You can use the getHiddenPreHeader method to display the current hidden preheader within your application's UI, ensuring that users can see the preheader as it will appear to email recipients.
  • Custom Preheader Management: When managing preheaders through your application, it’s important to use the getHiddenPreHeader method to fetch the current preheader before any updates. This ensures that your application always operates with the most up-to-date preheader, which is particularly important for email marketing campaigns.
setHiddenPreHeader The setHiddenPreHeader method is used to update the hidden preheader of the email template within the Stripo email editor.

This method is typically used when you want to set or update the hidden preheader text within the editor to ensure it accurately reflects the content or intent of the email.
js
const newPreheader = "Don't miss out on our latest updates!"
window.StripoEditorApi.emailMetadataApi.setHiddenPreHeader(newPreheader)
Detailed Explanation:
  • setHiddenPreHeader Method: This is called on the StripoEditorApi.emailMetadataApi object to update the hidden preheader of the email template.
  • Preheader Parameter: The newPreheader parameter represents the new hidden preheader text to be set for the email template. It should be passed as a string.
  • Updating the Preheader: By calling this method, the hidden preheader of the email template is immediately updated within the editor, ensuring that the preheader reflects the intended message.
Use Cases:
  • Personalizing Preheaders: You can use the setHiddenPreHeader method to dynamically set the hidden preheader based on user data or specific campaign requirements, enhancing email engagement by providing a relevant preview in the inbox.
  • Custom Preheader Management: If the application owner has a custom field to display and manage the hidden preheader of the opened email template in the editor, this method is crucial. If a customer updates the preheader through this custom field, it’s essential to call the setHiddenPreHeader method to ensure the template's preheader is updated within the editor, providing a seamless experience across different management interfaces.

Version History API ​

The versionHistoryApi provides methods for managing the version history of email templates in the Stripo editor. This API allows users to track changes, undo or redo actions, and restore previous versions of an email template.

Please be advised, that option can be activated or deactivated within the plugin configuration page in your Stripo account, on the Server Settings tab. If the option is disabled, the Version History feature will not be shown or function for any users of the plugin.

If you want to customize who can see and use the Version History feature, you can manage permissions individually using the Stripo User Permissions API.

Available Methods:

ParameterDescription
openVersionHistory The openVersionHistory method is used to open the version history of the email template within the Stripo editor. This method allows users to view, manage, and restore previous versions of their email templates.

To open the version history, call the openVersionHistory method on the versionHistoryApi object of the StripoEditorApi. You need to provide two callback functions: one to handle state changes and another to handle when the version history is closed.
js
const onStateChanged = function (state) {
  const prevPatch = state.previousPatch
  const currentPatch = state.currentPatch
  const nextPatch = state.nextPatch
  const currentPatchId = currentPatch.id
  const currentPatchDate = currentPatch.date
  const currentPatchDescription = currentPatch.description
  const currentPatchAuthorId = currentPatch.authorId
  const currentPatchAuthorName = currentPatch.authorName
}
const onVersionHistoryClosed = function () {}
window.StripoEditorApi.versionHistoryApi.openVersionHistory(onStateChanged, onVersionHistoryClosed)
Detailed Explanation:
  • Method:openVersionHistory
  • Description: Opens the version history for the email template, allowing users to view and manage previous versions.
  • Parameters:
    • onStateChanged (function): Callback function that handles state changes in the version history.
    • onVersionHistoryClosed (function): Callback function that handles the event when the version history is closed.
Callback Functions:
  1. onStateChanged: This function is triggered whenever there is a state change in the version history. It provides details about the previous, current, and next patches
    • Parameters:
      • state: An object containing the state of the version history.
        • previousPatch: Information about the previous version.
        • currentPatch: Information about the current version.
        • nextPatch: Information about the next version (if any).
  2. onVersionHistoryClosed (function): This function is triggered when the version history is closed.
Use Cases:
  1. Saving Templates: Allows users to review changes made to the email template over time, providing a detailed history of edits.
  2. Change Management: Facilitates better change management by providing visibility into who made changes and when.
closeVersionHistory The closeVersionHistory method is used to close the version history panel within the Stripo email editor. This method is useful for exiting the version history view and returning to the main editing interface.

To close the version history, call the closeVersionHistory method on the versionHistoryApi object of the StripoEditorApi.
js
window.StripoEditorApi.versionHistoryApi.closeVersionHistory()
Detailed Explanation:
  • Method:closeVersionHistory
  • Description: Closes the version history panel, returning the user to the main editing interface.
  • Parameters: None.
Use Cases:
  1. Exit Version History: Allow users to exit the version history view and return to the main editor after reviewing or restoring a previous version.
  2. UI Navigation: Simplify the user interface by providing a clear way to close the version history panel.
switchToMobilePreview The switchToMobilePreview method is used to switch the email editor to mobile preview mode within the Stripo email editor. This allows users to see how their email template will appear on mobile devices.

To switch to mobile preview mode, call the switchToMobilePreview method on the versionHistoryApi object of the StripoEditorApi.
js
window.StripoEditorApi.versionHistoryApi.switchToMobilePreview()
Detailed Explanation:
  • Method:switchToMobilePreview
  • Description: Switches the email editor to mobile preview mode, allowing users to view how their email template will look on mobile devices.
  • Parameters: None.
Use Cases:
  1. Mobile Optimization: Ensure that the email template looks good and functions correctly on mobile devices by previewing it in mobile mode.
  2. Responsive Design: Check the responsiveness of the email design and make necessary adjustments to improve mobile user experience.
  3. Quality Assurance: Perform quality checks to ensure that all elements of the email template are displayed correctly on mobile devices.
switchToDesktopPreview The switchToDesktopPreview method is used to switch the email editor to desktop preview mode within the Stripo email editor. This allows users to see how their email template will appear on desktop devices.

To switch to desktop preview mode, call the switchToDesktopPreview method on the versionHistoryApi object of the StripoEditorApi.
js
window.StripoEditorApi.versionHistoryApi.switchToDesktopPreview()
Detailed Explanation:
  • Method:switchToDesktopPreview
  • Description: Switches the email editor to desktop preview mode, allowing users to view how their email template will look on desktop devices.
  • Parameters: None.
Use Cases:
  1. Desktop Optimization: Ensure that the email template looks good and functions correctly on desktop devices by previewing it in desktop mode.
  2. Responsive Design: Check the responsiveness of the email design and make necessary adjustments to improve desktop user experience.
  3. Quality Assurance: Perform quality checks to ensure that all elements of the email template are displayed correctly on desktop devices.
previewVersion The previewVersion method is used to update the email preview to a specific version from the version history. This allows users to view how the email looked at a particular point in time.

To update the preview to a specific version, call the previewVersion method on the versionHistoryApi object of the StripoEditorApi, passing the version ID and a callback function to handle any errors.
js
const prevPatch = ...;
window.StripoEditorApi.versionHistoryApi.previewVersion(prevPatch.id,  function(error) {
  // handle error
});
Detailed Explanation:
  • Method:previewVersion
  • Description: Updates the email preview to the specified version from the version history.
  • Parameters:
    • versionId (string): The ID of the version to preview.
    • callback (function): A callback function that handles any errors encountered during the preview update.
Use Cases:
  1. Review Past Versions: Allows users to review how the email looked at a specific version, which can be helpful for understanding changes over time.
  2. Quality Assurance: Ensure that changes made to the email template did not introduce any issues by comparing different versions.
  3. Decision Making: Help users decide if they want to revert to a previous version by providing a visual comparison.
restoreVersion The restoreVersion method is used to restore the email to a specific version from the version history and then close the version history panel. This allows users to revert their email template to a previous state easily.

To restore the email to a specific version, call the previewVersion method on the versionHistoryApi object of the StripoEditorApi, passing the version ID, a success callback, and an error callback.
js
const prevPatch = ...;
window.StripoEditorApi.versionHistoryApi.restoreVersion(prevPatch.id,
function() {
  // do something on success
},
function(error) {
  // handle error
});
Detailed Explanation:
  • Method:restoreVersion
  • Description: Restores the email to the specified version from the version history and closes the version history panel.
  • Parameters:
    • versionId (string): The ID of the version to restore.
    • successCallback (function): A callback function that is executed on successful restoration.
    • errorCallback (function): A callback function that handles any errors encountered during the restoration process.
Use Cases:
  1. Revert to Previous State: Allows users to revert their email template to a previous state if recent changes are not satisfactory.
  2. Error Correction: Quickly correct errors by restoring a known good version of the email template.
  3. Version Management: Manage email versions effectively by providing the ability to easily restore and close the version history.

Code Editor API ​

The codeEditorApi provides methods for interacting with the code editor within the Stripo email editor. This API allows users to open the code editor, close the code editor, and retrieve the current state of the code editor panel.

ParameterDescription
getCodeEditorState The getCodeEditorState method is used to retrieve the current state of the code editor panel within the Stripo email editor. This method provides detailed information about the code editor's state, including whether it is open, and the status of various panels and dimensions.

To retrieve the current state of the code editor panel, call the getCodeEditorState method on the codeEditorApi object of the StripoEditorApi.
js
const state = window.StripoEditorApi.codeEditorApi.getCodeEditorState()
/*
{
  "isOpen": false,
  "isDefaultCSSOpen":true,
  "isCustomCSSOpen": false,
  "containerHeight": 80,
  "defaultCSSPanelWidth": 100,
  "customCSSPanelWidth": 100
}
*/
Detailed Explanation:
  • Method:getCodeEditorState
  • Description: Retrieves the current state of the code editor panel.
  • Return Value: An object containing the current state of the code editor panel with the following properties:
    • isOpen (boolean): Indicates whether the code editor is open.
    • isDefaultCSSOpen (boolean): Indicates whether the default CSS section is open.
    • isCustomCSSOpen (boolean): Indicates whether the custom CSS section is open.
    • containerHeight (number): The height of the code editor container in pixels.
    • defaultCSSPanelWidth (number): The width of the default CSS section in pixels.
    • customCSSPanelWidth (number): The width of the custom CSS section in pixels.
Use Cases:
  1. State Monitoring: Monitor the state of the code editor to make decisions based on whether it is open or closed and the status of its panels.
  2. UI Adjustments: Adjust other parts of your application's UI based on the dimensions and state of the code editor panel.
  3. Conditional Logic: Implement conditional logic that depends on the state of the code editor, such as enabling or disabling certain features.
openCodeEditor The openCodeEditor method is used to open the code editor within the Stripo email editor. This method allows users to start editing the HTML and CSS of their email templates directly.

To open the code editor, call the openCodeEditor method on the codeEditorApi object of the StripoEditorApi.
js
window.StripoEditorApi.codeEditorApi.openCodeEditor()
Detailed Explanation:
  • Method:openCodeEditor
  • Description: Opens the code editor, allowing users to edit the HTML and CSS of their email templates.
  • Parameters: None.
Use Cases:
  1. Direct Code Editing: Allow users to open the code editor to make direct changes to the HTML and CSS of their email template.
  2. Advanced Customization: Provide advanced users with the ability to customize the email template beyond what is possible with the visual editor.
  3. Debugging: Enable users to debug and fix any issues in the HTML or CSS code of their email template.
closeCodeEditor The closeCodeEditor method is used to close the code editor within the Stripo email editor. This method allows users to exit the code editing mode and return to the main visual editing interface.

To close the code editor, call the closeCodeEditor method on the codeEditorApi object of the StripoEditorApi.
js
window.StripoEditorApi.codeEditorApi.closeCodeEditor()
Detailed Explanation:
  • Method:closeCodeEditor
  • Description: Closes the code editor, returning the user to the main visual editing interface.
  • Parameters: None.
Use Cases:
  1. Exit Code Editing: Allow users to close the code editor after making changes and return to the visual editor for further adjustments.
  2. Simplify UI: Provide a clear way for users to exit the code editor, ensuring a smooth transition back to the visual editing interface.
  3. User Workflow: Enhance the user workflow by allowing them to toggle between code editing and visual editing as needed.

Dev Tools API ​

The devToolsApi provides methods for interacting with developer tools of the Stripo editor. This API facilitates the handling of exceptional situations and issues with the editor.

ParameterDescription
dump The dump method is used to create a snapshot of the editor at the time of invocation for further analysis by the Stripo team and bug fixing.

To create a dump, call the dump method on the devToolsApi object of the StripoEditorApi.
js
window.StripoEditorApi.devToolsApi.dump()
Detailed Explanation:
  • Method: dump
  • Description: Creates a snapshot of the editor at the time of invocation.
  • Parameters: None.
Use Cases:
  1. Error handling: Allows users to capture a snapshot of the editor and attach it directly to a support ticket.

© 2025 Stripо.email — Next Generation Email Editor.