Back
Get the newsletter
Woosmap Search Widget: Embed Local Search & Store Recommendation
03/11/2017

-

4 min read
Woosmap-Search-Widget--Embed-Local-Search-&-Store-Recommendation

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

checkItem is in Stock at a nearby store
marker Location of closest store with item in stock and nearby stores
attributes Details about local stores (opening hours, phone number, store page…)
map 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

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://sdk.woosmap.com/searchwidget/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="widgetContainer"></div>
<script src="https://recommendation-js.woosmap.com/recommendation.js"></script>
<script src="https://sdk.woosmap.com/searchwidget/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('#widgetContainer', widgetOptions);
    })
</script>
  

If you want to go further

x

Subscribe to our newsletter

and don't miss a single one of our news

Subscribe to our newsletter

and don't miss a single one of our news