How to use the POWR Editor

The POWR Editor consists of two sections:

• Settings: The panel on the left on your App's /standalone page.
• View: The preview of your App on the right.

Any changes you make to the Settings should immediately be reflected in the View. In the pictured screenshot, a background color of #ecfffb was selected in the 'Background Color' setting. That color is shown in the View as the background color of the form. 

Settings Panel

The Settings are structured in a way where Design is separated from things that affect the content and the functionality of your App.

Depending on the app type, the first or second tab typically lets you add Content to your App, such as title, form elements, product details, etc.

In more complex and feature-rich Apps, you might also see additional tabs in which you can configure integrations for payments, display controls, etc.

The Design options are normally located in the last tab of the editing steps. All Apps have settings that let you adjust fonts, colors, borders, and more. Plus, you'll also find an Advanced section where you can add your own CSS and JS code to your App.

⚠️ As of October 2021 for security reasons, POWR editor doesn't support the Custom JS
field. If you would like to add any JS customization, kindly contact the Support Team at support@powr.io. As security is a top concern at POWR, JS scripts will be added to your app only after verification.

App View

The View represents what the App will look like on your website. Please note that the dimensions of your App might change on your website depending on which content container you are placing the App in. Content, fonts, colors, etc. should be identical to what you are seeing in the App View.