Create a zone in your outcome

In your feature outcomes, you can define customised 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. Zephr will handle how the zone is displayed on the page. 

The following zones are available:

• Sticky Footer
• Pop-Up

Each zone could contain one or more custom components. You can either add existing template components from the Component Library or create custom components and forms from scratch.

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

To set up a zone, take the following steps:

1. Navigate to the Add an outcome, or Edit an outcome screen

2. Scroll down to the Placement Specific Components section

3. Select a zone to add by clicking the corresponding Add button, for example + Sticky Footer

4. 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 Component Library, take the following steps:

     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

     See Component Library for more information.

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

     Tip: You can save your completed component or form to Component Library as a template.

   Note: You can set up more than one outcome in the zone by repeating this step.

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

        3. After Delay: Display the zone X seconds after the page is loaded.

        4. Set up via Javascript: Trigger the zone using Javascript. To trigger a footer zone: Zephr.openFooter(); To trigger a pop up zone:  Zephr.openModal(). Tip: On your website, you can preview the zone by calling the above functions in the browser's console. You need to make sure you are accessing the feature in a way that will trigger the outcome containing the zone to be tested.

        Note: The zone will load straight away if the end user is already at the bottom of the page.

      • Closure: Whether the zone is closable.

      • Page Content: Whether the content below and/or behind the zone is scrollable.

   6. 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 style applied to specific components.

   The screenshot below demonstrates a sticky footer zone that contains multiple outcomes.

   

   Data Layer Events related to the pop-up and footer zone

   The following events will be triggered when a pop-up or footer is displayed or closed:

   • Popup opened: zephr.popup.shown

   • Popup closed: zephr.popup.closed

   • Footer shown: zephr.footer.shown

   • Footer closed: zephr.footer.closed

   For more information about how to use Zephr Data Layer to record and analyse user data, see Data Layer.