Map widget
This widget provides a map view of your locations. Upon selecting a location, its contact details are shown and available classes for this location are listed below the map. When a class is clicked, the customer is taken to the Registration Form.
Installation
WordPress
When your WordPress plugin is installed, just head to Settings > Zooza and from dropdown of pages, select a page where you want the form to appear.
Shortcodes
You can also use shortcodes to place the form anywhere within the page. More configuration options for shortcodes is described below in their respective sections.
[zooza type="map"]
Wix
In Wix editor, click on Zooza widget. In the Settings panel, enter the api key and as a widget choose Map.
Embed code
Embed this widget with a placeholder element and the Zooza loader. The loader can sit in the <body> right after the placeholder, or in the <head> so the widget starts loading earlier. See Choosing an embed method if you are not sure which one to use.
| Placeholder | Description | Example Value |
|---|---|---|
YOUR_API_KEY | Replace with the API key found in the application under Publish > Widget. Appears once, on the placeholder (twice in the legacy script). | abc123xyz |
ZOOZA_API_URL | Replace with the Zooza API URL for your region: Europe: https://api.zooza.app, UK: https://uk.api.zooza.app, UAE: https://asia.api.zooza.app | https://api.zooza.app |
- Body only
- Head + body
- Legacy script
Place the placeholder and the loader in the <body> of your page, where you want the widget to appear.
<div data-zooza-widget='map' data-zooza-id='YOUR_API_KEY'></div>
<script async src='ZOOZA_API_URL/widgets/v2/loader.js'></script>
Initialisation options can be set directly on the placeholder as data-zooza-* attributes.
Place the loader in the <head> of your page:
<script async src='ZOOZA_API_URL/widgets/v2/loader.js'></script>
Then place the placeholder in the <body>, where you want the widget to appear:
<div data-zooza-widget='map' data-zooza-id='YOUR_API_KEY'></div>
Initialisation options can be set directly on the placeholder as data-zooza-* attributes.
This is the original embed snippet. It remains fully supported and existing embeds keep working, but it is no longer maintained or developed. New capabilities, such as data-zooza-* attributes, are only available with the placeholder embed.
Place the following snippet directly into the <body> of your page, where you want the widget to appear.
<script data-version='v2' data-widget-id='zooza' id='YOUR_API_KEY' type='text/javascript'>
( function() {
function async_load(){
document.body.setAttribute('data-zooza-api-url', 'ZOOZA_API_URL');
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
s.src = document.body.getAttribute('data-zooza-api-url') +
'/widgets/v2/?type=map&ref=' + encodeURIComponent( window.location.href );
var embedder = document.getElementById( 'YOUR_API_KEY' );
embedder.parentNode.insertBefore( s, embedder );
}
if ( document.readyState !== 'loading' ) {
async_load();
} else if ( document.addEventListener ) {
document.addEventListener( 'DOMContentLoaded', async_load );
} else {
document.attachEvent( 'onreadystatechange', function() {
if ( document.readyState === 'complete' ) { async_load(); }
} );
}
} )();
</script>
Settings
These settings are managed within the Zooza's main application Publish > Widget > Map.
URL
This will let Zooza know where your widget resides so that it can redirect your customers to it when necessary.
Show price
This will show or hide price in the listed classes.
Use age filter
This enables or disables filtering of classes based on age.
Search by ZIP code
Enable or disable searching with ZIP code as well as using an address.
Show radius filter
This will show a slider that users can use to narrow down the search area by distance radius.
Show use current location
This will show a button that would pinpoint the current user's location.
Show navigate button
When enabled, this will show a button which would open the default map application with the destination of your location. This happens when a user clicks on a pin on the map.
Navigate button label
If navigate button is shown, you can change its label.
Use CSS
This will load default Zooza styling. By default this is turned on. Typically you only want to override couple of styles but if you want, you can turn this off and create your own styling from scratch. However we recommend downloading the default styling and go from there, instead of building everything from scratch.
You can download the default css from this URL:
API_URL/widgets/v2/css/?widget=map