Campaign Editor: Design Step

The design step is where the appearance of the campaign widget is customized. It offers a range of options from layout, to copy, to position. It also includes the option for a custom CSS class for further visual customization.

The first decision to make when designing a widget is what layout to use. It will dictate what options are available later on. There are five different layout options, and the availability of these options are based on the type of the campaign being edited.

1. Modal: A full screen takeover experience that can be closed by clicking outside the modal, clicking the close button of the modal, or taking the intended call to action.
2. Slideout: A small widget that occupies a corner of the screen. It does not interrupt the user's current task.
3. Bar: A short widget that takes the full width of the screen and sits at the top of the page.
4. Sticky Bar: A bar that scrolls with the page.
5. Gate: A modal that cannot be closed unless the call to action is fulfilled.

Campaign widgets generally accept a Headline message and a Body message. However, both the Bar and Sticky Bar layouts only have one line of text, which is considered the Body message. Additionally, Drive Traffic and Collect Lead campaigns have Call to Action buttons, and the text for the button can be specified using the Call to Action message.

There is also an optional Image URL input. Any Image URL set here will be shown in the campaign widget above or beside the messaging.

Note: Lytics does not offer any image hosting. All images must be hosted elsewhere publically to work with Lytics Campaigns.

Lytics campaigns can show up in various positions on a web page depending on the layout of the widget. The allowed positions will always show up as a dark gray color while the unallowed positions will be light gray. The active position is blue.

There are three ways to theme a campaign.

1. Choose a theme: Lytics provides a Light and Dark theme out of the box.
2. Build a custom theme: There are eight color options (described below) available to build a theme in the campaign editor.
3. Use Custom CSS: By using your own custom CSS, Lytics provides no theme information, relying on CSS to style all campaign widget elements.

1. Background: The color of the background color of the widget.
2. Headline: The text color of the headline message.
3. Body Text: The text color of the body text.
4. Close Button: The color of the '×' shape used as a close button.
5. Submit Button Text: The color of the text in the call-to-action (or submit) button.
6. Submit Button: The background color of the call-to-action (or submit) button.
7. Cancel Button Text: The color of the text in the cancel (or dismiss) button.
8. Cancel Button: The background color of the cancel (or dismiss) button.

The Lytics Campaign Widgets are built using the Pathfora SDK. This SDK has its own docs. Read about using custom CSS with Pathfora.