Popup editor

Alan Studio comes with the popup editor – a built-in tool that allows you to preview your Alan button popups and edit the popup code in a convenient way. The editor allows you to write code in separate HTML, CSS and Params panes and see the end results in the real-time preview area.

To open a popup in the popup editor:

1. In the code editor, to the left of popup code, click the edit icon.

2. If you have several popups in the dialog script, in the left pane, select the popup you want to preview.

3. To prettify the popup code and present it in a structured way, at the top of the editor, click Format HTML, Format CSS and Format Params.

4. Edit the HTML, CSS code and update popup params data if needed.

5. In the lower part of the editor, select the platform and device on which you want to preview the popup. You can preview the popup on a single device or choose to display all versions at once: browser, tablet and mobile.

6. To change the background, click the Device background color picker and choose the color.

7. To save the results, at the bottom of the left pane, click Save changes.

Note

To be rendered in the popup editor, the params object should only contain numbers, strings, Boolean values or arrays/objects constructed with these values. If your params object contains other types of values, the popup editor will fail to generate a real-time preview for your data. You can edit the params data directly in the editor. Mind, however, that these changes will not be saved.