Display Modes

Overview

The below modes are available to set up the SDK UI to the client website.

• Overlay Mode
• Inline Mode

The implementation of the modes available are defined below:

Overlay Mode (Default)

The overlay mode launches the SDK UI as a popup modal. Users can close the modal at any time by clicking the prominent "X" in the upper right corner of the modal.

This configuration requires one parameter to be defined in the Fize.configure() method, and can optionally contain two parameters:

Required:

• display_mode=“overlay”

Optional:

• height=768
• width=650

📘

If no definition for "display_mode" is provided, the SDK UI will default to use the Overlay Mode.

<script>
     (function () {
       var handler = FIZE.configure({
         client_id: "FIZE_PROVIDED_CLIENT_ID",
         display_mode: "overlay",
         width: 768, // Set SDK UI Width (optional)
         height: 650, // Set SDK UI Height (optional)
       });   
     })();
</script>

Inline Mode

The Fize SDK provides the flexibility to embed the SDK UI directly within an existing webpage instead of opening as a modal.

Inline mode will activate automatically on page load, inside a user predefined container. The inline mode configuration requires two parameters to be defined in the Fize.configure() method, and can optionally contain two parameters:

Required:

• display_mode=“inline”
• element_id=“container-id”.

📘

By default, the SDK UI will use 100% of the container size so the container size can be set according to the client's requirement.

<script>
     (function () {
       var handler = FIZE.configure({
         client_id: "FIZE_PROVIDED_CLIENT_ID",
         display_mode: "inline", 
         element_id: "inline-container", // container id where the SDK UI is injected in the inline mode.
       });   
     })();
</script>

Inline Mode Implementation Example

The recipe below can be directly used to set up the SDK UI in the Inline Mode.