INHALTSVERZEICHNIS

Widget CDN URLs

Environment

Base URL

Production

https://search-rent-widget.azurewebsites.net/{version}/browser/

What is this Widget?

The KMS Search Widget is a rental car search form that can be embedded on any website. It allows the customer's visitors to search for available vehicles by selecting a location, dates, and times. When they submit the form, they are redirected to the customer's rental booking page with the search parameters pre-filled.

Quick Start

Add these lines to the customer's HTML page:

<!-- In the <body> where the widget should appear --> 
<kms-search-widget route="https://your-shop.com/rent"></kms-search-widget> 
<!-- Before closing </body> tag --> 
<script src="https://search-rent-widget.azurewebsites.net/{version}/browser/polyfills.js" type="module"></script> 
<script src="https://search-rent-widget.azurewebsites.net/{version}/browser/main.js" type="module"></script>

Note: Replace https://your-shop.com/rent with the actual URL of the customer's shop. Replace {version} with the actual version number.

Complete Example

<!doctype html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
        <title>My Website</title> 
    </head> 
    <body> 
        <header> 
            <h1>Welcome to Our Car Rental</h1> 
        </header> 
        <main> 
            <!-- Place the widget where you want it to appear --> 
            <kms-search-widget route="https://your-shop.com/rent" language="de-de"></kms-search-widget> 
        </main> 
        <!-- Widget scripts (load at the end of body) --> 
        <script src="https://search-rent-widget.azurewebsites.net/1.0.0/browser/polyfills.js"></script> 
        <script src="https://search-rent-widget.azurewebsites.net/1.0.0/browser/main.js"></script> 
    </body> 
</html>

Configuration Options

The <kms-search-widget> element accepts the following attributes:

Required Attributes

Attribute

Description

Example

route

The URL where users will be redirected after searching. This should be the customer's rental booking page.

https://your-shop.com/rent

Optional Attributes

Attribute

Default

Description

language

de-de

Language for the widget interface.

rotype

(from config)

Tenant database identifier. Only use if you need to override the default configuration.

subdomain

(from config)

Shop subdomain identifier. Only use if you need to override the default configuration.

Examples

German language (default):

<kms-search-widget route="https://your-shop.com/rent"></kms-search-widget>

English language:

<kms-search-widget route="https://your-shop.com/rent" language="en-uk"></kms-search-widget>

With tenant override:

<kms-search-widget 
    route="https://your-shop.com/rent" 
    rotype="your-tenant-id" 
    subdomain="your-shop-subdomain" 
></kms-search-widget>

How It Works

  1. Loading: When the page loads, the widget scripts register a custom HTML element called <kms-search-widget>.

  2. Initialization: Our middleware detects the URL where the script is being loaded from and it loads the corresponding shop and tenant configuration.

  3. Display: The widget renders a search form with:

    • Station/Location selector

    • Pickup date

    • Pickup time

    • Return time

  4. Submission: When the user clicks search, they are redirected to the URL in the route attribute with the search parameters.

  5. Styling: The widget automatically applies the styles configured in the backoffice (primary color, rounded corners, etc.).

WordPress Integration

To add the widget to a customer's WordPress site:

  1. Adding scripts to the theme: Add to the theme's functions.php:

    function add_kms_widget_scripts() { 
    wp_enqueue_script('kms-widget-polyfills', 'https://search-rent-widget.azurewebsites.net/{version}/browser/polyfills.js', array(), null, true); 
    wp_enqueue_script('kms-widget-main', 'https://search-rent-widget.azurewebsites.net/{version}/browser/main.js', array('kms-widget-polyfills'), null, true); 
} 
add_filter('script_loader_tag', function ($tag, $handle, $src) { 
    if ($handle === 'kms-widget-polyfills' || $handle === 'kms-widget-main') { 
        return '<script type="module" src="' . esc_url($src) . '"></script>'; 
    } 
    return $tag; 
}, 10, 3); 
add_action('wp_enqueue_scripts', 'add_kms_widget_scripts');

Note: Replace {version} with the actual version number.

 

  1. Then use the widget element anywhere:

    <kms-search-widget route="https://your-shop.com/rent"></kms-search-widget>

Troubleshooting

Widget not appearing

  1. Check browser console for JavaScript errors

  2. Verify all script files are loading correctly (check Network tab)

  3. Ensure the route attribute is provided - it is required

Widget shows error or blank

  1. Verify CORS headers allow requests from the customer's domain

Styling issues

  • The widget includes its own styles and should display correctly

  • If you need to adjust sizing, wrap it in a container:

    <div style="max-width: 800px; margin: 0 auto;"> 
    <kms-search-widget route="..."></kms-search-widget> 
</div>

Versions

We recommend that new customers install the latest version.

  • 1.0.0 (04/02/2026)

    • First release