Change of design

Use html code configurator to quickly customize the widget's design.

You can link your CSS using the data-css attribute to manage every aspect of the design.

<a class="rp-widget-link" ... data-css="" ... >...</a>

The font family and font size in the widget automatically adjust to the style of your site. Font of hyperlink with attribution is used as a sample font. To disable automatic font customization, add the data-disable-font-auto-tuning attribute or link your CSS.

<a class="rp-widget-link" ... data-disable-font-auto-tuning ... >...</a>

Price calculation by a formula

For any route, you can calculate the price by your formula. You can name this price as you wish, for example "Freight cost", "Delivery cost" or "Travel expenses". Look at this example.

To enable display of the price calculated by your formula, add the data-show-result-customized-cost attribute. Specify the calculation formula in the data-customized-cost-formula attribute and name in data-customized-cost-label.

When composing a formula, you can use the following variables:

You can also use the mathematical functions: min, max.

<a class="rp-widget-link" ... data-show-result-customized-cost data-customized-cost-formula="max(150, FuelCost * 4 + 100)" data-customized-cost-label="Freight Cost" ... >...</a>

The units of measure for all variables are determined by the values of the data-measure and data-currency attributes.


There are 3 systems of measures available:

<a class="rp-widget-link" ... data-measure="metric" ... >...</a>


The following currencies are supported:

<a class="rp-widget-link" ... data-currency="ARS" ... >...</a>

Route points

The data-default-from and data-default-to attributes specify the default values for fields "From" and "To". See how it works with the data-default-to attribute on this example.

<a class="rp-widget-link" ... data-default-to="Boston (Massachusetts)" ... >...</a>

To add the "Intermediate points" field, add the data-show-via attribute. The default value for this field can be set using the data-default-via attribute.

<a class="rp-widget-link" ... data-show-via data-default-via="New York (New York); Boston (Massachusetts)" ... >...</a>

Fuel calculator

To add the fuel calculator fields, add the data-show-fuel-calc attribute.

The data-default-fuel-consumption and data-default-fuel-price attributes specify the default values for fields "Fuel consumption" and "Fuel price".

If no default values are given, then "Fuel consumption" is considered equal to 29.4 mpg, and "Fuel price" is considered as the gasoline price.

<a class="rp-widget-link" ... data-show-fuel-calc data-default-fuel-consumption="12" data-default-fuel-price="2.4" ... >...</a>

Speed limit

To add the speed limit fields, add the data-show-speed-profile attribute.

The data-default-speed-limit-motorway and data-default-speed-limit-other attributes specify the default values for fields "Maximum speed on motorway" and "Maximum speed on other roads".

If the default values are not given, then limits stipulated by traffic rules and regulations are used.

During calculations, the speed allowed by traffic rules and regulations for that particular road is automatically used. If the speed 68 mph is enabled on a motorway, and you specified 56 mph, then 56 mph will be used for calculation. And if you specify a limit of 93 mph, then the speed 68 mph allowed by traffic rules and regulations will be used.

<a class="rp-widget-link" ... data-show-speed-profile data-default-speed-limit-motorway="100" data-default-speed-limit-other="60" ... >...</a>

Calculation results

You can add the result blocks you need with the help of attributes:

<a class="rp-widget-link" ... data-show-result-length data-show-result-map ... >...</a>

Limit results by list of countries

Worldwide routing is used by default.

You can strictly limit results by selected countries with attribute: data-only-countries. Only results from chosen countries will be shown.

You can add soft preference for countries with attribute: data-prefer-countries. Specified countries will have precedence over others.

Strict limit and soft preference can be used simultaneously.

<a class="rp-widget-link" ... data-only-countries="US,CA,MX" data-prefer-countries="US,MX" ... >...</a>

The following country ISO codes are supported: AD, AE, AF, AG, AI, AL, AM, AO, AR, AT, AU, AZ, BA, BB, BD, BE, BF, BG, BH, BI, BJ, BM, BN, BO, BR, BS, BT, BW, BY, BZ, CA, CD, CF, CG, CH, CI, CK, CL, CM, CN, CO, CR, CU, CV, CY, CZ, DE, DJ, DK, DM, DO, DZ, EC, EE, EG, ER, ES, ET, FI, FJ, FK, FM, FO, FR, GA, GB, GD, GE, GG, GH, GI, GL, GM, GN, GQ, GR, GS, GT, GW, GY, HN, HR, HT, HU, ID, IE, IL, IM, IN, IO, IQ, IR, IS, IT, JE, JM, JO, JP, KE, KG, KH, KI, KM, KN, KP, KR, KW, KY, KZ, LA, LB, LC, LI, LK, LR, LS, LT, LU, LV, LY, MA, MC, MD, ME, MG, MH, MK, ML, MM, MN, MR, MS, MT, MU, MV, MW, MX, MY, MZ, NA, NE, NF, NG, NI, NL, NO, NP, NR, NU, NZ, OM, PA, PE, PG, PH, PK, PL, PN, PR, PS, PT, PW, PY, QA, RO, RS, RU, RW, SA, SB, SC, SD, SE, SG, SH, SI, SK, SL, SM, SN, SO, SR, SS, ST, SV, SY, SZ, TC, TD, TG, TH, TJ, TK, TL, TM, TN, TO, TR, TT, TV, TW, TZ, UA, UG, US, UY, UZ, VA, VC, VE, VG, VN, VU, WS, XK, YE, ZA, ZM, ZW.

Calculate route automatically on page load

With the data-calculate-instantly attribute, you can initiate route calculation immediately after page has loaded without waiting for the "Calculate" button to be pressed. In this case, do not forget to set the default values for required fields "From" and "To". Look at this example.

<a class="rp-widget-link" ... data-calculate-instantly data-default-from="Boston (Massachusetts)" data-default-to="New York (New York)" ... >...</a>
// your custom function
var routeReadyHandler = function () {
    console.log("length=" + this.totalDistance);
    console.log("minutes=" + this.totalTime);
    console.log("fuelAmount=" + this.fuelAmount);
    console.log("fuelCost=" + this.fuelCost);
    console.log("fuelPrice=" + this.fuelPrice);
    console.log("fuelConsumption=" + this.fuelConsumption);
    console.log("customizedCost=" + this.customizedCost);

// assign function to widget
if (typeof RoutePlannerWidget === "undefined") {
    var allScriptTags = document.getElementsByTagName("script");
    for (var i = 0; i < allScriptTags.length; i++) {
        if (
        ) {
            allScriptTags[i].addEventListener('load', function(){
                RoutePlannerWidget.prototype.routeReady = routeReadyHandler;
} else {
    RoutePlannerWidget.prototype.routeReady = routeReadyHandler;

No, you can't. Please save the proprietary attribution in accordance with Creative Commons 4.0 license.

Have any questions? Contact us!