Fuel Calculator – Widget for websites

This javascript widget can be embedded to your website for free. Also there is paid version with some advantages.

Plans

	Free	S Suits for majority of websites	M	L
No ads
CSS
Technical support
7calc.net label absence
Usage on private pages
Websites count	1	1	1	1
Limit of shows	1000	250	1500	∞
Price	Free
	Get code

Demo

Find fuel amount and cost

Find average consumption

Vehicle fuel efficiency

Distance

miles

Price per gallon

Style examples:

(Click the button to apply the style)

Код виджета

Widget code consists of two parts:

1. Library import. Put this code between <head> and </head> tags.

<script src="https://7calc.net/dist/widget.js"></script>

2. Initialization. Put this code into any place in your template where you want widget to appear.

<div id="calcus-container"></div> <script> const options = { } CalcusWidget.show('Fuel', options) </script>

3. Объект options может содержать следующие настройки:

Параметр	Тип	Значение по умолчанию	Описание
token	string		Токен для платной версии.
currency	string	RUB	Трехсимвольный код валюты (если используется в калькуляторе).
defaults	object	{}	Значения полей по умолчению. В качестве ключей объекта используются имена полей.
dropdownValues	object	{}	Установить доступные значения в выпадающих полях формы. Ключи объекта - имена select полей, значения - массив доступных значений. Неперечисленные значения будут скрыты.
hideFields	array	[]	Скрыть определенные поля из калькулятора.
hideResults	array	[]	Скрыть определенные результаты расчета.
instance	integer		Используется для установки двух и более калькуляторов на одну страницу. Значение этого параметра должно дублироваться в id контейнера, напр. <div id="calcus-container-2"></div>

Styling

Since widget is being stored into html directly (without iframe), CSS styles also can be applied directly to widget elements. All user-defined css properties should include !important.


        /* Calculator background color */

        .calc-form {

            background-color: #f7f7f7 !important;

        }
        


        /* Footer background color (if you want footer background to vary from main background) */

        .calc-footer {

            background-color: #eeeeee !important;

        }
        


        /* Border */

        .calc-form {

            border: 1px solid #eee !important;

        }
        


        /* Links color */

        .calc-form a {

            color: #336600 !important;

        }
        


        /* Button color */

        .calc-submit {

            background-color: mediumseagreen !important;

        }
        


        /* Loader color */

        .loading-row .spinner-border {

            color: mediumseagreen;

        }

It is prohibited to make invisible or pale, descrease size or move the 7calc.net label. These changes will be interpreted as violation of widget usage rules, which will cause the domain ban.

Help

По вопросам установки и настройки виджета: letter@calcus.ru

Disclaimer

Installing widget on your website you agree that 7calc.net website as widget provider is not responsible for incorrect widget display, for information in widget, for possible errors in calculations.

We also keep the right to modify widget HTML code, what may cause applied styles no longer work correctly.