AVUXI's TopPlace™ Location Pages for Travel can be integrated into any webpage. They will display a compound card with location information and a map for a specific Latitude - Longitude. The component itself is presented in any of 2 different styles:
map with scores (”map-with-scores-1”)
alternative map with scores (”map-with-scores-2”)
To integrate the widget simply load the script from our CDN https://scripts.avuxi.com/travel/location-pages/latest/location-page-travel-widget.js (please note that you can replace latest with any specific version — i.e. 1.0.0 — to freeze the codebase) and execute it on an empty div with the data- settings as needed:
<div id="vxapp" data-avuxi-key="YOUR AVUXI KEY" data-page-style="map-with-scores-1"></div>
When ready, simply execute the downloaded script:
new AvuxiLocationPagesTravelWidget("vxapp")
There are many customization options that can be specified as data- properties or via configuration in the dashboard. data- properties will override dashboard configurations. If none is supplied, sensible defaults are used. Icons are specified as data URLs (https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls).
data-avuxi-key you must always include a data-avuxi-key in your HTMLdata-location you must always include a latitude and longitude in your HTMLdata-page-style you can specify the style of the page either through dashboard configuration or in your HTML if none is specified map-with-scores-1 is used by default. Possible options are:
map-with-scores-1map-with-scores-2data-accent-color allows you to change the color of the graphical elementsdata-mode change the default from time to distancedata-language force the widget to operate in a specific language (use ISO 639-1 codes) if not available will fallback to Englishdata-custom-text override the default texts with your own! To use, provide a JSON object with the language and the alternative texts. For example: '{"en":{"very good":"excellent","Good":"Nice", "Superb": "Very Excellent"}}'