1. You should define 2 containers: one for the Stripo settings panel (where controls will be located) and the other one for the Stripo preview area (the area where the email template you will be working with will be displayed).
<div id="stripoSettingsContainer"></div>
<div id="stripoPreviewContainer"></div>

From the perspective of UI, it is just a 2-div area (Settings Panel and Preview Area) and one JS that can be configured in accordance with your needs to be embedded into these areas.

Please be advised:

  • you may set the width of each container according to your preferences;
  • the height of "stripoPreviewContainer" is, by default, stretched from the place where it was inserted to the bottom of the screen. To set another value, you have to set the inlined max-height style for this container;
  • the height of "stripoSettingsContainer" is, by default, stretched to the height of the content and limited by the bottom of the screen. To set another value, you have to set the inlined max-height style for this container.

For example, max-height: calc (100vh - 100px), where 100px is the total height of the top and bottom panels. The max-height style must be specified for each panel separately, if not specified, the height will be adjusted by default, from the insertion point to the bottom of the screen.

2. Next, you have to include the script taken from the Application details page in your Stripo account.

If you want to host Stripo Plugin assets on your end you can download them from the Stripo Github repo: https://github.com/ardas/stripo-plugin.

Done. You are ready  for Plugin initialization

Did this answer your question?