Woosmap Search Widget: Embed Local Search & Store Recommendation

November 03, 2017 on news.

New Woosmap Search Widget


Retail is now omnichannel so every e-commerce developper has to add a postcode search in websites, that’s why we built the Woosmap Search Widget. This tool aims to ease the embedding of a location search box and recommended store in your website. It’s a lightweight JavaScript library to quickly implement Google Places and Woosmap Recommendation API. Feel free to fork it and download it from our Woosmap GitHub organization. All your feedbacks are welcomed.

Local Motivates Store Visits

Shoppers are actually inspired to visit a store after successfully finding out information such as the in-store availability of an item, store location and hours or pricing at a nearby retail location. But when that information isn’t available, shoppers may stay away; one in four shoppers say they’ll steer clear of a nearby store altogether to avoid the risk of items not being available.

“If people are searching for a product, there is nothing more targeted than serving that item with a picture, description, and price, while letting customers know exactly how far they are located from the product.” - David Buckley at Sears Outlet

Easy access to this type of information means a smoother path to a brand’s front door.


Shoppers Would Find This Information Very Helpful

in stockItem is in Stock at a nearby store

Import XLSX File Location of closest store with item in stock and nearby stores

Import XLSX File Details about local stores (opening hours, phone number, store page…)

Import XLSX File Maps showing which stores carry the item searched for

Google/Ipsos Research


Woosmap Search Widget

The Woosmap Search Widget ease the embedding of this Local aspect in your website by assembling various components from Woosmap API and Google Maps API:

  • Woosmap Local Recommendation API: to recommend the best store based on user profile or a location (geocoded address or geolocation).
  • Google Geocoding: to locate an address.
  • Google Places: if you want to use the Autocomplete capabilities to locate an address.
  • Google Distance Matrix: to estimate the elapsed travel time to go to the store.

Use Cases

There are many use cases where the Woosmap Search Widget could be useful.

DRIVE TRAFFIC TO STORES

Use Local information to show product availability at a nearby store. And show your store’s location, hours of operation and phone number. Offer click-and-collect services in your stores and highlight a driving directions link in your Website. Such initiatives will not only get people to your physical location, but they can potentially increase sales in the process.

PROVIDE CUSTOMIZED OFFERS

Send relevant offers and recommendations right to consumers and nearby them. Provide shoppers with promotions for related items as well as alternative fulfillment options, such as free home delivery, should the product they’re interested in not be in stock. Retailers could offer deals that shoppers can use at a nearby location (30% off today only at a store near you!).

Below you can see a sample usage of a Woosmap Search Widget displaying the recommended store where a shopper can go buy this headphones.

Click attributes to select a new store

loader

Embed Widget

Style

Include it in the <head> section of your page. You could override it to match your style. You can override the proposed css classes. Just put your CSS after included the native css file.

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

Javascript Instantiation

You just need to put an HTML container where the Search Widget will be appended.

<div id="searchWidgetContainer"></div>
<script src="https://recommendation-js.woosmap.com/recommendation.js"></script>
<script src="https://rawgit.com/woosmap/woosmap-search-widget/master/build/woosmapsearchwidget.js"></script>
<script>
    var widgetOptions = {
        woosmapKey: 'woos-27e715eb-6454-3019-95c1-XXXXXXXXXXX',
        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>



Previous

New Tutorials to Import Your Assets

To help you get started with Woosmap Data API, we have updated our knowledge base giving several examples of how to import your Assets from various file format and external applications. One of the quickest ways to learn Woosmap Data API is to look at existing sample codes to see how they are built. Here is our contribution in Asset management.

Next

Make The Woosmap Store Locator Widget Your Very Own

The Woosmap Store Locator Widget allows a new level of personalisation. You can now fully customise the rendering of your asset data on the side panel. When a user clicks a marker or search for stores near a place, the listener functions gets the data for the returned location(s), and features HTML to display the location’s information. Here are some ideas that you could implement to make the Woosmap Store Locator Widget your own and create additional value for your customers.