Experience Editor: Design Step
The design step is present in the editor for all Experiences of the Lytics provider. It lets you customize the appearance and content of the widget displayed to your users on your website. This step offers layout and position options as well as a custom CSS option.
Choosing a layout
First, choose your Experience's layout. There are five different layout options, and their availability depends on the tactic you selected.
- 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.
- Slideout: A small widget that occupies a corner of the screen. It does not interrupt the user's current task.
- Bar: A short widget that takes the full width of the screen and sits at the top of the page.
- Sticky Bar: A bar that scrolls with the page.
- Gate: A modal that cannot be closed unless the call to action is fulfilled.
Campaign type layout compatibility
| Layout | Drive Traffic | Collect Leads | Present a Message | Recommend Content |
|---|---|---|---|---|
| Modal | ✔ | ✔ | ✔ | ✔ |
| Slideout | ✔ | ✔ | ✔ | ✔ |
| Bar | ✔ | ✔ | ||
| Sticky Bar | ✔ | ✔ | ||
| Gate | ✔ |
Adding content
Different content fields are supported by different Experience layouts or tactics.
| Layout | Modal | Slideout | Bar | Sticky Bar | Gate |
|---|---|---|---|---|---|
| Headline | ✔ | ✔ | ✔ | ||
| Message | ✔ | ✔ | ✔ | ✔ | ✔ |
| Tactic | Drive Traffic | Capture Leads | Present a Message | Recommend Content |
|---|---|---|---|---|
| Call to action | ✔ | ✔ | ||
| Image URL | ✔ | ✔ | ✔ |
Including an image for your Experience is optional, the image will be shown above or beside the messaging of the Experience. Any image you include must be hosted publicly as this input takes a URL but not an upload.
Setting position
Experience widgets can be displayed in different positions depending on their layout. The available positions will show up as a darker gray while the active position is blue.
| Layout | Modal | Slideout | Bar | Sticky Bar | Gate |
|---|---|---|---|---|---|
| Top-left | |||||
| Top-center | ✔ | ✔ | |||
| Top-right | |||||
| Center-left | |||||
| Center-center | ✔ | ✔ | |||
| Center-right | |||||
| Bottom-left | ✔ | ||||
| Bottom-center | ✔ | ||||
| Bottom-right | ✔ |
Theming the Experience
There are three ways to theme your Experience.
Choose a theme: Lytics provides Light and Dark themes you can select.
Build a custom theme: There are eight color options available to build a theme in the Experience editor:
- Background: The color of the background color of the Experience.
- Headline: The text color of the headline message.
- Body Text: The text color of the body text.
- Close Button: The color of the '×' shape used as a close button.
- Submit Button Text: The color of the text in the submit/call-to-action button.
- Submit Button: The background color of the submit/call-to-action button.
- Cancel Button Text: The color of the text in the cancel/dismiss button.
- Cancel Button: The background color of the cancel/dismiss button.
Use Custom CSS: Use your own custom CSS to match the Experience's styling with your site's design. Experiences are built using the Pathfora SDK. Read about using custom CSS with Pathfora.