Create zones in your outcomes

Learn how to create and customize zones in your feature outcomes, including configuring content, style, and display settings.

In your feature outcomes, you can define customized components that will be displayed in a specific zone on the page, such as a footer or pop-up window.

You only need to configure the content and style within the zone and let Zephr manage how the zone is presented on the page. The available zones include:

Sticky Footer
Pop-Up

Each zone could contain one or more custom components, which can be selected from the existing template components in the Component Library or created from scratch.

You can also customize the style of a zone by applying CSS at the zone level.

To set up a zone, perform the following steps:

Navigate toAdd an outcome > Edit an outcome .
Scroll down to the Placement Specific Components section.
Select a zone to add by clicking the corresponding Add button, for example, + Sticky Footer .
Click Add a Component or Form to add a component or form to the footer. You can either add from the Component Library or create a new custom component block.

To add from the Component Library, perform the following steps: See Component Library for more information.
1. Select the component.
2. Give a title to the component.
3. Decide the version that you want to use.
4. Update the values of the variables set for the template Note that you can preview the template from the preview window.
5. Click Save.
To create a new custom component block or form, select the component block or type of form you want to create, and then complete the required configurations. For more information, see the relevant topics in Feature Outcomes .
Note:
- Save your finalized component or form to Component Library as a template for future use.
- You can set up more than one outcome in the zone by repeating this step.

Complete the interaction configuration:
- Display : Specify when the zone is displayed.
  1. When Page Loads : Display the zone when the page is loaded.
  2. Scroll Down : Display the zone when the user scrolls down. Note: The zone will load immediately if the end user is already at the bottom of the page. Additionally, if the page content is shorter than the user's screen height and no scrolling is possible, the zone will also load right away.
  3. After Delay : Display the zone X seconds after the page is loaded.
  4. Set up via Javascript : Initiate the zone using Javascript.
    1. To activate a footer zone: Zephr.openFooter();
    2. To activate a pop-up zone: Zephr.openModal().
      Note: On your website, you can preview the zone by calling the above functions in the browser's console. Ensure that you access the feature in a way that will trigger the outcome containing the zone to be tested.
- Closure : Determine whether the zone can be closed.
- Page Conte nt : Determine whether the content beneath and/or behind the zone can be scrolled.
Configure the zone-level CSS: Click the CSS configuration button at the bottom right corner to apply CSS to the zone. The following selectors are defined as default:
- For the footer zone:
  1. #zephr-zone-footer : The whole footer zone
  2. #zephr-footer-close : The close button
- For the pop-up zone:
  1. #zephr-zone-popup : The whole pop up zone
  2. #zephr-popup-close : The close button
It is recommended that you only add the zone-level CSS here.
Note: If you already use the custom component blocks to build your own footer or pop-ups, to transition to using Zones, you need to decide how to split the style applied at the zone level from the style applied to specific components.
The following screenshot demonstrates a sticky footer zone that contains multiple outcomes:

Welcome to Zuora Product Documentation

Explore our rich library of product information

Create zones in your outcomes

zuora-footer