Create zones in your outcomes

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

Zones allow you to configure the content and styling for a specific page area while Zephr manages the zone placement and display behavior.

The following zone types are available:

Sticky Footer
Pop-Up

A zone can contain one or more components or forms from the Component Library, or custom components created within the outcome.

To create a zone in a feature outcome, complete the following steps:

> E .
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 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.

Navigate to Add an outcome > Edit an outcome.
Scroll to the Placement Specific Components section.
Select the zone type to add:
- + Sticky Footer
- + Pop-Up
Select Add a Component or Form.
Add a component or form using one of the following methods:
- Add an existing component from the Component Library.
- Create a new custom component block or form. See Feature Outcomes.
Optional: Add additional components or forms to the zone.
Complete the interaction configuration:
- Display : Controls when the zone is displayed:
  1. When Page Loads : Display the zone when the page loads.
  2. Scroll Down : Displays 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 after a specified delay.
  4. Set up via Javascript : Displays the zone using JavaScript. Use the following functions to trigger zones:
    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 : Controls whether users can close the zone.
- Page Content : Controls whether the content beneath or behind the zone can be scrolled.
Configure the zone-level CSS. Select CSS configuration 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:
Click Save.

Welcome to Zuora Product Documentation

Explore our rich library of product information

Create zones in your outcomes

zuora-footer