White label assets for Distributors

The following code and examples will guide you to add search boxes, rate grids and buttons to your web pages.

In the javascript, please replace "DISTRIBUTOR_SHORTNAME" value with the Distributor shortname that you have been supplied, and where it says "PROVIDER_SHORTNAME" the shortname for the relevant provider.

Search box

Example

Code

In the head of your page include this script:

                    <script type="text/javascript" src="https://book.txgb.co.uk/v4/Services/ScriptService.jsws/DistributorToolkit?v=1&exl_psn=DISTRIBUTOR_SHORTNAME&exl_tg=large"></script>

In the head of your page include these styles:

                    <link rel="stylesheet" href="https://book.txgb.co.uk/v4/Resources/Platform/TXGB/Custom.css" />

To display the search box include this script in your page:

                    
<script>
    DistributorToolkit.createSearchBox({
        PresetSize: 'large',
        Orientation: 'Vertical'
    }).AppendHere();
</script>

Advanced options:

                    
<script>
    DistributorToolkit.createSearchBox(
    {
        PresetSize: "large",
        Orientation: "vertical",
        ShowDestination: true,
        Criteria: {
        Pax: {
            Adults: 2,
            Children: 2
        }
    },
        MaximumPax: 5
    }
   ).AppendHere();
</script>

Rate Grid

Example

Code

In the head of your page include this script:

                        <script type="text/javascript" src="https://book.txgb.co.uk/v4/Services/ScriptService.jsws/DistributorToolkit?v=1&exl_psn=DISTRIBUTOR_SHORTNAME&exl_tg=large"></script>

In the head of your page include these styles:

                        <link rel="stylesheet" href="https://book.txgb.co.uk/v4/Resources/Platform/TXGB/Custom.css" />

To display the rate grid include this script in your page:

                        
<script>
    DistributorToolkit.createRateGrid({
        ProviderShortname: 'PROVIDER_SHORTNAME', ShowServices: false
    }).AppendHere();
</script>

Advanced options:

                        
<script>
    DistributorToolkit.createRateGrid(
        {
            ProviderShortname: "PROVIDER_SHORTNAME",
            VisibleDays: 10,
            ShowServices: false,
            OpenInNewWindow: true
        }
    ).AppendHere();
</script>

Buttons

Link to your own booking page using a 'Check availability' button

Example

You can use different class names to change the colour and shape of your buttons. Please refer to the following:

Round		Square
.book-btn-red-round	Button	.book-btn-red-square	Button
.book-btn-yellow-round	Button	.book-btn-yellow-square	Button
.book-btn-green-round	Button	.book-btn-green-square	Button
.book-btn-navy-round	Button	.book-btn-navy-square	Button
.book-btn-black-round	Button	.book-btn-black-square	Button

Code

In the head of your page include these styles:

                        <link rel="stylesheet" href="https://book.txgb.co.uk/v4/Resources/Platform/TXGB/Custom.css" />

Place this code in your page:

                        <a rel="nofollow" class="book-btn-red-round" href="https://book.txgb.co.uk/v4/Pages/Availability.aspx?exl_dn=aaa_mywebsite&exl_psn=DISTRIBUTOR_SHORTNAME&exl_tg=large" target="_blank">Button</a>