📦 BOX NOW Map Widget Developer Guide

🚀 Installation

Step 1: 📄 Add the JavaScript Code

Paste the BOX NOW Map Widget JavaScript code into your checkout page (or any other page where you want to display the widget).

Step 2: 🔘 Create HTML Button

Create a new HTML button with the boxnow-map-widget-button class attribute to open the BOX NOW Map Widget:

<a href="javascript:;" class="boxnow-map-widget-button">Open widget</a>

Step 3: ⚡ Create Selection Handler Function

Create a function to handle data from the selected locker (id, address, name, etc.).

💻 JavaScript Implementation

<div id="boxnowmap"></div>
<script type="text/javascript">
  var bn_map_widget_config = {
    partnerId: 123,
    parentElement: '#boxnowmap',
    afterSelect: function (selected) {
      alert(selected.boxnowLockerPostalCode)
      alert(selected.boxnowLockerAddressLine1)
      alert(selected.boxnowLockerId)
    },
  }
  ;(function (d) {
    var e = d.createElement('script')
    e.src = 'https://widget-cdn.boxnow.gr/map-widget/client/v5.js'
    e.async = true
    e.defer = true
    d.getElementsByTagName('head')[0].appendChild(e)
  })(document)
</script>

The most important part is the bn_map_widget_config variable, where you can configure all required options.

⚙️ Configuration Options

✅ Required Parameters

Parameter	Type	Description
parentElement	string	🎯 CSS selector for the Map Widget container. Create a <div id="boxnowmap"></div> and use #boxnowmap. The widget will be placed inside this element.
afterSelect	function	🎉 Required for type:iframe and type:popup - Function triggered when a locker is selected. Receives one parameter (object) containing locker information. Important properties: boxnowLockerPostalCode, boxnowLockerAddressLine1, and boxnowLockerId.

🔧 Optional Parameters

Parameter	Type	Default	Description
partnerId	number	-	🏢 Your partner ID
type	string	iframe	🖼️ Widget display type. Options: iframe, popup, or navigate
gps	boolean	true	📍 Enable/disable user location request when displaying the map
autoclose	boolean	false	🔄 Controls widget behavior after locker selection. If true, the map will be hidden after selection. When true, autoselect parameter is required and should be false
autoselect	boolean	true (iframe) / false (popup)	🎯 For type:iframe: optional, default true. For type:popup: required, must be false. If true, locker can be selected immediately by clicking on map/list. If false, requires clicking 'select locker' button
buttonSelector	string	.boxnow-map-widget-button	🔘 CSS selector for the button that opens the widget
zip	string	-	📮 Used when gps=false to suggest a location on the map. Can be a ZIP code or part of an address

📋 Usage Examples

🏃‍♀️ Basic Implementation

var bn_map_widget_config = {
  parentElement: '#boxnowmap',
  afterSelect: function (selected) {
    console.log('Selected locker:', selected.boxnowLockerId)
    console.log('Address:', selected.boxnowLockerAddressLine1)
    console.log('Postal Code:', selected.boxnowLockerPostalCode)
  },
}

🎨 Advanced Configuration

var bn_map_widget_config = {
  partnerId: 123,
  parentElement: '#boxnowmap',
  type: 'popup',
  gps: false,
  zip: '12345',
  autoselect: false,
  buttonSelector: '.custom-widget-button',
  afterSelect: function (selected) {
    // Handle locker selection
    processLockerSelection(selected)
  },
}