If you want to create your own blocks in the editor, flexibly customize their behavior and manage the structure of your email, you can use the Stripo editor extensions.

This feature is only available for Business or Enterprise plans.

Firstly, you will need to figure out what can be done and our GitHub repository with examples of ready-made extension blocks will help you with this.

Ready? Getting started! :)

1) So, please select the desired example extension from the extensions folder that you want to integrate into the editor

2) Install the npm install program (it is downloaded as a package and its dependencies), and then run the npm i command in the developer console in order to pull up and connect the necessary modules from the Internet.

It is important that npm install runs in the same location as the package.json file.

3) Replace the sample code from GitHub with your product logic. Replace the data in the configuration with your own variables or completely change the logic of the block.

4) Compile this code with the command: npm run build

The finished code will be saved in the dist folder.

All you have to do is save the compiled extension files on your server and, when initializing the Stripo editor, insert the below example code into the parameters:

window.Stripo.init({

...,
"extensions": [
{
"globalName": "YourExtensionName",
"url":"https://your.hosting/main.hash.extension.js"
}
]
});

5) During initialization, the editor will load the standard product blocks with your extension and you can test the work of the block (s).

Doesn't sound very clear anyway? Let's take a look at a real example!

Let's say you have already had the logic of the block that is opened and described it in your js file.

Next, you need to initialize the plugin and apply this type of extension to the window.Stripo.init function:

{ 

"globalName": "ProductBlockExtension",
"url":"https://rcrm.stripocdnplugin.email/content/retailcrm/samples/product/0.1/main.092072eb39ff67666a45.extension.js"

}

If you have additional parameters or variables that must be provided to the user for selection in a block in your own application, you must define them additionally during initialization.

For example:

"productBlock": { 
"enabled": true,
"precondition": {
"enabled": true,
"count": {
"min": 1,
"max": 12,
"def": 3
}
},
"recommendation": {
"groups": [
{
"id": "group1",
"name": "Чехлы для iPhone",
"count": 6
},
{
"id": "group2",
"name": "Аксессуары",
"count": 4
}
]
}
}

If there are no such parameters, then the globalName of the extension and a link to js-file will be enough.

As a result, you simply initialize the plugin and use the extension like a regular block.

After clicking on the block in the menu, you can select the same data that you described in the configuration earlier.

If you still have questions, please write to us at support@stripo.email or in the support chat.

Did this answer your question?