Embed types

Search results

Embed search results in your app

Usage

Travelbase.embed('#root', {
    originUrl: 'https://demo.travelbase.nl',
    type: 'search',
    options: {
        searchParams: { accommodationType: 'all' },
        viewType: 'list',
        // ... see all options below
    },
    callbacks: {
        onHitClick: (unit, searchParams) => {
            console.log('hit clicked', unit.id, unit.slug);
        },
        // ... see all callbacks below
    },
});

Pre-filtering with searchParams

You can also give search params that should be used as the default, this allows you to preselect filters. For example, you can show only hotels in a certain city.

Given the following url: https://demo.travelbase.nl/nl/search?accommodationType=_rental-unit-type.room?orFilters=_place.id-1-brand-oberon, you would pass the following searchParams:

{
    accommodationType: '_rental-unit-type.room',
    orFilters: '_place.id-1-brand-oberon',
}

or, simply as a string: ?accommodationType=_rental-unit-type.room?orFilters=_place.id-1-brand-oberon

Options

PropTypeDefault
searchParams
string | Record<string, string>
''
viewType
"map" | "list"
'list'
enableFilters
boolean
true
enableSearch
boolean
true
enableSort
boolean
true
enableViewType
boolean
true

Callbacks

PropTypeDefault
onHitClick
(unit: { slug: string; id: string; }, searchParams: string) => void
-

Example

Previous

Trip planner

Next

Search form

On this page