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.
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.
Item is in Stock at a nearby store
Location of closest store with item in stock and nearby stores
Details about local stores (opening hours, phone number, store page…)
Maps showing which stores carry the item searched forThe Woosmap Search Widget ease the embedding of this Local aspect in your website by assembling various components from Woosmap API and Google Maps API:
There are many use cases where the Woosmap Search Widget could be useful.
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.
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
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>
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
Implementing Woosmap quickly and effortlessly is one of our top priorities. We have been working on [...]
To help you get started with Woosmap Data API, we have updated our knowledge base giving several exa [...]
