• Help
  • Create and configure a widget

How to create and configure a widget

1. Log on to the site by clicking on the link to Login, or click the corresponding button in the header of the website.

Authorization is available using existing account information if You have previously registered on the site or through Your account on the social network. If You do not have an account on our website, you can register it.

 

2. After successful login, go to personal Cabinet, select "My widgets" and click the "Add widget".

Add a new widget

Read more about authorization you can read in the section "help" -> "Authorization".

 

3. Configure the widget

General settings of the widget

In the "Main settings", specify the domain of Your website, which will place the widget. If You enter an incorrect domain or a domain other than the one on which you intend running the widget, the widget will not start.

In the "display Settings" specify the format to display the widget. The widget can operate in two modes: modal (popup) window and part of the content. About how will look wiget on the website, you can read under "help" -> "will look Like widget on my website".

Depending on the selected display format will be two scenarios for further settings.

 

Scenario 1 (setting "Open widget in a modal window" is not installed)

a) In the "Select calculator", select one calculator that will be displayed on Your website.

b) Confirm the settings configuration of Your widget by clicking on the "Save"button.

C) Below, copy the "Code for installation on site" and paste in the HTML code of Your web page in the place where you'd expect to see the calculator. The widget automatically adapts to the size of your page.

After performing the above instructions, configure Your widget should have a similar appearance with the settings in the image below.

The configure a widget building calculators in display mode the content of your website

 

 

Scenario 2 (setting "Open widget in a modal window" is set)

When you select this setting, run the widget on Your website will be carried out through clicking on the active item button.

a) group settings "Settings button of the widget" drop down menu "Type button" contains a list of available options the look of "buttons": banner, button, link.

Select the type of button widget

The banner – the largest and most prominent format of the available options to display buttons. Banner height is 120 px, the width can be variable to adjust the button's contents, or to occupy the entire width 100% of parent block, in which is inserted the widget code (this display option is available if you enable the option "Button full-width" group settings "Advanced").

Banner available palette to change the color of background and text, if you have activated the option "Use an image" button you can select the background color for pictures.

Configure widget button

Another option of the group settings "Advanced" - "Use the picture for the button", when you activate it the banner will contain a picture (icon) associated with the selected set of calculators from the settings group "Select calculators".

Button – the display format for the settings is completely analogous to the format of the banner, but the button height is only 54 px.

Hyperlink – format display with a height of 40 px. For the format of all available settings of the banner and the buttons, except the background color. This format is commonly used as a string element to insert into the text.

b) In the "Select calculator" choose one or more calculators, which will be available in the widget.

Setup calculators widget

C) Ensure that appearance buttons configured in accordance with Your expectations. To do this, pay attention to its appearance in the "How it will look"button.

g) Confirm the settings configuration of Your widget by clicking on the "Save"button.

d) Below, copy the "Code for installation on site" and paste in the HTML code of Your web page in the place where you'd expect to see the calculator. The widget automatically adapts to the size of your page.

 

After installing the widget code to Your website, in case You'll need to change the appearance of the button or the available calculators — just log into your account Kalk.Pro and make the required settings, confirm them by clicking "Save". Widget on Your website will automatically pick up the changes without reinstalling the code.

 

Mandatory to reinstall the code on Your site: when you change the "display Settings" (modal window or as part of content), and also in case of changing the setting "Use image for button".

Back