Mobile-first Email Template

We make sure that every email you create in our editor is mobile-first by design. Therefore, Topol Plugin offers a built-in mobile preview mode to help you see exactly how your email will appear on smaller devices.

To enable mobile-first support, include the following option in your TOPOL_OPTIONS configuration:

mobileFirstEnabled: true; // to disable, set to false or skip

Switching Between Views via API

If you're using a custom top bar or custom interface instead of the default one, you can control the device preview using the Plugin’s built-in methods:

TopolPlugin.changeEmailToMobile(); // display mobile preview

TopolPlugin.changeEmailToDesktop(); // display desktop preview

Toggle Visibility of Hidden Elements

Topol Plugin also supports responsive visibility control, allowing you to show or hide specific blocks or structures based on the device type (mobile or desktop).

To manually toggle visibility for all hidden elements in the editor preview, use:

TopolPlugin.toggleBlocksAndStructuresVisibility();

When this feature is turned on, hidden elements appear with lower opacity so users can still interact with them. When turned off, the blocks are fully hidden from the canvas view.

Track Visibility Changes

When all elements in certain device type are hidden, we fire a callback stating you should switch the visibility of this feature to true.

You can handle this with the following callback:

callbacks: {
  //other callbacks...

  onBlocksAndStructuresVisibilityChange(value: boolean) {
    // Value is true when hidden elements are visible, false when fully hidden
    // You can trigger your own UI updates here
  }
}