Clever Point Map Integration

📍 🦉


This document describes the functionality available to the Clever Point Map, provided by Clever Services to customers, in order to use its Clever Point services.


In order to make the Clever Point service available on your site, it is necessary to modify the existing "check out" process so that your customer can choose the new way receipt "Pick Up from Clever Point".

Your technician should add a new radio button “Receive from Clever Point”.

Once the customer selects "Pick Up from Clever Point", their map should be displayed of Clever Point points, in which Clever Point stores are mapped. Then your customer must choose one Clever Point from which he will receive his parcel.

The map and overall, its functionality is provided by us and all you need to implement by your technician is its integration into your site.

The minimum steps that are actually required are launching the map on the website with a function that will be called when the user chooses to be informed about the store network Clever Point.

Every time he chooses one of the “Clever Points” it would be good if they were shown to him in one text box and the details of the Clever Point (Numeric Code – Alphanumeric Code – Name of Point) that he has chosen.

This will help enrich the user/customer experience in your eshop.

Upon completion of the registration of the order, it is necessary to inform the base given you the details of the selected Clever Point. The items of the selected Clever Point will fetch them using the onselect method of the map plugin which is called every time the customer selects a Clever Point store. In the order index of the site (back office), except for the order details which are also displayed today, the selected Clever Point's data should also be displayed (variable "text" described in the table below) so that later with its use Web Portal to complete the Clever Services update process for this particular one delivery of the order.

HTML setup

To setup the Clever Point Map into your web-page you need to insert the following script tag into the html code:

Development environment

<script type="text/javascript" src=""> </script>

Production environment

<script type="text/javascript" src=""> </script>

Html code

    <div id="clevermap"></div>

Javascript instructions

To initialize the Clever Point Map you need to insert the following code into a <script></script> tag or into a JS file.

    selector: '#clevermap',
    cleverPointKey: '',     // 'YOUR CLEVERPOINT API KEY'
    arcgisMapKey: '',       // 'YOUR ARCGIS API KEY'
    googleMapKey: '',       // 'YOUR GOOGLE MAP KEY'
    header: false,
    defaultAddress: null,
    defaultCoordinates: null,
    defaultCleverPoint: null,
    singleSelect: false,
    display: {
        addressBar: true,
        pointList: false,
        pointInfoType: 'docked'|'dockedSmall'|'floating'
    filters: {
        codAmount: 0
    onclear: () => {
        console.log(`point cleared`);
    onselect: (point) => {
        console.log('selected', point);
    oninitialized: () => {

Clever Point Map parameters

selectorstringThe querySelector for the DOM element where Clever Point Map will be created.
onselectfunctionThe callback function to return the select Clever Point information. Below the detailed information are presented.
cleverPointKeystringThe Clever Point API key sent to you.
arcgisMapKeystring(1) The API key from ArcGIS (
googleMapKeystring(1) The API key from Google (
defaultAddressstring(Optional) In case you want to set an initial map position based on an address. You need to provide a valid address or at least a part of it, post code, area, etc.
defaultCoordinatesstring(Optional) In case you want to set an initial map position based on map coordinates.
defaultCleverPointstring(Optional) In case you want to set an initial map position based on a Clever Point (you need to provide the Station ID in form of UUID).
singleSelectboolean(Optional) Changes the way the click selects the Clever Point and runs the «onselect» callback function, from choosing the point on the map or the Clever Point list. If set to true the Clever Point is selected without the need to click the «Επίλεξε το!» (Select this) button.
headerboolean(Optional) Displays the «Notification bar» on Clever Point Map.
displayobject(Optional) JSON object with display parameters for the Clever Point Map.
display.addressBarboolean(Optional) Displays or hides the address search bar.
display.pointListboolean(Optional) Displays or hides the Clever Point list.
display.pointInfoType"docked", "dockedSmall", "floating"(Optional) Changes the Clever Point info panel.
filtersobject(Optional) JSON object with parameters for filtering the displayed Clever Point.
filters.codAmountnumber(Optional) In case the order has cash on delivery (CoD) you can filter to display only Clever Points with CoD availability.
onclearfunction(Optional) Callback function which runs when the user clicks the "Καθαρισμός" (Clear) button. If a callback is defined then the clear button will be shown when a Clever Point is selected.
oninitializedfunction(Optional) Callback function when the Clever Point Map has finished the initialization process.

Map keys note

The base map can only support one key from the following arcgisMapKey and googleMapKey.

Callback function onselect

The onselect callback function is trigger when the «Επίλεξε το!» (Select this) button is clicked.


and returns the following JSON object with the selected Clever Point information:

StationIdThe point UUID: "2e9e5242-081c-4575-94ce-849687ba76ec".
PrefixThe point prefix: "5001".
CodeThe point code: "CPHED".
NameThe point name: "CLEVER SERVICES A.E.".
ShortNameThe point distinct title: "Clever Point ΠΕΡΙΣΤΕΡΙ".
AddressLine1The point address: "ΑΡΚΑΔΙΑΣ 3".
ZipCodeThe postal code: "12132".
CityThe point area: "ΠΕΡΙΣΤΕΡΙ."
PrefectureThe CleverPoint prefecture: "ΑΤΤΙΚΗΣ".
PhonesThe CleverPoint contact phones: "+30 2167000580".
IsGlobalStoreFlag defining if the CleverPoint is available for the provided «cleverPointKey».
IsOperationalFlag defining if the CleverPoint is currently operational.
IsOperationalOnSaturdayFlag defining if the CleverPoint is operational on Saturdays.
IsOperationalOnSundayFlag defining if the CleverPoint is operational on Sundays.
IsOperationalOnWeekendFlag defining if the CleverPoint is operational on Weekends.
IsAllDayFlag defining if the CleverPoint is operational 24h.
LatThe point latitude "38.0047".
LngThe point longitude π.χ. "23.70195".
PhotoFileNamesThe photo files names available for the Clever Point.
OperationalStatusDescription for the operational status for the CleverPoint.

Parameter examples

Following you can find examples for some parameters and the effects on the Clever Point Map.

defaultAddress = "Αρκαδίας 3, 12132"


header = true


display.addressBar = true


display.pointList = true


display.pointInfoType = "docked"


display.pointInfoType = "dockedSmall"


display.pointInfoType = "floating"


onclear = () => { console.log(point cleared); }


Shipment creation

To inform Clever Services for shipments, we provide two options:

Clever Point Partners Portal

A web-portal for partners, with the following functionality:

  • Create shipment
  • Updated shipment details
  • Cancel shipment
  • Print vouchers
  • Print daily sheet with shipments

Development environment


Production environment


Clever Point API

A web-api. You can detailed information for our API here.

Last Updated: