What are modules?
Modules are universal elements of an email template that help reduce the time it takes to create an email.
If you want to offer your users some interesting structures with a non-standard layout or provide the opportunity to save particular elements separately from the whole email (structures, containers, stripes) for future use and the easy drag-and-drop functionality, you can fulfill it with modules.
How to configure the Library of Custom Modules?
Similar to the Image Gallery, a user may see as many folders in the Modules tab as you've configured for your Plugin application.
For example, below, you may see 3 folders in the Modules section, called "My Blocks", "Template Blocks", and "General Blocks".
These folders were configured this way on the application details page.
In this section, you can manage:
the number of folders;
their names. You have the option to specify what names a created folder should have in every supported language;
the storage key ID that will be assigned to modules and will be used as an identifier;
and can even grant respective permissions.
According to the configurations, every time you initialize the plugin, you pass on the userId params so that the final key assigned to every module looks like this: account_${userId} (where the "${userId}" is the value of the account).
You can set up the second folder (For example, "Template blocks") with the path like account_000000 (instead of "000000," you can transmit anything you want) and transmit the accountId=000000 when you initialize the plugin as an Admin.
In this case (when you're the admin), you will also save all Modules to the "My blocks" folder, but all modules from this folder will also be visible to all other users in the "Template blocks" folder, as we placed the static value account_000000 in the path for the "Template blocks" folder.
Synchronized Modules:
Imagine that your company needs to change the design or some contact details in all your email templates. Does it mean that you will have to change all the modules manually? Luckily, no. With Synchronized Modules, the process is much more quickly and easier. If the Synchronized Module control is activated, then changes made to the module will be applied to all templates where this module has been used with the synchronization option activated.
How to provide your customers with the Synchronized Module option?
To enable the Synchronized Modules feature, simply initiate the plugin by using the specified parameter:
modules:
{
syncModulesEnabled: true,
}
Your customers now have the option to save their modules and activate the synchronized module feature.
If we’ve done everything right, then the "Sync OFF" symbol will appear on the present email template, as shown below.
We’ve built a synchronizable module/content element, but the synchronization option has not been activated yet. To finally activate this option, click this "OFF" symbol, then in the settings panel, toggle the "Synchronized module" control.
Done! Let's add the Synchronized module to another email template.
Now we need to edit a piece of information of this module and update the module in a previous email template. I changed the logo in the header.
The "OFF" symbol appears on my content module again — click it to activate.
Once you’ve clicked it, go to the settings panel; there, you will be asked to "Update" your module.
Done! Changes made to this module have been applied to all the email templates where we'd used this module.
Furthermore, you can restore your module, which means that the module content will be restored from the library.
And you can make an unsynchronized module. Your changes will be applied only in this template, breaking the link with the library.
Update - Once you’ve clicked it, the module will be updated in the module's library;
Restore - When you choose this option, the module will be changed to default;
Make unsynchronized - Module became as standard (unsynchronized).
Please note that if a user lacks permission to modify the module, the "Update module" option will be hidden from the settings panel.
How to support Synchronization on your end?
Let's take a look behind the hood and examine the logic on the module's back-end.
If the mentioned above parameter is specified (syncModulesEnabled: true),
while plugin initialization, the editor requests its database for all the saved synchronized modules for all the folders shown in the plugin based on
their configurations (we consider the data we receive in the apiRequestData parameter).Also, you need to enable parameter eventHandler: (type, data).
This parameter will help you receive notifications about modules if they were saved or updated.When both functions syncModulesEnabled: true and eventHandler: (type, data)
are activated and passed during initialization, on your side, you synchronize your data, meaning you already store email templates (with HTML including our classes and compiled HTML). Additionally, you need to make parameters for which template IDs correspond to which sync module IDs.Once our database receives such modules, the editor scans the HTML of the template opened in the editor to find if there is any synchronization module inserted and activated.
If so - the editor replaces the content of this module with content saved in the Library.If the input is passed with value: true, the getTemplate method returns the HTML, CSS, and arrays of IDs of synchronization modules used in this template, along with the HTML, CSS, and IDs of these modules.
The owner of the Plugin must store this information in its DB: which sync module IDs belong to which template.
If auto-saving is turned on in the editor, our Back-end will return the HTML and CSS of this template, as well as arrays of IDs of synchronization modules used in this template (the very last parameter) in this method: https://stripo.email/plugin-api/#autosave-option.
Once the owner saves/updates the synchronization module into the library while working with the template, the editor fires an event that must be read by the customer’s app to start the synchronization of other templates where this module is also used.
To do this, please run the “Compile email template” method for all templates that contain that module.
How to deactivate the Module menu?
You can turn off this feature so the Library section won’t display in the editor at all.
In this case, there won’t be an option to save selected elements from the context menu.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.