How to display the near location of your store in WhatsApp (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 Whatsapp 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.

The main idea is to create a bot that will return the near stores depending on the coordinates (latitude, longitude) of the 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 Whatsapp channels. For Web channels workaround look at this article.
  1. Create a WhatsApp bot by clicking on the "Build a chatbot" option of your dashboard and selecting WhatsApp:

  1. Use the Question: Address block to ask the current location. Save user answers in the default variable named @address as a string.

  1. Create a Formulas block. It will help to isolate the latitude and longitude that have been given together with the address. Save this information into @coordinates variable as a string and select TRUE/FALSE outputs.

Slice(@address, 48)

When a user shares their current location through Whattsapp the information we get contains a string and a link with the coordinates but we will only need the coordinates to configure the Webhook.

See in the example below how is the information saved in the @address variable and then, after the formula applied, in the @coordinates variable:

The users must send the locations using Send your current location option from Whatsapp. In case their input doesn't match with it, the flow will continue throughout the FALSE output of the Formula block. So, for those cases, we use the red arrow to redirect the users again to the Address Question block.

  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. In case there isn't any near store we can display a message to advise the client throughout the red arrow.

We will 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 @coordinates variable coming from user input.
https://api.storelocatorwidgets.com/searchByCoordinates/@coordinates

  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 @coordinates with a valid latitude and longitude. You can use these values: 41.378078,2.15782

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 coordinates sent: 41.378078,2.15782 (Barcelona references).

  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 Whatsapp bot.

Channel Type compatibility

for Web

This feature is not compatible with Web.

for Whatsapp

This feature is fully compatible.

for Messenger

This feature is not compatible with Messenger.

How did we do?

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

Contact