You might have already checked out our new hyper-local content creation feature - GrowthBooster. We also created a WordPress plugin so that our clients can easily add a map with moments to their website and display them to their customers. For those using non-WordPress websites, we present the GrowthBooster JavaScript widget.
Embed it into the code of your website, set up desired parameters and enjoy.
First of all, you will need Google Maps API key, here is a quick guide on obtaining it.
Then you need to open GrowthBooster->Businesses->Your business, go to the "Settings" section, scroll down, copy the widget code snippet and paste it to your page. The Data Business Token is generated automatically and is unique for every organization. It's already present when you copy GrowthBooster code from the Settings page. Add your Google Maps API key in the data-google-api-key field of the snippet. Save changes, the widget should work!
By default the widget displays 100 newest moments for the business. You can filter them using data-filter-categories, data-filter-cities, data-filter-administrative-areas, data-filter-country attributes.
How to filter moments by categories, for example, "roofing" and "plumbing"? Add data-filter-categories attribute to your script, you will get something like:
<script id="geobooster_widget_script" type="module"
src="https://gb-widget.growthfoundry.com/gb-widget.js"
data-google-api-key="YourGoogleMapsAPIKey"
data-business-token="GeoBoosterAPIKey"
data-filter-categories="roofing, plumbing">
</script>
If there is a comma as a part of your category name, for example: "roofing, plumbing, and HVAC", please protect the comma with a backward slash character:
<script id="geobooster_widget_script" type="module"
src="https://gb-widget.growthfoundry.com/gb-widget.js"
data-google-api-key="YourGoogleMapsAPIKey"
data-business-token="GeoBoosterAPIKey"
data-filter-categories="roofing, plumbing\, and HVAC">
</script>
Similarly, you can filter moments by cities, administrative areas - states, or countries, just use an appropriate attribute:
Filtering moments created in Chicago and Richmond:
<script id="geobooster_widget_script" type="module"
src="https://gb-widget.growthfoundry.com/gb-widget.js"
data-google-api-key="YourGoogleMapsAPIKey"
data-business-token="GeoBoosterAPIKey"
data-filter-cities="Chicago, Richmond">
</script>
Filtering moments created in Texas and California:
<script id="geobooster_widget_script" type="module"
src="https://gb-widget.growthfoundry.com/gb-widget.js"
data-google-api-key="YourGoogleMapsAPIKey"
data-business-token="GeoBoosterAPIKey"
data-filter-administrative-areas="Texas, California">
</script>
Filtering moments created in the US:
<script id="geobooster_widget_script" type="module"
src="https://gb-widget.growthfoundry.com/gb-widget.js"
data-google-api-key="YourGoogleMapsAPIKey"
data-business-token="GeoBoosterAPIKey"
data-filter-country="US">
</script>
Empty value for filtering attribute is interpreted as no filtering by this field, for example, the script below will display 100 newest moments for the business with and without categories.
<script id="geobooster_widget_script" type="module"
src="https://gb-widget.growthfoundry.com/gb-widget.js"
data-google-api-key="YourGoogleMapsAPIKey"
data-business-token="GeoBoosterAPIKey"
data-filter-categories="">
</script>
Notice: you can set only one country in the filter, but multiple categories, administrative areas and cities. You can fine tune moments filtering by combining several attributes, like:
<script id="geobooster_widget_script" type="module"
src="https://gb-widget.growthfoundry.com/gb-widget.js"
data-google-api-key="YourGoogleMapsAPIKey"
data-business-token="GeoBoosterAPIKey"
data-filter-categories="roofing, plumbing"
data-filter-cities="Richmond"
data-filter-administrative-areas="Texas, California"
data-filter-country="US">
</script>
If there are no moments matching your filtering options the widget will display a message about it, see below.
By default, the zoom level and map center coordinates are chosen automatically to display all filtered moments on the map. You can change this behavior by specifying the data-zoom attribute setting from 1 to 21, where 1 is the minimal zoom = the bigger map area is shown, and 21 is the maximal zoom = the smaller area is shown. If you specify the data-zoom parameter, the center of the map is located in the coordinates of the first moment meeting the filtering parameters. The data-zoom attribute can be used together with filtering attributes, for example:
<script id="geobooster_widget_script" type="module"
src="https://gb-widget.growthfoundry.com/gb-widget.js"
data-google-api-key="YourGoogleMapsAPIKey"
data-business-token="GeoBoosterAPIKey"
data-filter-categories="roofing, plumbing"
data-filter-cities="Richmond"
data-filter-administrative-areas="Texas, California"
data-filter-country="US"
data-zoom="12">
</script>