📦 BOX NOW Widget Example 5
This page demonstrates how to integrate the BOX NOW Locker selection map widget using type: "navigate", autoclose: false, and autoshow: true.
This example has no button and no fields—the widget appears automatically and takes up the full area.
💡 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 5</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;
}
#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;
}
@media (max-width: 900px) {
#boxnowmap {
width: 98vw;
height: 80vw;
max-width: 100vw;
}
}
@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;
}
}
@media (max-width: 450px) {
#boxnowmap {
height: 350px;
}
}
</style>
</head>
<body>
<h1>BOX NOW Widget Example 5</h1>
<div class="sub">
This example uses <code>type: "navigate"</code>,
<code>autoclose: false</code>, and <code>autoshow: true</code>.<br />
The widget opens automatically (no button, no info fields).
</div>
<div id="boxnowmap"></div>
<script type="text/javascript">
var _bn_map_widget_config = {
autoclose: false,
autoshow: true,
partnerId: 123,
parentElement: '#boxnowmap',
type: 'navigate',
}
;(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>