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="Owen Sound" ... >...</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="Wiarton; Owen Sound" ... >...</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 8 L/100 km, 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 110 km/h is enabled on a motorway, and you specified 90 km/h, then 90 km/h will be used for calculation. And if you specify a limit of 150 km/h, then the speed 110 km/h 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>

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="Owen Sound" data-default-to="Wiarton" ... >...</a>

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

Have any questions? Contact us!