Getting Started

Beta Notice

Kvikk Map is currently in BETA. Features and functionality may change as we continue to improve the product.

What is Kvikk Map?

Kvikk Map is an embeddable widget that can be integrated into any website to provide customers with an interactive way to locate and select pickup points and parcel lockers for shipping. The widget displays an intuitive, vectorized map powered by Apple Maps, allowing users to browse available pickup locations based on their selected courier services.

---

Key Features

• Interactive Map: Vectorized Apple Maps interface with smooth navigation
• Multi-Courier Support: Display pickup points from multiple courier services simultaneously
• Smart Caching: The map won't reload when opened multiple times with the same configuration
• Customizable Styling: Adjust colors and appearance to match your brand
• Fallback Mode: Built-in error handling with manual address entry
• Responsive Design: Works seamlessly on desktop and mobile devices
• Multi-Language Support: Available in Hungarian (hu) and English (en)

---

How It Works

1. Sign Up: Create an account at developer.kvikk.hu to generate your API key - you can use your regualr Kvikk account too
2. Install: Add the Kvikk Map script to your website
3. Configure: Define which courier services and pickup point types to display
4. Implement: Open the map widget when customers need to select a pickup location
5. Receive: Get the selected pickup point details via callback function

---

Quick Start

Include the Kvikk Map script on your page:

<script type="module" src="https://cdn.kvikk.hu/map/kvikkMapWidget.js"></script>

Then open the map with a button click:

<button onclick="openMap()">Select Pickup Point</button>

<script>
function openMap() {
  kvikkMapWidget.open({
    apiKey: "your_api_key_here",
    language: "en",
    currency: "HUF",
    callback: (point) => {
      console.log("Selected point:", point);
      // Handle the selected pickup point
    },
    couriers: [
      {
        courier: "gls",
        type: "locker",
        price: {
          hu: 1500,
          ro: 2500,
        },
      },
      {
        courier: "foxpost",
        type: "foxpost",
        price: {
            hu: 1000
        }
      }
    ],
  });
}
</script>

That's it! The map will open in a modal dialog, allowing your customers to browse and select their preferred pickup location.

---

What's Next?

• Learn about Configuration Options to customize the map
• Explore Available Couriers to see supported services
• Understand Response Handling to process selected points
• See Styling Examples to match your brand