Date Author Change
23 Dec 2025 Generated Initial configuration guide based on codebase analysis

Introduction

The Chaiz Landing Page Search Widget allows partners to embed a vehicle search form on their websites. Users can search by Make/Model, VIN, or License Plate to find vehicle service contracts.

To integrate the widget, follow these three 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

1. Configuration Script

Add the configuration script to the page <head>. This tells the initialization script how to configure the widget.

<!DOCTYPE html>
<html>
  <head>
    <!-- meta tags and links -->
    <script>
      window.chaizSearchWidgetConfig = {
        targetElementId: 'search-widget',
        selectedSearchType: 'makeModel',
        searchTypes: ['makeModel', 'vin', 'licensePlate'],
        submitButtonText: 'Get Quotes',
      };
    </script>
  </head>
  <body>
    <!-- page markup -->
  </body>
</html>

Multiple Widget Instances

You can configure multiple widget instances on the same page by passing an array:

<script>
  window.chaizSearchWidgetConfig = [
    {
      targetElementId: 'search-widget-top',
      selectedSearchType: 'makeModel',
    },
    {
      targetElementId: 'search-widget-sidebar',
      selectedSearchType: 'vin',
      searchTypes: ['vin'],
    }
  ];
</script>

2. Initialization Script

The initialization script must be added after the configuration script.

UAT Environment:

<script src="<https://search-widget.uat.chaiz.com/chaiz-partner-search-widget.js>"></script>

Production Environment:

<script src="<https://search-widget.chaiz.com/chaiz-partner-search-widget.js>"></script>

3. Host Element