Introduction

To integrate the Chaiz Plans Widget into your web page, follow these three simple steps:

  1. Add the configuration script to define your settings.
  2. Add the initialization script
  3. Create an HTML element with a specific ID to serve as the container for the provider list.

This guide explains the setup and configuration options in detail with code examples.

<aside> 💡

Note: all urls here point to our test environment ‘uat’. Production links will be given after a formal approval of your implementation.

</aside>

Example look of the widget

Example look of the widget

1. Configuration script

Add the configuration script into the page head.

This configuration script tells the Initialization script how to configure the providers list.

Example:

<!DOCTYPE html>
<html>
  <head>
     …meta tags and links…
     <script>
       window.chaizSearchWidgetConfig = [{
         targetElementId: 'search-widget-top',
         showChaizLogo: true,
         showBenefitsList: true,
         backgroundColor: '#FFF7EA',
       },
       {
         targetElementId: 'search-widget-sidebar',
         showChaizLogo: false,
         showBenefitsList: false,
       }];
     </script>
  </head>
  <body>
    … page markup
  </body>
<html>

The configuration script contains only one mandatory properties: targetElementId

All other properties are optional and have default values if the property value is not specified.

2. Initialization script