How to display the near location of your store for Web bots (with Store Locator Widgets)

Ana Updated by Ana

This article will help you drive customers to your business locations when they are interacting with a Web bot. To achieve this, we will use an external paid service called Store Locator Widgets, which has a free trial, so you can run some verification tests before you are ready to move on. Also, we will need a Google Maps API key.

The main idea is to generate a widget that will return the near stores depending on user location and based on a maximum radio of 5 kilometers.

Firstly, we will build the main flow of the bot, and secondly, we will complete the information of the Webhook block with the settings conditions of Store Locator Widgets software.

The main flow looks like the following:

This workaround is only for Web bots. For WhatsApp channels workaround look at this article.

  1. Create a Web bot by clicking on the "Build a chatbot" option of your dashboard and selecting Web:
  1. Use the Question: Address block to ask the current location. Save user answers in the default variable named @address as a string.
  1. Add your Google Maps API Key. Check here how get your API Key.

  1. To finish this first part, create the Webhook block and leave it empty (we will come back through it later).
  2. Create the first Conditions block that will check if we have any near store, and if we have it the flow will continue throughout the green arrow displaying the information of the variables.

  1. In case there isn't any near store we can display a Button block throughout the red arrow. With it, we can give the user the oportunity to try another address or to visit the website of your bussiness.

  1. Continuing throughout the green arrow, display the name of the near store under @name_store_1 , their address under @address_store_1 and there is an example of how to display a link that will redirect the user to the Google Map app with the location of the store under the variable @description_store_1.
  1. Create the second Condition block that will check if there is any other near store. You can add as many Conditions block as the number of nearby stores you want to show the users. And we follow the same flow as above, if a second store was set we display the information under a Message block.
  1. Now go to Store Locator Widgets and sign up for a free trial they offer for a 14 day, no credit card required.
  1. Create your store list. After the sign up, go to the main dashboard of the account, select Stores and click the green button on the right Add New Store, you will see the fields to complete.

Then, complete the information with your business information. We created only 2 stores as examples, one located in Barcelona, Spain and the other in Madrid, Spain:

The red arrows point to the name of the variables in which that information will be saved in Landbot.

  1. Go to Account > Your Details of Store Locator Widgets and look for the API Key you will need to create the Webhook. Copy the code next to Location Management API key.
  1. Return to the builder and open the Webhook block. Create GET request with the URL provided. See that at the end it includes the @address variable coming from user input.
https://api.storelocatorwidgets.com/GET/searchByAddress/@address
  1. Next, enable the Send Params options and paste the API Key you already saved. In the example of below, we allow a maximum of results to be retrieved (2 stores) and we set the search radius to hide locations that are 5 kilometers further away (default is unlimited).
  1. Test your request. Only for testing purposes, manually set a @address with any address you want.

After pressing the Test the request button, you should see 200 as the Status Code and the entire response. The response includes a lot of empty fields because we do not complete all the information available per store.

Consider that this request won't send information about the store located in Madrid because it is more than 5 kilometers away in relation to the address sent (Barcelona reference).

  1. It is time to Save Responses as Variables, we will use the variable's name we already have created on previous steps.
  1. And it is done! You can perform a test to corroborate that you are receiving the near store's information in the web bot.

Channel Type compatibility

for Web

This feature is fully compatible.

for WhatsApp

This feature is not compatible with WhatsApp.

for Messenger

This feature is not compatible with Messenger.

How did we do?

Contact