GLOBAL Configuration File

Modified on Thu, 18 Dec at 11:36 AM

Global Config Script

This document provides details on how to use the booking form script embedded in the HTML file.

Overview

The Global Configuration Script provides a centralized way to configure shared parameters across all iPRO plugins. This eliminates the need to repeat standard values for each plugin, reducing duplication and improving maintainability.

Configuration Hierarchy

Div-level - Attributes on the container <div> element
Script-level - data-tenant-config attribute on the script tag
Global-level - Global configuration (script tag or window object)
Default - Built-in default values

Important: Empty values ("", null, undefined) fall through to the next level in the hierarchy. This means if a parameter is set to an empty string at the div level, it will use the value from the script level, and so on.

Supported Parameters

The following parameters can be configured globally and will be inherited by all plugins:

apiUrl - API endpoint URL
bookingPageUrl - Booking page URL (used by booking-form plugin to direct our Plugin to your own checkout pages. If using our Checkout pages leave blank or remove)
brand - Brand colors object with primary and secondary properties

Format: { "primary": "#0066cc", "secondary": "#ff6600" }

Locations - Coma separated Location ID's (used by search form plugin)
Filters - Property attributes (used by search form plugin)
Highlights -Property type (used by search form plugin)

Supported Plugins

The following plugins support the global configuration system:

Amenities - Uses apiUrl and brand
Availability-calendar - Uses apiUrl and brand
booking-form - Uses apiUrl, bookingPageUrl, and brand
images - Uses apiUrl and brand
map - Uses apiUrl and brand
rates - Uses apiUrl and brand
reviews - Uses apiUrl and brand
rooms - Uses apiUrl and brand
wishlist - Uses apiUrl and brand

Setting Up Global Configuration

Method 1: Script Tag (Recommended)

Add a script tag with data-global-config attribute before your plugin scripts:

"apiUrl": "https://api.example.com",

"brand": {

"primary": "#0066cc",

"secondary": "#ff6600"

}

}'></script>

<script

src="./dist/0.0.1/amenities.js"

data-container-id="amenities-container"

></script>

Method 2: Window Object

Set window.iproGlobalConfig before the plugin scripts load:

window.iproGlobalConfig = {

apiUrl: "https://api.example.com",

brand: {

primary: "#0066cc",

secondary: "#ff6600"

}

};

</script>

<script

src="./dist/0.0.1/amenities.js"

data-container-id="amenities-container"

></script>

Configuration Examples

Example 1: Global Configuration Only

"apiUrl": "https://api.example.com",

"brand": {"primary": "#0066cc", "secondary": "#ff6600"}

}'></script>

<script

src="./dist/0.0.1/amenities.js"

data-container-id="amenities-container"

></script>

Result: Plugin uses global apiUrl and brand values.

Example 2: Script-Level Override

"apiUrl": "https://global-api.example.com",

"brand": {"primary": "#0066cc", "secondary": "#ff6600"}

}'></script>

<script

src="./dist/0.0.1/amenities.js"

data-container-id="amenities-container"

data-tenant-config='{

"apiUrl": "https://script-api.example.com"

></script>

Result:

apiUrl: Uses script-level override (https://script-api.example.com)

brand: Uses global config (#0066cc, #ff6600)

Example 3: Div-Level Override

"apiUrl": "https://global-api.example.com",

"brand": {"primary": "#0066cc", "secondary": "#ff6600"}

}'></script>

<div

id="amenities-container"

data-property-id="12345"

data-api-url="https://div-api.example.com"

data-brand='{"primary": "#ff0000", "secondary": "#00ff00"}'

></div>

<script

src="./dist/0.0.1/amenities.js"

data-container-id="amenities-container"

></script>

Result:

apiUrl: Uses div-level override (https://div-api.example.com)

brand: Uses div-level override (#ff0000, #00ff00)

Example 4: Mixed Overrides

"apiUrl": "https://global-api.example.com",

"brand": {"primary": "#0066cc", "secondary": "#ff6600"}

}'></script>

<div

id="amenities-container"

data-property-id="12345"

data-brand='{"primary": "#ff0000"}'

></div>

<script

src="./dist/0.0.1/amenities.js"

data-container-id="amenities-container"

data-tenant-config='{

"apiUrl": "https://script-api.example.com"

></script>

Result:

apiUrl: Uses script-level override (https://script-api.example.com)

brand.primary: Uses div-level override (#ff0000)

brand.secondary: Uses global config (#ff6600)

Example 5: Empty Values Fall Through

"apiUrl": "https://global-api.example.com",

"brand": {"primary": "#0066cc", "secondary": "#ff6600"}

}'></script>

<div

id="amenities-container"

data-property-id="12345"

data-api-url=""

data-brand=""

></div>

<script

src="./dist/0.0.1/amenities.js"

data-container-id="amenities-container"

></script>

Result:

Empty values fall through, so plugin uses global config values.

Parameter Details

apiUrl

The API endpoint URL used by plugins to fetch data.

Type: String
Default: "" (empty string)
Div Attribute: data-api-url
Script Config: apiUrl
Global Config: apiUrl

bookingPageUrl

The booking page URL used by the booking-form plugin for redirects. If you are using our Checkout pages remove this line. If you are using your own checkout pages that iPRO does not control then you would use this parameter so this booking via our Plugin redirects to your checkout pages.

Type: String

Default: "" (empty string)

Div Attribute: data-booking-page-url
Script Config: bookingPageUrl
Global Config: bookingPageUrl
Supported Plugins: booking-form

brand

Brand colors object containing primary and secondary color values.

Type: Object

Default: { primary: "#1976d2", secondary: "#dc004e" }

Div Attribute: data-brand (JSON string or object)

Script Config: brand (object)

Global Config: brand (object)

Format:

{

"primary": "#0066cc",

"secondary": "#ff6600"

}

Note: When using data-brand attribute on a div, you can provide:

A JSON string: data-brand='{"primary": "#ff0000", "secondary": "#00ff00"}'
Or just a primary color string (for backward compatibility): data-primary-color="#ff0000"

Implementation Details

How It Works

When a plugin loads, it calls loadGlobalConfig() to read the global configuration
The plugin then reads script-level config from data-tenant-config attribute
Finally, it reads div-level attributes from the container element
Parameters are resolved using the resolveParameter() or resolveBrand() functions
Empty values ("", null, undefined) fall through to the next level

Code Structure

The global configuration utilities are located in shared-utils/src/utils/globalConfig.js and are used by all plugins through their embed.jsx files.

Key functions:

loadGlobalConfig() - Loads global config from script tag or window object
resolveParameter(divValue, scriptValue, globalValue, defaultValue) - Resolves a parameter using the hierarchy
resolveBrand(divBrand, scriptBrand, globalBrand, defaultBrand) - Resolves brand colors using the hierarchy
getScriptConfig(scriptElement) - Extracts script-level config from data-tenant-config
isEmpty(value) - Checks if a value is empty (null, undefined, or empty string)

Backward Compatibility

The global config system is fully backward compatible:

Existing implementations continue to work without changes
Plugins that don't have global config will use their default values
Div-level and script-level attributes continue to work as before
The global config only provides defaults when values aren't set at lower levels

Best Practices

Set global defaults - Use global config for values that are the same across all plugins
Override when needed - Use script-level or div-level overrides for plugin-specific values
Keep it simple - Don't set values in global config if they need to be different for each plugin
Use JSON validation - Ensure JSON in data-global-config and data-tenant-config is valid
Test hierarchy - Verify that the hierarchy works as expected for your use case

Troubleshooting

Global Config Not Loading

Ensure the global config script tag is placed before plugin script tags
Check browser console for JSON parsing errors
Verify the JSON syntax is valid (use a JSON validator)

Parameters Not Overriding

Check that empty values ("", null, undefined) will fall through - they don't override
Verify the hierarchy: Div → Script → Global → Default
Check browser console for any error messages

Brand Colors Not Working

Ensure brand object has both primary and secondary properties
Check JSON format when using data-brand attribute
Verify color values are valid hex codes (e.g., #0066cc)

Examples by Plugin

Amenities Plugin

Booking Form Plugin

"apiUrl": "https://api.example.com",

"brand": {"primary": "#0066cc", "secondary": "#ff6600"}

}'></script>

Images Plugin

Support

For issues or questions about the global configuration system, please refer to the plugin-specific documentation or contact support.