Element: Distance-Based Cost

Introduction

The "Distance-based Cost Element" is an innovative feature designed to calculate the cost between two distances, A and B, using Google Maps API. It provides an interactive and straightforward method for users to input their starting and ending locations. The calculator then estimates the cost by multiplying the distance with the cost per kilometer (KM) or mile, as set by the administrator. 

Watch It In-Action

In this example, you can see how the price changes when the address are selected

Benefits, Features & Use Cases

Distance-Base Cost is a versatile and essential tool for any business that requires accurate distance-based cost calculations. 

Benefits

1. Accuracy: Leveraging Google Maps API, the distance calculation is precise, ensuring that the cost estimation is reliable and reflects real-world distances.

2. User-Friendly: With simple input fields for the start and end locations, users can quickly obtain a cost estimate without any hassle.

3. Customizable: Administrators can set the cost per KM or mile, allowing for complete control over the pricing model.

4. Real-time Calculation: As users input the addresses, the calculator provides real-time updates on the estimated cost, enhancing user engagement.

Use Cases

1. Delivery Services: For businesses that offer delivery, the Distance-based Cost Element can calculate the delivery fee based on the distance between the warehouse and the delivery address.
2. Travel and Transportation Companies: Travel agencies and taxi services can utilize this element to provide instant quotes for trips between two locations.
3. Event Planning: Event planners can estimate the cost of transporting goods or personnel between various venues.
4. Moving Companies: Moving companies can provide accurate quotes for moving services based on the distance between the old and new locations.

How to Activate & Use This Feature

1. Set up your Google API

10. Go to Credentials page and copy the API Key

11. And Paste in Stylish Cost Calculator > Global Settings > Google Maps Settings

To learn more about how to add restrictions to your API so that it can only be used by your website, we recommend you read this article: Restricting API Keys

NOTE: Google offers $200 usage every month for no charge, this is usually enough to cover regular use of the calculator, but remember to monitor your project dashboard to avoid unexpected charges if your site has high traffic. Read more

2. Set up your element

To get started, click on the "+ Add Element" button

Then, click on the "Distance-Based Cost" button to add it

Settings & Options

First, you can set a "Title" for this element, it's gonna be visible on the front. 

Second, select the Unit Type ( length unit )  you want to use, kilometers (km) and miles (mi) are available.

Add the price per kilometer or per mile, the calculator takes into account the fractions of km/mi for the final calculation (If your price is $2 per kilometer, half a kilometer will be calculated at $1)

On the advanced options, you can set this element to required if you want to force your customers to select an option. You can also disable "Display on Detailed List & PDF" if you want to hide it in the quote.

Finally, you can add a default departure address, this will make your calculator show only one field (arrival).

Additional Information

Related Features

• Element: Slider https://designful.freshdesk.com/support/solutions/articles/48001207026-element-slider
• Element: Quantity Input Box https://designful.freshdesk.com/support/solutions/articles/48001081164-element-quantity-input-box