📦 BOX NOW Widget Example 3
This page demonstrates how to integrate the BOX NOW Locker selection map widget with autoclose: false.
💡 Tip:
You can copy, customize, and use this example in your own project!
🚀 Try the Live Demo
The demo opens in a new tab so you can test the map widget in a real environment!
📝 Demo Source Code
Below is the full HTML source code for the demo page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BOX NOW Widget Example 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
background: #e6e9ec;
font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
color: #222;
width: 100vw;
min-height: 100vh;
}
body {
min-height: 100vh;
min-width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
color: #444b44;
font-size: 2.2rem;
margin: 40px 0 10px 0;
text-align: center;
font-weight: 700;
}
.sub {
color: #586069;
font-size: 1.15rem;
text-align: center;
margin-bottom: 30px;
}
.button-row {
display: flex;
gap: 18px;
justify-content: center;
margin-bottom: 18px;
flex-wrap: wrap;
}
.boxnow-map-widget-button,
.reset-btn {
padding: 13px 34px;
font-size: 1.09rem;
border-radius: 7px;
border: none;
background: #44d62d;
color: #fff;
font-weight: 600;
cursor: pointer;
transition: background 0.13s;
box-shadow: 0 1.5px 8px 0 rgba(13, 110, 253, 0.06);
outline: none;
}
.boxnow-map-widget-button:hover,
.reset-btn:hover {
background: #0958c9;
}
.reset-btn {
background: #f5f6fa;
color: #44d62d;
border: 1.2px solid #c5dafe;
}
.reset-btn:hover {
background: #e6e9f2;
color: #084298;
}
#boxnowmap {
width: 82vw;
max-width: 1700px;
min-width: 270px;
height: 64vh;
min-height: 260px;
max-height: 820px;
border-radius: 13px;
border: 1.5px solid #d2e3fa;
background: #fafdff;
box-shadow: 0 1.5px 8px 0 rgba(13, 110, 253, 0.07);
margin: 0 0 28px 0;
display: block;
transition: width 0.25s, height 0.25s;
}
.fields-row {
display: flex;
gap: 28px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.input-group {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 140px;
flex: 1;
margin-bottom: 12px;
}
.input-group label {
margin-bottom: 4px;
color: #6c757d;
font-weight: 500;
font-size: 1rem;
}
.input-group input {
width: 100%;
padding: 9px 10px;
font-size: 1.07rem;
border: 1.2px solid #d0d7de;
border-radius: 6px;
background: #fff;
transition: border 0.13s;
}
.input-group input:focus {
border: 1.2px solid #44d62d;
outline: none;
}
@media (max-width: 900px) {
#boxnowmap {
width: 98vw;
height: 80vw;
max-width: 100vw;
}
.fields-row {
gap: 11vw;
}
}
@media (max-width: 600px) {
h1 {
font-size: 1.01rem;
margin-top: 20px;
}
.sub {
font-size: 0.97rem;
}
#boxnowmap {
width: 99vw;
height: 80vw;
min-height: 120px;
}
.fields-row {
gap: 5vw;
}
}
@media (max-width: 450px) {
#boxnowmap {
height: 350px;
}
.fields-row {
flex-direction: column;
gap: 7px;
align-items: stretch;
}
.input-group {
min-width: 0;
}
}
</style>
</head>
<body>
<h1>BOX NOW Widget Example 3</h1>
<div class="sub">
Select a BOX NOW locker with <code>autoclose: false</code> and see its
details below.
</div>
<div class="button-row">
<button onclick="delete3()" id="atag" class="boxnow-map-widget-button">
Select BOX NOW Locker
</button>
<button onclick="delete3()" class="reset-btn">Reset Map</button>
</div>
<div id="boxnowmap"></div>
<div class="fields-row">
<div class="input-group">
<label for="example3_zip">ZIP</label>
<input id="example3_zip" value="" readonly />
</div>
<div class="input-group">
<label for="example3_address">Address</label>
<input id="example3_address" value="" readonly />
</div>
<div class="input-group">
<label for="example3_id">ID</label>
<input id="example3_id" value="" readonly />
</div>
</div>
<script type="text/javascript">
function delete3() {
if (document.querySelector('iframe'))
document.querySelector('iframe').remove()
document.getElementById('example3_zip').value = ''
document.getElementById('example3_address').value = ''
document.getElementById('example3_id').value = ''
}
var _bn_map_widget_config = {
autoclose: false,
partnerId: 123,
parentElement: '#boxnowmap',
afterSelect: function (selected) {
document.getElementById('example3_zip').value =
selected.boxnowLockerPostalCode
document.getElementById('example3_address').value =
selected.boxnowLockerAddressLine1
document.getElementById('example3_id').value = 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>
</body>
</html>