Widgets

Search Widget Quick Start

Easy-to-use Google Geocoding Search Box & Woosmap Recommendation Javascript Widget

Below you can see a sample usage of a Woosmap Search Widget displaying the recommended store along with the integration code.

Sample Use

Click attributes to search and select your Store

loader


Woosmap Public Key. Test your own!

or reset to default public key


Embed in your page

CSS

Include it in the <head> section of your page. You could override it to match your style.

<head>
    <link type="text/css" rel="stylesheet" href="https://sdk.woosmap.com/searchwidget/css/woosmap-search-widget.css">
</head>

Javascript

Add wherever you want to include your Search Recommendation Widget

<div id="searchWidgetContainer"></div>
<script src="https://sdk.woosmap.com/searchwidget/woosmapsearchwidget.js"></script>
<script>
    var callbackInitialRecommendedStore = function (store) {
        //called when an Initial Recommended Store is Found
        console.log(store);
    };
    var callbackUserSelectedStore = function (store) {
        //called When a User Select a Store after a Geocoding Search
        console.log(store);
    };
    var callbackDOMWidgetReady = function () {
       console.log('the DOM of widget is ready.');
       console.log(document.querySelector('.gr-wgs-homestore-panel-aroundMe-btn'));
    };
    var widgetOptions = {
        woosmapKey: 'woos-27e715eb-6454-3019-95c1-XXXXXXXXXXX',
        callbackInitialRecommendedStore: callbackInitialRecommendedStore,
        callbackUserSelectedStore: callbackUserSelectedStore,
        callbackDOMWidgetReady: callbackDOMWidgetReady,
        userAllowedReco: true,
        usePlaces: true,
        google: {
            clientId: 'gme-mycompanyname'
        },
        lang: 'fr',
        translations: {
            fr: {
                searchAroundMeBtn: 'Autour de moi',
                searchAroundMeTitle: 'Rechercher le centre à proximité'
            }
        }
    };
    
    document.addEventListener('DOMContentLoaded', function () {
        new wgs.searchwidget.RecommendationPlugin('#searchWidgetContainer', widgetOptions);
    })
</script>


User Privacy and Automatic Recommendation

By default, the Widget will not save any user related information (UserID and Preferred Store) and will not perform any automatic recommendation. The Widget will let users search stores nearby an address or a geolocation and callback methods with returned results. If you want to use it with built-in Woosmap Automatic Recommendation, you can do it in two different ways.

  • Set the config property userAllowedReco: true in the widgetOptions object.
  • Save the Widget RecommendationPlugin instantiation in a variable and call the dedicated method (allowUserReco()) like above snippet.
<script>
    var woosmapRecoPlugin = null;
    var callbackDOMWidgetReady = function () {
       woosmapRecoPlugin.allowUserReco();
    };
    var widgetOptions = {
        woosmapKey: 'woos-27e715eb-6454-3019-95c1-XXXXXXXXXXX',
        userAllowedReco: false,
        callbackDOMWidgetReady: callbackDOMWidgetReady,
        google: {
            clientId: 'gme-mycompanyname'
        }
        ...
    };    
    document.addEventListener('DOMContentLoaded', function () {
        woosmapRecoPlugin = new wgs.searchwidget.RecommendationPlugin('#searchWidgetContainer', widgetOptions);
    })
</script>

Here the allowUserReco() is called once the Widget is fully loaded in DOM (through callbackDOMWidgetReady). It could be good form to call it after a user action like a cookie consent button click. This method loads the recommendation.js file (if not already loaded), a lightweight Javascript library to deal with Woosmap Recommendation REST API, and call an initial user recommendation. Please refer to Recommendation Overview to see how it works.


Sample Use Callbacks with Search Panel

if you want to display by yourself the recommended store, set the parameter omitUIReco:true and use callbacks callbackInitialRecommendedStore and callbackUserSelectedStore as described in the below jsFiddle sample.