Content Configurations

Overview

Content configurations allows the client to customize the Fize Modal text and show/hide certain Fize Modal Components.

🦉

Content Configuration

Open Recipe

Property	Type	Default Value	Inline Mode Support	Overlay Mode Support
show_header	boolean	true	Yes	No
header_text	string	display_name	Yes	Yes
show_footer	boolean	true	Yes	Yes
about_us_page	object	undefined	Yes	Yes
carrier_listing_page	object	undefined	Yes	Yes
success_page	object	undefined	Yes	Yes

show_header

The client has the option to show/hide custom header text while user is using the display_mode:inline. Default value - show_header: true .

📘
Note: display_mode: "overlay" will ignore this configuration.
Header will be always present while using overlay mode.

<html lang="en">
<head>
<script src="https://cdn.getfize.com/sdk/v1.0/getfize.js"></script>
</head>
<body>
  <div id="inline-container"></div>
<script>
       let handler = FIZE.configure({
         client_id: "FIZE_PROVIDED_CLIENT_ID",
         content_config:{
          	 show_header: false
           },
         display_mode: "inline",
         element_id: "inline-container"
       });   
   </script>
</body>
</html>

header_text

The client has the option to add custom header text. Default header text will be display_name provided by the user while configuring the Fize Modal.

<html lang="en">
<head>
<script src="https://cdn.getfize.com/sdk/v1.0/getfize.js"></script>
</head>
<body>
<button id="launchFize">Launch Fize</button>
<script>
    
       var handler = FIZE.configure({
         client_id: "FIZE_PROVIDED_CLIENT_ID",
         content_config:{
          	 header_text: "Custom header text"
           }
       });   

		 document.getElementById("launchFize").onclick = () => handler.launch();
   </script>
</body>
</html>

show_footer

The client has the option to show/hide footer component while configuring Fize Modal. Default value - show_footer: true .

📘
Note : for connect_layout: 'v1' footer component is always hidden.

<html lang="en">
<head>
<script src="https://cdn.getfize.com/sdk/v1.0/getfize.js"></script>
</head>
<body>
  <div id="inline-container"></div>
<script>
       let handler = FIZE.configure({
         client_id: "FIZE_PROVIDED_CLIENT_ID",
         content_config:{
          	 show_footer: true
           },
         display_mode: "inline",
         element_id: "inline-container"
       });   
   </script>
</body>
</html>