1. The submission and modification of the site
    1. The submission of the new site
    2. The options of the site
    3. The additional options of the site
  2. The creation and modification of the hints
    1. The creation of the hint
    2. The modification and the options of the hint
    3. The additional options of the hint
    4. The statuses of the hints
    5. The queue of the hints
  3. The groups of the pages
  4. The types of the users
  5. The support of the sites
    1. SSL
    2. One-page sites
    3. Sub-domains
  6. Price plans and transactions
    1. Price plans
    2. The page of the transactions
    3. Affiliate program
  7. Statistics
  8. The description of the Javascript Hintarea
  9. The parameters of the Hintarea() method
  10. The Hintarea demo add-on for the Google Chrome
Attention!
This tutorial isn't up to date. Some parts of this manual don't reflect actual state.
There is actual russian version of tutorial. We will translate and publish english version as soon as possible.

The submission of the site

The submission of the new site

After the registration at the Hintarea.com site, before the creation of the hints, you should submit the site into the list of your sites with the help of the button:

Input the name of the site and the address of the site (for example, "mysite.com") into the corresponding fields of the form.

The next step is the selection of the price plan, which is suitable for you. You may push the button of the menu of the plan in order to know about the properties, which are available for each plan:

Important!In order to enable the "Standard" price plan, there must be the amount of the money, which is stored in the account, which is sufficient for the activation. For the enabling of the "Individual" price plan, you should submit the request for its creation, and we shall contact you in order to obtain the information about the required properties of our system.

If you have the promotional code, then input it into the corresponding field in order to get the discount.

Information.After the submission of the site, you may skip the "Options of the site". You may return to them at any time during the modification of the site.

At the last stage, you would get the Javascript code, which should be inserted before the </head> tag into every page of your site. "The description of the Javascript" details

  1. <script type="text/javascript" charset="utf-8" src="//hintarea.com/hint.js"></script>
  2. <script type="text/javascript"> HintArea(); </script>

Now you may start the creation of the hints right at the pages of your site.

The options of the site

The "Options of the site" are available at the second stage of the submission of the site. You may also enter into the "Options of the site" by pushing the in the table of your sites, or simply by clicking on your site in the second column, and then select the step # 2, namely, the "Options of the site".

The major options:

Automatic prolongation of the plan. If this option is enabled, then after the period, which has been stipulated by the plan, or after the depletion of the limit of the requests, which has been stipulated by the plan, the plan would be automatically bought (prolongated), on the condition that there is the money in your account, which is sufficient for the prolongation of the current plan. You would be notified by e-mail about the spending of the money from your account for the prolongation of the price plan. This option is not available for the "(Gratis) Free of charge" price plan.

The automatic switching to the "(Gratis) Free of charge" price plan. If this option is enabled, then after the period, which has been stipulated by the plan, or after the depletion of the limit of the requests, which has been stipulated by the plan, the plan would be automatically changed to the "(Gratis) Free of charge" price plan, on the condition that the money in your account is not sufficient for the prolongation of the current plan, or the "Automatic prolongation of the plan" option has not been enabled. In this case, there would be shown the quantity of the hints, which has been determined by the "(Gratis) Free of charge" price plan, starting from the first one. The remaining hints would automatically become the backstage ones. "The creation and tuning of the hints", details. This option is not available for the "(Gratis) Free of charge" price plan, because this plan is automatically prolongated each month.

The hints at the sub-domains of the site. If this option is enabled, then the hints would be shown at all the sub-domains of the site. The hints would be the same at all the sub-domains.

Important!If this option is enabled, then the "parentDomain" parameter must be passed into the Hintarea() method. "The parameters of the Hintarea() method", details.

The language of the interface. The default language of the interface of the hints. It may be changed with the help of the parameters of the script. "The parameters of the Hintarea() method", details.

The additional options

Important!You should be sure in your actions, in order to change these parameters: their change may slow the loading of the hints.

Show the hints after the complete loading of the page. If this option is enabled, then the hints themselves, and the panel of the hints, would be shown only after the complete loading of all the elements of the page (the "window.load" event, instead of the "document.ready" event, which is used by default). You may enable this option, if certain hints switch into the "missing the target element" mode, because they have been loaded before the target element itself (for example, the element inside the iframe part of the page).

The creation and tuning of the hints

The creation of the hints

After the successful placement of the code on your site, you may see the following sign in the left part of the page - this is the panel for the control of the hints, which may work in the mode of the administrator and in the mode of the user. You must be authorized on the hintarea.comsite in order to enable the work of the panel for the control of the hints.

The control panel must be enabled in the mode of the administrator for the creation of the hint. In order to create the hint, push the "+ Create the hint" button, and enter into the mode of the selection of the element of the page, to which the hint should be attached.

Information.Use the "Esc" key in order to exit from the mode of the selection of the element of the page.

Information.In order to select the element, you should click it.

During the selection of the element, there would be proposed the selection of the side for the attachment of the hint with the help of the arrows around the selected element, namely, left, right, top, bottom. You may select the place for the attachment of the hint, or continue the selection of the elements of the page.

Информация.You should select the side, to which the hint should be attached, taking into account, that it may be partially hidden by the edge of the screen for the users with small monitor. "Additional options of the hint, placement", details.

After the selection of the place for the attachment of the hint, there would appear the form for the creation of the hint, in which you would be requested to input the header of the hint and the text of the hint.

Information.The header of the hint may be automatically generated from the text of the hint. The text of the hint may be edited with the help of the internal panel for the editing of the text.

The editing and tuning of the hint

In order to tune the hint, you should point the cursor onto this hint within the panel of the control of the hints. There would appear at the left of the hint the sign of the editing, the click on which would open the form for the editing of the hint.

The hint has, besides the form fields for the editing of the header and text, the panel of the tools:

- is the tool for the selection of the element. It permits to attach the hint to another element.

- is the tool for the options. It opens the window of the additional options of the hints. "Additional options of the hint", details.

- is the tool for the backstage hint. It permits to switch the hint into the backstage mode. Then the common users would not see this hint. Such hint would be shown only in the backstage mode within the mode of the administrator. "The statuses of the hints", details.

Information.It is useful to assign such status to all the hints, when you just try the hints on your site, and do not want the users to see the crude variety.

- is the tool for the deletion. It permits to delete the hint.

The additional options of the hint

Within the mode of the editing of the hint, if the following tool is activated at the panel of the tools of the hint, then the window of the additional options of the hint is activated:

- is the tool for the placement. Within this tab, you may manually change the selection of the element, to which the hint is attached, and also change the placement of the hint in relation to the element (left, right, top, bottom).

Important!Each element of the HTML page may be found with the help of the selector (the logical expression for the conditions of the search). During the creation, any click on the cloud of the hint defines it as the seen one. During the next loading of the page, there would be shown the second, third, and other hints, which are considered not seen yet.

Information!If the user has browsed all the hints during one work session, then the hints would not be shown to this user during the next loadings of the page. It is possible to return to the browsing of the hints with the help of the panel of the control of the hints

It is possible to close the hint during the current session, which would cause the loading of the next hint during the next session.

It is posible to continue the browsing of all the hints of the page with the help of the "Forward" and "Backward" buttons.  During the browsing of the hints, the screen would focus on these hints, that is the screen would scroll to the place of the hint. You may use the panel of the control of the hints for the browsing of the hints.  

The hints may be deactivated with the help of the option in the cloud of the hint.  You may also use for this purpose the panel of the control of the hints. In order to activate the hints, you should activate the showing of the hints on the panel of the control of the hints.  

After the deactivation, the hints would not be shown to this user, but the possibility of the activation and browsing of the hints would be always available in the panel of the control of the hints.

The statuses of the hints

"The hint, which is shown"

"The backstage hint" (the yellow exclamation mark in the upper right corner). Such hint would not be shown to the visitors of the site.

Important!The hints, which have been created, may get the backstage status, if they do not comply with the requirements of the "(Gratis) Free of charge" price plan during the change to this plan from any of the paid price plans, when the quantity of the hints, which have been created, exceeds the quantity of the hints, which is stipulated by the "(Gratis) Free of charge" price plan. When the paid plan is resumed, you should swith each hint from the "Backstage hint" mode into the "Hint, which is shown" mode by pushing the during the editing of the hint.

"The element does not exist" (the red exclamation mark in the upper right corner). Such hint would not be shown to the visitors of the site.

The hints, which have such status, have been attached to the element, which does not exist on the current page due to the various causes. Certain causes are:

  1. The element really does not exist. There really is no such element, to which the hint has been attached, the hint itself would just not be shown to the users. If you see this element anyway, but the hint is not attached there, then the possible causes are described below.

  2. The selector of the document has changed. It is possible, when the element exist on the page, but is located in the other part of this page, or there have changed the block, where the the element is located, or the structure of the page. This problem may be solved by the DIY description of the correct selector in the "Additional options of the hint", or by the creation of another hint for this element.

  3. The element has loaded after the hints. If the hint is attached to the element, which appears on the page after the showing of the hints (the "document.ready" event), then you may activate the "Show the hints after the complete loading of the page" option. see the "Options of the site, Additional options".

The queue of the hints

The hints would be shown in the order of the creation. In order to change the queue of the showing of the hints, you should open the panel of the control of the hints , and select the "Group of the pages" tab. You may form the queue of the showing of the hints by the simple "drag and drop" movement of the hint up and down.

Important!You may form the queue of the hints only within one group. The "drag and drop" transfer from one group of the pages into the another group (if several groups exist) is not provided.

The groups of the pages

It is possible, with the help of the "Groups of the pages" option, to create and group together the hints, which correspond to the different pages of the site. You may control the groups of the pages within the "Groups of the pages"  tab in the window of the additional options of the hint. In order to control the group of the hints, you should push the button  "Edit the hint" in the panel with the list of the hints. Then the cloud would appear, and within this cloud, you should open the window of the additional options of the hint, by pushing the  "Options" button  Then you should open the "Groups of the pages" tab. There is available in this tab the creation, modification, deletion of the groups of the pages, and the possibility to assign the group of the pages to the current hint.

The modification of the groups of the pages is also available in the panel of the control of the hints within the  "Groups of the pages" tab after the click on the "Edit" button  of the corresponding group. Then the window would open for the modification of the selected group of the pages with the "Name of the group of the pages" and the "URL corresponds" form fields, and with the description of the current path to the given page of the site. You should input into the "URL corresponds" form field the template for the path for the given group of the hints in the DOS format: '?' character corresponds to the any one character in the path; '*' character corresponds to the any quantity of the characters (zero or more). Besides this, the template must contain no transfer protocol, no domain name, and no anchor of the link (the example is below).

Example: you want to show the hints only on the page of the profile of the user. The profile of the user is shown on the pages like "http://www.mysite.com/users/1", "http://www.mysite.com/users/210", "http://www.mysite.com/users/210#id=title", and similar ones. You should create the group of the pages: the name is the "Profile of the user", URL corresponds is "/users/*" (without the "http" transfer protocol), without the "www.mysite.ru" domain name, without the "#id=title" anchor of the link). Then you should save the group, after which it will add itself into the list of the groups of the pages. Then you should select this group for the current hint, and save this hint. Now this hint would be shown only on the pages, the path to which coincides with the "/users/*" template.

Important!You may not save the hint, which does not belong to a group. You may not delete or modify the "All pages" group. You may not delete the group, while it contains the hints yet.

The types of the users

The different hints may be shown for the different types of the users. Every visitor of the site may belong to one or several types of the users. In order to determine, which user has visited the site, you may add the userTypes. option into the HintArea() method. For example:

  1. <script type="text/javascript" charset="utf-8" src="//hintarea.com/hint.js"></script>
  2. <script type="text/javascript"> HintArea({ userTypes: ["Зарегистрированные пользователи"] }); </script>

In this case, during the initialization of the hints, would be shown only those hints, where the "Registered users", type of the user is checked in the options, and those hints, where the "All users". type of the user is checked. The "Registered users" group must be added within the tab of the additional options of the hint. "The additional options of the hint", details

Each hint may be shown for the several groups of the users, if the administrator has defined for this hint several types of the users. Each user may also belong to the several groups, for example the "Registered users" и "Male visitor".

Important!The administrator sees all the hints independent of the options and passed parameters.

Important!In order to use the "Types of the users" options, the administrator of the site must himself be able to automatically identify the visitors of his site, and pass these parameters to the Hintarea script.

The support of the sites

The "Hintarea" hints are able to work with the different types of the sites in terms of the technologies, which are used for the creation of these sites.

SSL

The "Hintarea" hints can work with the protected https transfer protocols.

The one-page sites

The "Hintarea" hints may be used on the so-called one-page sites, the structure of which comprises one page, and the loading of the elements or other pages proceeds in real time without the reloading of the current page. The hints recognise the changes of the URL and initialize themselves according to these changes.

Important!In order to reload the hints yourself, you should call the Hintarea() method from within the javascript.

Sub-domains

If the site has the large quantity of the sub-domains, then it is possible to put the hints on all the sub-domains, while registering only one domain in the system. The system would automatically find the sub-domains of your site, and would put there the hints, which have been created. In order to enable this option, you should open the "Options of the site". "The options of the site", details.

Important!At this stage, this option is useful, if the elements of the site on the sub-domains coincide with the elements on the main domain, because the hints would be absolutely the same on the main domain of the site and on all the sub-domains of this domain. In order to make the different hints for the each sub-domain, you should register each sub-domain in the system separately, and put there the code, which would be obtained.

The price plans and the transactions

The "Hintarea" system offers 3 price plans: (Gratis) Free of charge, Standard, and Individual. You may explore the features of each plan by pushing while pointing to each plan, or on the Pricespage.

The price plans

At the time of the submission of the site into the system, the system proposes to the user to select one of the price plans. The "(Gratis) Free of charge" price plan is available for the selection immediately. The "Standard" price plan may be activated, if there is enough money in the account of the user. If the user has not enough money for the activation of the plan (the "Not enough money" status of the plan), then the plan is not available. After the funding of the account, you should activate the plan by the hand, by pushing the "Start plan". You may select the "Individual" price plan, this action initiates the communication of the administration with the user for the clarification of the needs of the user, and for the possible improvement of the system for the project of the user. After the determination of the requitements, the "Individual" price plan is created by the administration of the "Hintarea" system for the each site separately, and the price of the plan is determined. If the user has not enough money, then the price plan remains selected, but not activated, with the "Not enough money" corresponding message. Even if the user has enough money, the user himself should activate the plan after its creation.

After the funding of the account up to the necessary amount of the money, the activation of the plan becomes available, you shoud activate (highlighted by the green colour) the plan by the hand, by pushing the "Start plan".

The "Individual" price plan is created specially for the each site, for which it has been requested. You may change the price plan to the "(Gratis) Free of charge" or "Standard" (the price of the plan would be withheld), and return later to the "Individual" price plan with the same conditions. The user may also require the creation of the new "Individual" price plan for the project of this user.

Important!In order to change the options of the "Individual" price plan, the user should contact the administration of the system.

Important!During the transition from one price plan to another, all limits and options of the current plan are active till the activation of the new selected plan. If any limits of the current plan have been exceeded, and the new plan is not activated yet, then the hints would not be shown.

The page of the transactions

The current status of the account balance of the user is shown in the upper menu of the site. The currency of all the financial operations is defined as the USD United States dollar. In order to obtain the detailed information about the money on the site, click on the amount of the account balance, which is shown in the menu. There are available within the new open page the detailed records of all the financial transactions, which have been performed on the site, and the interface for the funding of the account.

During the funding of the account, the user would be sent to the "Robokassa.ru" site, where the user would be able to fund the account. The "Hintarea" system will verify the transaction, and will credit the corresponding money amount into the account of the user.

The statuses of the transaction will be shown in the table:

"the request of the transaction", the money amount has been entered, the payment procedure has been initiated, but the user has departed from the "Robokassa" site.

"the error of the transaction", the payment has failed due to some reasons. The user may contact the administration for the detailed information.

"the transaction has been cancelled", the money amount has been entered, the payment procedure has been initiated, but later cancelled.

"the transaction is processed", the money amount has been entered, the payment procedure has been initiated, the payment system has been selected, and the money transfer is performed. This status will be active till the credit of the money into the "Hintarea" account.

"completed successfully", the money has been credited to the account.

Important!The payment systems, with which the "Hintarea" system is working, are listed at the "Robokassa.ru" site.

Important!At this stage, the "Hintarea" system does not provide the withdrawal of the money. This function will appear somewhat later.

The affiliate program

The "Hintarea" invites the users to participate in the affiliate program. Each user is provided with the affiliate link and the control panel of the affiliate program, where are shown all the referred users of this user, their sites, and affiliate incentive rewards. You may find the detailed information about the conditions of the affiliate program and about the affiliate agreement at the Affiliatespage.

Statistics and analytics

There is available for all the price plans the statistics of the requests of the script and of the displays of the hints. In order to view the statistics of the site, which has been already submitted, you should open the "My sites" page, and push the sign near the selected site.

The "Request" is one request of our script at your site. It is performed during each loading of the page. In fact, it is equal to one display of the page of the site.

The "Display" if the display of the hint, which is determined by the certain action with the hint. The hint is considered displayed, if the visitor has clicked "Close", "Forward/Backward", or any place within the hint cloud.

At this stage, there is available the selection of the representation of the statistics: the table of the graph, and the possibility to obtain the data within the specified time interval.

For the "Individual" price plan, we offer the service of the registration and tuning of the Google Analytics statistics.

Important!The "Hintarea" system does not harvest any data, besides the statistics of the usage of its own hints. There would be performed no harvesting of any other data without the knowledge of the customer. We can also guarantee the safety and anonymity of the information, which has been harvested on the request of the customer.

The description of the Javascript Hintarea

In order to activate the hints of the "Hintarea" system, you should place the Javascript code, which has been received during the submission of the site, before the closing </head> tag. The first line of the script initiates the loading of the script from our server. The second line calls the HintArea() method, which initializes the hints. "The HintArea() method, details.

The parameters of the Hintarea() method

The hints may be initialized with the optional hash of the additional parameters, such as the

userTypes, lang, firstScroll, highlightTarget, path, parentDomain.

userTypes: array of strings (or only one string). It defines the name of the type of the users, to which belongs the current visitor of the site. These groups are created within the additional options of the hint. "The additional options of the hint", detalis."The types of the users", details.

Hintarea({userTypes: 'Admins'}), there will be shown only the hints, for which only the "Admins" or "All users" types of the users are checked.

Hintarea({userTypes: ['Registered', 'Male']}), there will be shown only the hints, which are suitable for the registered users, for the male users, and the hints, which are labeled as for "All users".

Hintarea({userTypes: []}), or just Hintarea(), there will be shown only the hints, which are labeled for "All users". – отобразятся только подсказки, отмеченные для "Все пользователи". 

Important!If the name of the non-existing group has been passed, then it is ignored:

Hintarea({userTypes: ['Registered', 'sfasfasfwgerhg']}), there will be shown only the hints, which are suitable for the registered users, and also the hints, which are labeled as for "All users".

lang: string. It defines the language of the interface of the hints. This parameter has the higher priority, than the value of the language of the interface of the hints, which is defined within the options of the site at the "Hintarea" site.

Example:  Hintarea({lang: 'ua'})
This parameter is useful for the sites with the multi-language interface, in order to display to each user the hints in the language, which is selected as the language of the interface of the site:
<script type='text/javascript'>HintArea({ lang: <%= current_user.prefered_language %> });

firstScroll: true or false. If true, page will be scrolled down to the first hint automatically. This parameter has the higher priority than "Focus on first hint" property set in hint's settings.

highlightTarget: true or false. If true, hint's target element will be highlighted. This parameter has the higher priority than "Highlight target element" property set in hint's settings.

path: string. The option permits to overlay the URL of the current page (namely, its path), by another one. For example, if the web master is on the www.mysite.com/registrations/users/whateveruwhant/135483/callback/show_user, but wishes to show there the same hints, as on the page of the user profile (the URL of which is www.mysite.com/user/25). In order to achieve this goal, you may pass the "path" option:
Hintarea({path: '/users/25'})
In this case, there should load on this page the same set of the hints, as on the www.mysite.com/user/25.

parentDomain: If the option for the sub-domains is activated, then the "parentDomain" must contain the parent domain name, according to which the parent site, for which the hints should be loaded, will be determined during the request from the sub-domain. For example: {parentDomain: mysite.com}

The "Hintarea demo" add-on for the Google Chrome

In order to test, how the hints on your site appear and work, we have developed the add-on for the Google Chrome browser. The add-on permits to install the hints using the few clicks without the installation of the code on the site. The hints with the "default" style will be shown only for you in your browser. The 'Hintarea demo' for the Google Chrome browser, details