Topol Documentation

Appearance

Return to top
On this page

Custom block

Having a custom block feature in an email builder can be beneficial for a few reasons:

  • It allows developers to insert their own custom HTML code into the email. This can be useful if they want to add specific functionality or design elements that are not available through the email builder's pre-designed blocks.

  • Custom blocks allow developers to tailor the email builder to their specific needs and requirements. They can create blocks that fit the design and branding of their company, rather than being limited to the options provided by the email builder.

  • Developers can set the icon and name of the custom block, making it easy for users of the email builder to identify and locate the block when creating emails.

Overall, having a custom block feature in an email builder provides greater flexibility and customization for developers, enabling them to create emails that better meet their specific needs and goals.

How to use

By adding the following configuration, we can customize the TOPOL OPTIONS with ease.

ts
customBlocks: [
  {
    key: "custom-block-key",
    name: "My Custom Block", //displayed in menu
    dialog: true, //edit content in dialog (currently only custom dialog)
    icon: "box", // or rss at the moment
    content: "<p>initial content</p>",
    dialogButtonText: "Open Custom Dialog",
    disabled: false, //disabled button for certian users
  },
];

When user clicks on the open dialog, in the above example we gave "Open Custom Dialog" text to the button. Following callback is fired:

ts
callbacks: {
    onOpenCustomBlockDialog(customBlock) {
        // open your custom dialog here, retreive edited data
        // you can access current content with customBlock.content
        // once the dialog is closed we can update the current block using following function

        // Example:
        let editedContent = prompt(customBlock.content);
        TopolPlugin.updateCustomBlockContent(editedContent);
    }
}