Custom Blocks

If you want full control over block saving, fetching, and management, you can use the following callbacks for saving, fetching, and manage custom block.

mailui.init({
    saveToBlock: {
      enabled: true,
    },
});

Fetch Block Listener #

Collect user-uploaded images, gather metadata, and return them as a list along with additional metadata using the done(data[], meta: object) function.

mailui.registerProvider(
    "block:collections",
    async (params: { page: number; perPage: number }, done: Function) => {
        done(data, meta);
    }
);

Params #

Property	Description	Type	Default
page	The current page number	number	1
perPage	The number of items displayed per page	number	20

Callback Data #

Property	Description	Type	Default
id	Unique number	any	-
name	Block specific name	string	-
thumbnailUrl	Thumbnail full url	string	-
elementType	The element type should be one of the following	SECTION ROW COLUMN ELEMENT	-

Callback Meta #

Property	Description	Type	Default
page	The current page number	number	1
lastPage	The total number of pages	number	-
perPage	The number of items displayed per page	number	20
total	The total number of items	number	-

Fetch JSON Data #

Triggers when a user uploads files, handling and processing them as needed.

mailui.registerProvider("block:collectionData",
    async (params, done) => {
        const data = {}; // template JSON
        done(data);
}
);

Params #

Property	Description	Type	Default
id	Unique number	any	-
name	Block specific name	string	-
thumbnailUrl	Thumbnail full url	string	-
elementType	The element type should be one of the following	SECTION ROW COLUMN ELEMENT	-

On Upload Listener #

Triggers when a user uploads files, handling and processing them as needed.

mailui.registerProvider("block:saved", async (params, done) => {
        try {
            // Run your save block code here
        
            const block = {}; 
            done(block);
        } catch (error) {
            done(null)
            console.log("An error has occurred during save data.");
        }
      }
    );

Params #

Property	Description	Type	Default
thumbnail	Uploaded BLOB file type	file	-
name	Block specific name	string	-
data	JSON data	object	-
elementType	The element type should be one of the following	SECTION ROW COLUMN ELEMENT	-

Block Properties #

Property	Description	Type	Default
id	Unique number	any	-
name	Block specific name	string	-
thumbnailUrl	Thumbnail full url	string	-
elementType	The element type should be one of the following	SECTION ROW COLUMN ELEMENT	-

Remove Listener #

Triggers when a user remove block, handling and processing them as needed.

mailui.registerCallback("block:removed", async (params, done) => {
    done();
});

Params #

Property	Description	Type	Default
id	Unique number	any	-
name	Block specific name	string	-
thumbnailUrl	Thumbnail full url	string	-
elementType	The element type should be one of the following	SECTION ROW COLUMN ELEMENT	-

Custom Blocks

Fetch Block Listener #

Params #

Callback Data #

Callback Meta #

Fetch JSON Data #

Params #

On Upload Listener #

Params #

Block Properties #

Remove Listener #

Params #

Explore Our Email Builder