1. Добавление и редактирование сайта
    1. Добавление нового сайта
    2. Настройки сайта
  2. Создание и настройка подсказок
    1. Создание подсказки
    2. Редактирование и настройки подсказки
    3. Дополнительные настройки подсказки
    4. Панель управления подсказками
    5. Настройка внешнего вида
  3. Работа с подсказками
    1. Просмотр подсказок
    2. Статусы подсказок
    3. Очередность подсказок
  4. Группы страниц
  5. Типы пользователей
  6. Кросс-страничные туры
    1. Создание туров
    2. Просмотр туров посетителем
  7. Поддержка сайтов
    1. SSL
    2. One-page (одностраничные) сайты
    3. Многодоменные сайты
    4. Self-hosting
  8. Тарифные планы и транзакции
    1. Тарифные планы
    2. Страница транзакций
    3. Партнерская программа
  9. Статистика
  10. Расширение "Hintarea demo" для Google Chrome
  11. Hintarea API
    1. Вступление
    2. Описание метода start
    3. Описание других методов

Добавление и редактирование сайта

Добавление нового сайта

После регистрации на сайте Hintarea.com перед размещением подсказок сначала необходимо добавить свой сайт в сервис с помощью соответствующей кнопки:

В полях формы введите название сайта и укажите домен (например, "mysite.com"):

Следующий шаг — выбор подходящего для вас тарифного плана. Ознакомиться с доступными возможностями каждого плана можно, нажав на кнопку меню плана:

Важно!Для включения тарифного плана «Стандартный» необходимо, чтобы на счету была необходимая для активации сумма. При выборе тарифного плана «Индивидуальный» вы отправляете запрос на его создание - мы свяжемся с вами для получения информации о требуемых возможностях нашего сервиса.

Если у вас есть промо-код, введите в соответствующее поле для получения скидки.

Информация.После добавления сайта вы можете пропустить «Настройки сайта». Вернуться к ним можно в любой момент при редактировании сайта.

На последнем этапе вы получаете Javascript-код, который необходимо вставить на всех страницах вашего сайта:

  1. <script type="text/javascript">
  2. (function(w,d,s,u,h,a,m){w[h]=w[h]||function(){(w[h].q=w[h].q||[]).push(arguments)};a=d.createElement(s),m=d.getElementsByTagName(s)[0];a.async=1;a.src=u;a.charset='utf-8';m.parentNode.insertBefore(a,m)})(window,document,'script','//hintarea.com/hint.js','_hintArea');
  3. _hintArea("start");
  4. </script>

Теперь можно приступать к созданию подсказок прямо на страницах вашего сайта.

Настройки сайта

На втором этапе добавления сайта доступны «Настройки сайта». Также попасть в «Настройки сайта» можно, нажав

Автопродление плана. Если опция включена, то по прошествии предусмотренного планом периода или исчерпании предусмотренного планом лимита загрузок план будет автоматически продлен, что обеспечит вам беспрерывную работу подсказок, если на вашем балансе имеются средства, достаточные для продления текущего плана. Вы будете уведомлены по e-mail о снятии средств с вашего счета за продление тарифного плана. Опция не доступна для плана «Бесплатный».
Более подробно об использовании этих опций читайте в разделе «Тарифные планы».

Автопереход на бесплатный план. Если опция включена, то по прошествии предусмотренного планом периода или исчерпании предусмотренного планом лимита загрузок план автоматически будет изменен на «Бесплатный», если на вашем балансе недостаточно средств для продления текущего плана или опция «Автопродление плана» не была включена. Опция не доступна для плана «Бесплатный».
Более подробно об использовании этих опций читайте в разделе «Тарифные планы».

Подсказки на поддоменах сайта. Эта настройка предназначена для мультидоменных сайтов, у которых страницы находятся на разных доменах (например mysite.com, ru.mysite.com, en.mysite.com). Если опция включена, то подсказки будут отображаться на всех субдоменах сайта, в ином случае - только на корневом домене. На всех субдоменах подсказки будут одинаковы. Опция не доступна для плана «Бесплатный».
Подробнее читайте в разделе «Многодоменные сайты».

Язык интерфейса. Язык интерфейса подсказок по умолчанию. Этот язык будет использоваться для кнопок и переключателей на подсказках, размещенных на вашем сайте. Доступны английский, русский и украинский языки.

Информация.Вы можете переопределить язык интерфейса подсказок динамически с помощью метода API start передав параметр "lang" (подробнее в разделе «API HintArea»).

Создание и настройка подсказок

Создание подсказки

После успешного добавления кода на ваш сайт в левой части сайта вы можете увидеть значок - это панель управления подсказками, которая может работать в режиме администратора и в режиме пользователя. Панель работает в режиме администратора если вы авторизованы на сайте hintarea.com.

Для создания подсказки панель управления должна быть включена в режиме администратора. Чтобы создать подсказку, нажмите кнопку «Создать подсказку». Вы перейдите в режим выбора элемента страницы, к которому необходимо прикрепить подсказку.

Информация.Чтобы выйти из режима выбора элемента страницы, используйте клавишу Esc.Для выбора элемента нужно кликнуть по нему.

При выборе элемента будет предложен выбор стороны крепления подсказки с помощью стрелок по периметру выбранного элемента - слева, справа, сверху или снизу. Вы можете выбрать место прикрепления подсказки или продолжить выбор элементов страницы.

Информация.Выбирайте сторону, с которой крепить подсказку с учетом того, что она может частично выйти за границу экрана у пользователей с маленьким монитором (подробнее «Дополнительные настройки подсказки - расположение»).

После выбора места прикрепления подсказки появится форма создания подсказки, в которой вам будет предложено ввести заголовок подсказки и текст подсказки.

Информация.Заголовок подсказки может быть сгенерирован из текста подсказки автоматически. Текст подсказки может быть отредактирован с помощью встроенной панели редактирования текста.

Редактирование и настройки подсказки

Для настройки подсказки необходимо в панели управления подсказки навести курсор на одну из подсказок. Слева от подсказки появится значок редактирования. Клик по нему откроет форму редактирования подсказки.

Помимо полей редактирования заголовка и текста подсказка имеет панель инструментов:

- режим выбора элемента. Позволяет прикрепить подсказку к другому элементу.

- настройки. Открывает окно дополнительных опций подсказок (подробнее «Дополнительные настройки подсказки»).

- подсказка-черновик. Позволяет сделать подсказку черновой. При этом обычные пользователи ее не будут видеть. Такая подсказка будет отображаться только в режиме администратора (подробнее «Статусы подсказок»).

Информация.Полезно ставить такой статус всем подсказкам когда вы только примеряете подсказки на вашем сайте и не хотите чтобы пользователи увидели «сырой» вариант.

- удалить. Позволяет удалить подсказку.

Дополнительные настройки подсказки

В режиме редактирования подсказки при включении на панели инструментов подсказки инструмента включается окно дополнительных настроек подсказки.

  Тип подсказки. Обычный режим работы подсказок - это пошаговые подсказки. Они поочередно отображаются на странице одна за другой, пока пользователь их не просмотрит.
Но возможно также создавать специфические подсказки, которые не входят в общий список подсказок. Они отображаются в ответ на определенное действие со стороны пользователя - клик на элемент страницы или наведение на него.
На этой вкладке можно выбрать, будет ли создаваемая подсказка пошаговой, или же всплывающей при клике/наведении на элемент, к которому она прикреплена.

Информация.В боковой панели в режиме администратора всплывающие подсказки отмечены кружочком. Для обычных посетителей всплывающие подсказки не отображаются в боковой панели.

  Расположение. На этой вкладке можно вручную изменить селектор элемента, к которому прикрепляется подсказка, а также изменить положение подсказки относительно элемента (слева, справа, вверху, или внизу).

Важно!Каждый элемент на HTML-странице может быть найден с помощью селектора (строчного выражения, с помощью которого задаются условия поиска). При создании подсказки селектор целевого элемента определяется автоматически на основании его текущего положения на данной конкретной странице. Вы можете отредактировать селектор вручную, чтобы быть уверенными в том, что подсказка всегда будет указывать на правильный элемент. Если целевой элемент не удается найти, то для обычных посетителей она не отобразится. В режиме администратора она будет в статусе «Элемент отсутствует» (подробнее «Статусы подсказок»).

Информация.Подсказки способны изменять свое положение относительно элемента в зависимости от размеров экрана. Если подсказка будет выходить за пределы экрана - она отобразиться с другой стороны элемента, однако в настройках положение подсказки останется прежним.

  Группы страниц. Эта настройка позволяет управлять группами страниц, на которых будет отображаться подсказка. По умолчанию все подсказки сохраняются в группу "Все страницы". У подсказки должна быть отмечена хотя бы одна группа страниц. Подробнее о группах страниц.

   Типы пользователей. Эта вкладка позволяет управлять типами пользователей, которым будут показываться подсказки. По умолчанию все подсказки относятся к типу "Все пользователи". У подсказки должен быть отмечен хотя бы один тип пользователей. Подробнее о типах пользователей.

  JavaScript-код. На этой вкладке можно указать Javascript, который будет выполняться перед каждым появлением подсказки на экране.

Информация.Например вы можете прикрепить подсказку к элементу, который находится внутри закрытого блока или выпадающего меню. При показе такой подсказки javascript может открыть этот блок или меню.

Панель управления подсказками

Панель управления подсказок находится в левой части вашего сайта в виде значка . Для администратора сайта и для пользователя панель управления подсказками отличается:

Для пользователя сайта панель управления подсказками позволяет включить/выключить и повторно посмотреть подсказки.

Для администратора сайта панель управления подсказками помимо возможности создавать и редактировать подсказки имеет 4 вкладки.

  Актулаьные подсказки. Активирована по умолчанию. На данной вкладке отображаются все подсказки, актуальные для данной страницы, включая подсказки, которые не будут отображаются пользователям (статусы «элемент отсутствует» и «черновая подсказка»). Позволяет просматривать и редактировать подсказки.

  Все подсказки. На данной вкладке отображаются все подсказки, созданные для сайта. Позволяет сортировать подсказки перетаскивая их относительно друг друга, а также редактировать.

  Группы страниц. Отображает все подсказки сгрупированные по групам страниц. Позволяет увидеть все группы страниц и подсказки, входящире в них, а также редактировать подсказки.

  Туры по сайту. Отображает все созданные кросс-страничные туры и входящие в них шаги. Подробнее в разделе «Кросс-страничные туры»).

  Настройки показа подсказок. Здесь можно изменить парамтеры отображения подскзаок на сайте:
«Редактор стилей» позволяет изменить внешний вид подскзаок и панели подсказок
«Язык по умолчанию» позволяет задать язык интерфейса подсказок
«Подсказки включены по умолчанию» - определяет, в каком состоянии (включенном или выключенном) будут инициализированы подсказки для нового посетителя. По умолчанию, подсказки включены. Это значит, что если на текущей странице есть непросмотренные подсказки, то первая из них будет отображена. Уберите эту галочку, если хотите, чтобы подсказки не показывались, пока пользователь сам не обратится к ним через боковую панель.
«Фокусироваться на первой подсказке» - если включено, то страница после загрузки будет листаться до первой непросмотренной подсказки, если такая есть. Полезно использовать чтобы сфокусировать внимание на подсказках, особенно, если подсказка размещена на странице вне зоны первоначальной видимости.
«Выделять целевой элемент» - если включено, то при переходе к подсказке весь сайт, кроме целевого элемента, на который указывает подсказка будет затенен полупрозрачным фоном (позволяет сакцентировать внимание на важных деталях)

Настройка внешнего вида

Сервис Hintarea позволяет настраивать внешний вид подсказок с помощью стилизатора. Вы можете выбрать наиболее подходящий под дизайн вашего сайта вид облака и панели подсказок, а также настроить цветовую гамму, шрифт и прочее.

Для открытия стилизатора, откройте вкладку "Настройки показа подсказок" в панели управления подсказками и нажмите на иконку "Редактор стилей".

Используйте панель с правой части экрана для выбора одного из шаблонов и его настройки - все изменения тут же отображаются на приведенных примерных подсказках. В рамках каждого шаблона доступны разные цветовые схемы, также можно выбрать шрифт текста внутри облака подсказок, и его размер. Боковая панель подсказок может быть перемещена в другой край экрана а ее отступ сверху - изменен.

Для более тонкой настройки цветов подсказок нажмите на заголовок блока "Цветовая схема" - будет открыто дополнительное окно тонких настроек цвета, где можно изменить некоторые специфические для данного шаблона цвета.

Как только вы закончите настройку внешнего вида подсказок, нажмите кнопку "Сохранить стиль". Стилизатор будет закрыт а подсказки изменят свой внешний вид. Кнопка "Закрыть" или клавиша "Esc" закроет стилизатор без применения изменений.

Если вы установили подсказки на несколько сайтов, вы можете воспользоваться функцией "Импорт стилей". С помощью этой функции можно настроить внешний вид на одном из сайтов, а после использовать этот стиль и на других своих сайтах. Для импорта нажмите соответствующую кнопку в самом низу панели стилизатора. В панели импорта стилей выберите сайт, стиль подсказок которого хотите применить для текущего сайта.

Работа с подсказками

Просмотр подсказок

Первая из созданных подсказок автоматически включается при заходе на страницу и указывает на элемент, к которому она прикреплена.

Важно!Если первая подсказка прикреплена ниже экрана, который показывается при загрузке, то она будет не заметна. По умолчанию первая подсказка не пролистывает экран до своего расположения, - эту опцию можно включить в настройках показа подсказок в панели управления подсказками. Подробнее - «Панель управления подсказками - Настройки показа подсказок».

При повторной загрузке страницы этим же пользователем будет вновь показана первая из созданных подсказок, если ее не закрыли\отключили\продолжили просмотр. При последующих загрузках страниц будет показаться начальная подсказка, пока пользователь не отреагирует на нее: закроет, отключит или продолжит смотреть следующие подсказки - какой-либо клик по облаку подсказки определяет ее, как просмотренную. При следующей загрузке страницы покажется вторая, третья и так далее подсказка — те подсказки, которые считаются непросмотренными.

Информация.Если пользователь за один сеанс просмотрел все подсказки, то при последующих загрузках страницы, подсказки показываться ему не будут. Вернуться к просмотру подсказок можно с помощью панели управления подсказками.

Подсказку можно закрыть в текущем сеансе, что приведет к загрузке следующей подсказки в следующем сеансе.

Можно продолжить просмотр всех подсказок страницы с помощью кнопок «Вперед» и «Назад». При просмотре подсказок экран будет фокусироваться на них — листаться до места размещения подсказки. Для просмотра подсказок можно использовать панель управления подсказками.

Подсказки можно отключить, используя опцию в облаке подсказки
Для этого также можно использовать панель управления подсказками

После отключения подсказки данному пользователю демонстрироваться не будут, однако возможность включения и просмотра подсказок всегда будет доступна в панели управления подсказками.

Статусы подсказок

Подсказки в режиме администратора могут иметь различные статусы. Об особом статусе подсказки сведительствует знчек в ее правом верхнем углу.

«Отображающаяся подсказка»

«Черновая подсказка» (желтый восклицательный знак в правом верхнем углу). Такая подсказка не будет показываться посетителям сайта.

Важно!В статус черновой подсказки могут переходить созданные подсказки, которые не подошли по требованиям тарифного плана «Бесплатный» при смене его с какого-либо платного тарифного плана — если созданных подсказок было больше, чем разрешено бесплатным планом, то все лишние перейдут в статус черновых. При возобновлении платного плана необходимо каждую подсказку перевести из режима «Черновая подсказка» в режим «Отображающаяся подсказка» нажав на при редактировании подсказки.

«Элемент отсутствует» (красный восклицательный знак в правом верхнем углу). Такая подсказка не будет показываться посетителям сайта.

Подсказки, имеющие такой статус, были прикреплены к элементу, которого по различным причинам нет на текущей странице. Некоторые причины:

  1. Элемент действительно отсутствует.
    На странице действительно нет элемента, к которому была прикреплена подсказка, сама подсказка просто не отобразится пользователям. Если же вы все-таки видите этот элемент, но подсказка к нему не прикреплена, то возможные причины, которые описаны ниже.

  2. Изменился селектор элемента.
    Возможно, когда элемент присутствует на странице, но находится в иной ее части, изменился блок, в котором находится элемент или структура страницы. Данная проблема может быть решена путем указания правильного селектора самостоятельно в «Дополнительных настройки подсказки», либо же созданием другой подсказки для этого элемента.

  3. Элемент появился на странице позже чем прорисовались подсказки.
    Если подсказка прикреплена к элементу, который появляется на странице после отображения подсказок (событие document.ready), то вы можете попробовать прикрепить подсказку к родительскому блоку этого элемента, или же запускать инициализацию подсказок позже, используя API.

Очередность подсказок

Подсказки будут отображаться в той очередности, в которой они созданы. Чтобы изменить очередность отображения подсказок, необходимо открыть панель управления подсказками и выбрать вкладку «Все подсказки». Формировать очередность отображения подсказок можно простым перетаскиванием подсказки вверх-вниз.

Группы страниц

С помощью опции «Группы страниц» можно отображать определенные подсказки только на определенных страницах вашего сайта. Управлять группами страниц можно во вкладке "Группы страниц" в окне дополнительных настроек подсказки. Для этого необходимо в панели со списком подсказок кликнуть на кнопку "Редактировать подсказку"
Затем в появившемся облаке необходимо открыть окно дополнительных настроек подсказки, нажав на кнопку "Настройки" 
Далее необходимо перейти на вкладку "Группы страниц". В этой вкладке нужно отметить те группы страниц, на которых вы хотите видеть подсказку. Здесь же можно создавать, редактировать и удалять группы страниц.

Для создания группы нужно заполнить поля «Название группы страниц» и «Путь к странице соответствует». Во втором поле необходимо указать маску (шаблон) пути для страниц, на которых вы желаете отображать подсказки из этой группы, используя формат DOS:
? - соответствует одному любому символу в пути;
* - соответствует любому количеству символов (0 и более).

Например:Нужно отображать подсказки только на страницах товаров.
Товры выводится на страницах типа "http://www.mysite.com/products/1", "http://www.mysite.com/users/210", "http://www.mysite.com/users/210?details=true" и подобных.

Создадим группу страниц c названием "Страницы товаров".
В поле «Путь к странице соответствует» напишем "/products/*" (без протокола http и без домена www.mysite.ru).
Сохраним группу, после чего она добавится в список групп страниц. Выбираем данную группу для текущей подсказки и сохраняем подсказку. Теперь эта подсказка будет отображаться только на страницах, путь к которым совпадает с маской "/products/*".

Типы пользователей

С помощью опции «Типы пользователей» можно отображать определенные подсказки только для определенных посетителей вашего сайта. Управлять группами страниц можно во вкладке "Типы пользователей" в окне дополнительных настроек подсказки. Для этого необходимо в панели со списком подсказок кликнуть на кнопку "Редактировать подсказку"
Затем в появившемся облаке необходимо открыть окно дополнительных настроек подсказки, нажав на кнопку "Настройки" 
Далее необходимо перейти на вкладку "Типы пользователей". В этой вкладке нужно отметить те типы пользователей, для которых вы хотите отображать подсказку. Здесь же можно создавать, редактировать и удалять типы пользователей.

Для создания типа пользователя достаточно заполнить поле «Название типа пользователей». Сохраните тип, после чего он добавится в список типов пользователей. Выберите данный тип для текущей подсказки и сохраните подсказку. Теперь эта подсказка будет отображаться только для тех посетителей, которые будут определены как "VIP-пользователи".

Важно!Однако следует понять, что в отличии от групп страниц, определение и отслеживание типов посетителей ложится на администратора сайта.
Сервис не может автоматически определить, какой тип пользователя зашел на сайт, ему нужно сообщать об этом посредством API, передавая опцию "userTypes" в метод start.

Например:Нужно определить тип пользователя, зашедшего на сайт, и передать этот тип для отображения ему соответствующих подсказок.
Для этого нужно использовать метод API start и передать в него параметр "userTypes". JavaScript-код вызова API должен выглядеть так:
  1. _hintArea("start", {userTypes: ["VIP-пользователи"]});
Выполнение такого кода на странице даст понять скрипту Hintarea, что пользователь, который просматривает подсказки в данный момент является VIP-пользователем, поэтому ему будут показаны не только общие подсказки, но и подсказки, у которых отмечен соответствующий тип пользователя.
Обратите внимание, что подсказки у которых отмечена галочка "Все пользователи" будут показываться всем пользователям независимо от того какой тип вы передали.
Предположим вы используете PHP на своем сайте. В таком случае вы можете использовать код, подобный этому для подклчения подсказок на сайт (пердполагается, что метод getCurrentUserType() реализован и возвращает строку с именем типа текущего пользвоателя):
  1. <script type="text/javascript">
  2. (function(w,d,s,u,h,a,m){w[h]=w[h]||function(){(w[h].q=w[h].q||[]).push(arguments)};a=d.createElement(s),m=d.getElementsByTagName(s)[0];a.async=1;a.src=u;a.charset='utf-8';m.parentNode.insertBefore(a,m)})(window,document,'script','//hintarea.com/hint.js','_hintArea');
  3. _hintArea("start", {userTypes: ["<?php echo getCurrentUserType(); ?>"]});
  4. </script>
Поместив такой код на странцие вы получите подсказки, которые при подключении автоматически подстраиваются под тип пользователя, зашедшего на сайт.

Каждая подсказка может отображаться для нескольких групп пользователей, а каждый посетитель может принадлежать к несклоьким типам, к примеру такой запрос к API инициализирует и отобразит подсказки, входящие в группы "Все пользователи", "Зарегистрированные", "Муужчины".

  1. _hintArea("start", {userTypes: ["Зарегистрированные", "Мужчины"]});

Важно!Администратор видит все подсказки актуальные дла данной страницы, независимо от настроек и переданных параметров.

Кросс-страничные туры

Кросс-страничные туры подходят для обучения или знакомства с возможностями вашего проекта. Организуйте туры, которые помогут пользователю изучить ресурс, совершить ключевые действия или же просто быстро познакомиться с основными возможностями.

Создание туров

Для создания и управления турами используйте вкладку "Кросс-страничные туры" на панели подсказок.

Для начала перейдите на страницу, с которой хотите начать прохождение (в последствии именно с этой страницы будет начинаться показ шагов) и нажмите на кнопку "Создать тур".

В отобразившейся форме введите название и нажмите "Сохранить". Обратите внимание, что перед началом просмотра тура, пользователь будет переведен на страницу с URL, указанным в соответствующем поле.

Вы перейдете в режим выбора элемента, к которому будет прикреплена первая подсказка в туре. Выберите целевой элемент и в отобразившейся форме введите заголовок и текст шага. Для подсказки в туре доступны такие же настройки, как для обычной, однако вам также нужно будет выбрать действие пользователя, после которого текущий шаг будет считаться выполненным.

Шаг может считаться выполненным после следующих действий:

  • Клик на кнопку "Далее". Если выбран данный тип поведения, то на подсказке в туре будет показана соответствующая кнопка, и при клике на нее пользователю будет показан следующий шаг. Используйте для ознакомительных сообщений, не требующих никакого действия от пользователя.

  • Клик на целевой элемент. Переход к следующему шагу будет осуществлен после того, как пользователь кликнет на целевой элемент подсказки.

  • Переход на другую страницу или ее обновление. Полезно использовать для ссылок, когда от пользователя требуется перейти на какую-либо страницу для продолжения тура.

  • Наведение на целевой элемент. Переход к следующему шагу будет осуществлен после того, как пользователь наведет на целевой элемент подсказки.

  • Ввод текста. После ввода текста в поле будет отображена следующая подсказка. Используйте только для текстовых полей.

После создания первой подсказки, вы снова попадете в режим выбора целевого элемента для следующей подсказки. Если хотите выйти из него, можете нажать клавишу "Esc".

Для переименования или удаления всего тура, а также редактирования уже созданных шагов внутри тура используйте иконки на панели подсказок. Кнопка "▶" возле названия тура начинает показ созданного вами тура.

Просмотр туров посетителем

Для пользователя, зашедшего на ваш сайт, в боковой панели подсказок наряду с обычными пошаговыми подсказками, в самом верху списка будут отображаться созданные вами кросc-страничные туры.

Пользователь может начать просмотр тура кликнув на пункте с названием тура. Вы также можете инициировать показ тура самостоятельно с помощью метода API startTour, передав в него ID тура (подробнее в разделе «Описание других методов - startTour»). Идентификатор тура - это число, которое можно узнать открыв форму редактирования тура - ID будет указан в шапке окна.

Например:Вы можете разместить на странице своего сайта кнопку "Ознакомительный тур" и в обработчике нажатие этой кнопки инициировать показ созданного вами тура:
  1. <div id="start-tour-btn">Ознакомительный тур</div>
  2. <script type="text/javascript">
  3. // Вешаем обработчик на нажатие кнопки
  4. document.getElementById("start-tour-btn").addEventListener("click", function(){
  5. _hintArea("startTour", 351);
  6. }, false);
  7. </script>

Поддержка сайтов

Подсказки Hintarea способны работать с различными видами сайтов в контексте технологий, на которых они реализованы.

SSL

Подсказки Hintarea поддерживают загрузку и передачу запросов по защищенному протоколу https.

One-page (одностраничные) сайты

Подсказки Hintarea поддерживают так называемые One-page сайты - сайты, на которых отображение новых данных происходит с помощью AJAX, без фактической перезагрузки страницы. Подсказки реагируют на изменение URL и в зависимости от этого переинициализируются.

Информация.Вы также можете перезагрузить подсказки самостоятельно, вызвав в контексте страницы метод _hintArea("start", {}). Данный запрос к API принудительно запускает процес инициализации подсказок. Таким образом вы можете обновлять подсказки даже если URL страницы не изменился.

Многодоменные сайты

Если ваш сайт расположен на нескольких поддоменах (например mysite.com, ru.mysite.com, en.mysite.com), то изначально подсказки будт работать только на корневом домене (на том, который вы задали при создании сайта, а все поддомены будут расматриватся как отдельные сайты). Однако есть возможность поместить подсказки на все субдомены, зарегистрировав в систем лишь один домен. Для включения этой опции необходимо перейти в «Настройки сайта» и включить переключатель "Подсказки на поддоменах сайта":

Важно!При включении данной опции код для подключения подсказок, сгенерированный в инструкциях, будет отличаться от стандартного.
При использовании метода start из API HintArea всегда должен передаваться параметр "parentDomain".

После этого подсказки на всех поддоменах будут абсолютно одинаковы. Если же вы хотите, чтобы на каждом субдомене подсказки отличались, необходимо каждый поддомен регистрировать в системе как отдельный сайт.

Self-hosting (автономная работа)

Услуга self-hosting позволяет использовать подсказки, созданные для вашего сайта с помощью нашего сервиса, автономно, без взаимодействия с серверами Hintarea.

Этот вариант может быть использован там, где нет возможности или нежелателен обмен данными со сторонними серверами в Интернете: в интранет-сайтах, в сетях с повышенными требованиями к безопасности, для встраивания подсказок в офлайновые продукты (например CMS).
Так же данная функция может быть интересна тем, кто не хочет быть зависимым от ежемесячной платной подписки.
Опция доступна только в рамках индивидуального плана, ее стоимость оговаривается отдельно.

Как это работает. Вы создаете для своего сайта подсказки, используя наш сервис как обычно. После того, как все подсказки готовы, настроены и стилизованы должным образом, вы загружаете javascript-файл, содержащий в себе всю информацию о созданных подсказках и логику для их отображения на вашем сайте. Также вы получите css-файл со стилем подсказок. Подключите скачанные файлы на своем сайте как обычную js-библиотеку, и подсказки будут работать, при этом не обмениваясь никакими данными с Hintarea.

Как использовать. Зарегистрируйтесь на Hintarea и добавьте свой сайт на сервис, выберите индивидуальный план, сообщите что хотите использовать функцию self-hosting. Скачайте наше расширение для браузера и с его помощью создайте подсказки на своем сайте. Когда подсказки будут готовы, нажмите кнопку "Установить скрипт" в расширении для браузера.

Важно!Кнопка "Установить скрипт" в расширении будет отображаться только для сайтов, у которых включена функция self-hosting в рамках индивидуального плана.

Вы будете перенаправлены на страницу со ссылками для скачивания файла скрипта и файла стилей и инструкциями о подключении их на ваш сайт. Загрузите эти файлы, дальше подключите их на своем сайте как обычную javascript-библиотеку.

После этого, на вашем сайте всем посетителям будут отображаться созданные вами подсказки. Вы так же сможете использовать API для управления ними.

Поскольку данные уже внедрены в скрипт, подсказки будут полностью автономны. Их работа на вашем сайте не будет зависеть от работоспособности нашего сервиса, изменений в тарифах и т.д. Однако после внесения изменений в подсказки, вам нужно будет заново загрузить скрипт и заменить им старый файл.

Информация.После окончания срока действия индивидуального плана вы больше не сможете загружать скрипт для селф-хостинга. Если в будущем вам понадобится внести изменения в подсказки, вам нужно будет снова покупать индивидуальный план.

Тарифные планы и транзакции

Сервис Hintarea предлагает 3 тарифных плана: Бесплатный, Стандартный и Индивидуальный. Ознакомиться с особенностями каждого плана можно, на странице Тарифы.

Тарифные планы

При добавлении сайта в систему пользователю предлагается на выбор один из тарифных планов. Для выбора сразу доступен тарифный план «Бесплатный».

Тарифный план «Стандартный» может быть активирован, если на счету пользователя имеется достаточная сумма.

Выбор плана «Индивидуальный» инициализирует обратную связь администрации сервиса Hintarea с заказчиком для выяснения его потребностей и возможных доработок сервиса. После определения требований тарифный план «Индивидуальный» создается администрацией отдельно для каждого сайта и определяется его стоимость.

Бесплатный тарифный план автоматически продляется каждый месяц, однако может стать неактивным, если будет превышен лимит загрузок, после чего подсказки перестанут отображаться посетителям вашего сайта до следующего продления. Чтобы возобновить работу подсказок вы можете купить стандартный план.

Стандартный и индивидуальный планы предоставляются пользователю на 1 месяц, по истечению которого (или после исчерпания лимита загрузок в рамках плана), в зависимости от выставленных в настройках сайта значений произойдет следующе:

  1. План продлится, если включено "Автопродление плана" и на вашем счету достаточно денег для покупки. Вы будете уведомлены по e-mail о снятии средств с вашего счета за продление тарифного плана.

  2. Вы будете переведены на бесплантный план, если на вашем счету не достаточно денег и включена опция "Автопереход на бесплатный план".

  3. Вы также будете переведены на бесплантный план, если включена опция "Автопереход на бесплатный план", но выключено "Автопродление плана".

  4. Текущий план станет неактивным и подсказки перестанут отображаться посетителям вашего сайта, если опции "Автопродление плана" и "Автопереход на бесплатный план" выключены.

Важно!В случае перехода с платного на бесплатный план, начинают действовать ограничения на количество созданных подскзок. Подсказки, которые превышают это ограничение автоматически станут черновыми и не будут показываться посетителям (подробнее о черновых подсказках в разделе «Статусы подсказок»).

Неактивный план после пополнения счета можно активировать вручную, нажав на кнопку «Start plan»:

Страница транзакций

Текущее состояние счета пользователя отображается в верхнем меню сайта
Валюта всех финансовых операций - USD. Чтобы получить детальную информацию о средствах на сайте, кликните по указанной в меню сумме баланса. В открывшейся странице доступна детализация всех когда-либо совершенных финансовых транзакций на сайте, а также есть возможность пополнить счет.

При пополнении счета пользователь будет перенаправлен на сайт Robokassa.ru, где сможет провести пополнение счета. Сервис Hintarea проверит транзакцию и начислит соответствующую сумму на баланс пользователя.

Расшифровка статусов транзакций, отображающихся в таблице:

'запрос транзакции' — введена сумма, инициирована процедура оплаты, но пользователь покинул сайт Robokassa

'ошибка транзакции' — по каким-либо причинам оплата не прошла. Подробности пользователь сможет узнать, связавшись с администрацией.

'транзакция отменена' - введена сумма, инициализирована процедура оплаты, но потом была отменена.

'транзакция обрабатывается' - введена сумма, инициирована процедура оплаты, выбрана система оплаты и осуществляется перевод средств. Этот статус будет активен, пока средства не будут зачислены на счет Hintarea.

'успешно завершена' — средства зачислены на счет.

Важно!Платежные системы, с которыми работает сервис Hintarea, представлены на сайте Robokassa.ru.На данном этапе сервис Hintarea не предполагает вывода средств. Данная возможность появится несколько позже.

Партнерская программа

Сервис Hintarea предлагает пользователям принять участие в партнерской программе. Каждому пользователю предоставляется реферальная ссылка и кабинет партнерской программы, в котором представлены данные о рефералах, их сайтах, а также партнерские отчисления з период.

Подробнее об условиях партнерской программы и партнерском соглашении можно узнать на странице Партнерам.

Статистика

Для всех тарифных планов доступна статистика загрузок скрипта и просмотров подсказок. Чтобы просмотреть статистику уже добавленного сайта, нужно перейти на страницу «Мои сайты» и нажать значок напротив выбранного сайта.

Загрузка — одна загрузка нашего скрипта на вашем сайте. Происходит во время каждой загрузки страницы. Фактически равна одному просмотру страницы сайта.

Просмотр — это показ подсказки, который определяется каким-либо действием по подсказке. Подсказка считается просмотренной, если по ней кликнули в любом месте облака подсказки.

На данном этапе доступен выбор представления статистики: таблица или график, и возможность получить данные за определенный период.

Для тарифного плана «Индивидуальный» мы предлагаем услугу подключения и настройки статистики в Google Analytics.

Важно!Сервис Hintarea не собирает никаких данных, кроме статистики использования собственных подсказок. Без ведома клиента никакого сбора каких-либо других данных производится не будет. Мы также можем гарантировать сохранность и анонимность информации, собранной по запросу клиента.

Расширение "Hintarea demo" для Google Chrome

Для оценки того, как выглядят и работают подсказки на вашем сайте, мы разработали расширение для браузера Google Chrome. Расширение позволяет в несколько кликов установить подсказки без установки кода на сайте. Подсказки в стиле "по умолчанию" будут видны только для вас и только в вашем браузере. Подробнее о расширении Hintarea demo для Google Chrome.

Hintarea API

Вступление

Для подключения подсказок Hintarea необходимо разместить полученный в процессе добавления сайта Javascript-код на страницах вашего сайта.

Данный код асинхронно загружает скрипт, необходимый для работы подсказок, благодаря чему загрузка страниц вашего сайта не замедляется.

Также приведенный выше javascript объявляет в контексте страницы функцию _hintArea(), которая используется для обращения к API нашего сервиса. Соответственно, обращаться к API посредством функции _hintArea() можно только после исполнения кода для подключения скрипта подсказок.

  1. <script type="text/javascript">
  2. // Код для подключения скрипта подсказок
  3. (function(w,d,s,u,h,a,m){w[h]=w[h]||function(){(w[h].q=w[h].q||[]).push(arguments)};a=d.createElement(s),m=d.getElementsByTagName(s)[0];a.async=1;a.src=u;a.charset='utf-8';m.parentNode.insertBefore(a,m)})(window,document,'script','//hintarea.com/hint.js','_hintArea');
  4. // Здесь уже можно делать запросы к API
  5. _hintArea("start"); // Запуск подсказок с помощью API
  6. </script>

Формат вызова функии _hintArea() следующий:

  1. _hintArea("methodName", parameter);

На данный момент доступны следующие методы:

  • start
  • stop
  • showPanel
  • hidePanel
  • showHint
  • hideHints
  • enableHints
  • disableHints
Информация:Все вызовы API хранятся в стеке и выполняются поочередно по мере возможности. Рассмотрим ход выполнения такого кода:
  1. _hintArea("start", {});
  2. _hintArea("showPanel");
  3. _hintArea("showHint", 51);
Первый вызов запустит процедуру инициализации подсказок (или переинициализации, если они уже работают на данный момент). Этот процесс займет некоторое время, так как будет совершен запрос данных на сервер Hintarea. После успешной загрузки данных и отрисовки на странице подсказок выполнится второй метод, который покажет панель подсказок, после чего будет отображена подсказка с ID 51.

Описание метода start

Метод start отвечает за инициализацию и старт отображения подсказок и устанавливает настройки их работы. Каждый повторный вызов полностью удаляет все подсказки со страницы и загружает их заново.

Этот метод вызывается в коде, выдаваемом вам при регистрации сайта. Однако вы можете не запускать подсказки сразу, а сами определить нужный момент.

Например:Так, вы можете запустить подсказки только после определенного события, например после полной загрузки страницы (событие window.load):
  1. <script type="text/javascript">
  2. // Код подключения подсказок
  3. (function(w,d,s,u,h,a,m){w[h]=w[h]||function(){(w[h].q=w[h].q||[]).push(arguments)};a=d.createElement(s),m=d.getElementsByTagName(s)[0];a.async=1;a.src=u;a.charset='utf-8';m.parentNode.insertBefore(a,m)})(window,document,'script','//hintarea.com/hint.js','_hintArea');
  4. // Запускаем подсказки только после полной загрузки всех ресурсов на странице
  5. window.addEventListener("load", function(){
  6. _hintArea("start");
  7. }, false);
  8. </script>
Это может быть полезно, если у вас на странице есть элементы, которые появляются с опозданием, так как обычно подсказки начинают отображаться на событие document.ready.

Метод start принимает хеш с настройками как параметр. Формат вызова:

  1. _hintArea("start", Object options);

Возможные ключи объекта options: userTypes, lang, firstScroll, highlightTarget, path, parentDomain.

userTypes. Массив строк.
Этот параметр устанавливает тип пользователя, который просматривает подсказки. Данная опция дает понять скрипту Hintarea, что пользователь, который просматривает подсказки в данный момент входит в определенную группу, поэтому ему нужно показывать не только общие подсказки, но и подсказки, у которых отмечен соответствующий тип пользователя.
Подробнее об использовании этого параметра и примерах вызова читайте в разделе «Типы пользователей»

lang. Строка. Возможные значения: "ru", "en", "ua".
Этот параметр устанавливает язык интерфейса подсказок. Он имеет больший приоритет, чем значение, установленное в настройках сайта. Данный параметр полезно использовать для сайтов с многоязычным интерфейсом, чтобы каждому пользователю демонстрировались подсказки на том языке, который в данный момент выбран как язык интерфейса сайта. Пример инициализации подсказок с украинским интерфейсом:

  1. _hintArea("start", {lang: "ua"});

hintsEnabledByDefault. Булевое значение.
Если false, то для новых посетителей, подсказки будут инициализированы в состоянии "выкл.", соответственно непросмотренные подсказки не будут отображаться на странице автоматически, до тех пор, пока пользователь сам не обратится к ним или не включит с помощью переключателя в боковой панели. Параметр действует только на пользователей, которые впервые увидят подсказки на вашем сайте, предпочтительные настройки других пользователей не поменяются. Используйте значение false, если не хотите, чтобы подсказки показывались, пока пользователь сам не обратится к ним. Пример использования параметра:

  1. _hintArea("start", {hintsEnabledByDefault: false});

firstScroll. Булевое значение.
Если true, то после инициализации подсказок страница будет листаться до первой непросмотренной подсказки, если такая есть. Этот параметр имеет больший приоритет, чем значение оцпии "Фокусироваться на первой подсказке", установленное в настройках подсказок. Полезно использовать чтобы сфокусировать внимание на подсказках, особенно, если подсказка размещена на странице вне зоны первоначальной видимости. Пример использования параметра:

  1. _hintArea("start", {firstScroll: true});

highlightTarget. Булевое значение.
Если true, то то при переходе к подсказке весь сайт, кроме целевого элемента, на который указывает подсказка будет затенен полупрозрачным фоном. Этот параметр имеет больший приоритет, чем значение оцпии "Выделять целевой элемент", установленное в настройках подсказок. Полезно использовать чтобы сфокусировать внимание на важных деталях. Пример использования параметра:

  1. _hintArea("start", {highlightTarget: true});

path. Строка.
Перекрывает путь текущей страницы другим. В результате загружаются подсказки, актуальные для переданной страницы.

Например:Вы хотите, чтобы на странице с путем /registrations/users/whateveruwhant/135483/callback/show_user отобразились такие же подсказки, как на странице профиля пользователя, путь к которой /users/25.
Или же страницы на вашем сайте загружаются аяксово, при этом URL не меняется. В таком случае после каждой загрузки страницы вы можете перезапускать подсказки, передавая в параметре "path" путь к загруженной странице.
  1. _hintArea("start", {path: "/users/25"});

parentDomain. Строка.
Указывает домен сайта, зарегистрированного в сервисе Hintarea, с которого нужно загружать подсказки. Если вы включили опцию "Подсказки на поддоменах сайта", то при каждом вызове метода start вам необходимо передавать этот параметр.

  1. <script type="text/javascript">
  2. (function(w,d,s,u,h,a,m){w[h]=w[h]||function(){(w[h].q=w[h].q||[]).push(arguments)};a=d.createElement(s),m=d.getElementsByTagName(s)[0];a.async=1;a.src=u;a.charset='utf-8';m.parentNode.insertBefore(a,m)})(window,document,'script','//hintarea.com/hint.js','_hintArea');
  3. // Инициализация подсказок с передачей корневого домена сайта
  4. _hintArea("start", {parentDomain: "mysite.com"});
  5. </script>

Подробнее об работе подсказок на мультидоменных сайтах читайте в разделе «Многодоменные сайты».

Описание других методов

stop

Останавливает работу подсказок и удаляет их со страницы.
Не принимает параметров.

  1. _hintArea("stop");

Важно!После вызова метода stop обращения к API не будут работать, пока подсказки не будут вновь запущены с помощью метода start.

showPanel

Показывает панель подсказок.
Не принимает параметров.

  1. _hintArea("showPanel");

hidePanel

Скрывает панель подсказок.
Не принимает параметров.

  1. _hintArea("hidePanel");

showHint

Показывает указанную подсказку. Если подсказка с переданным идентификатором отсутствует на странице, то ничего не происходит.
Принимает ID подсказки как параметр.

  1. _hintArea("showHint", 253);

hideHints

Скрывает все отображаемые подсказки, если такие есть.
Не принимает параметров.

  1. _hintArea("hideHints");

enableHints

Включает показ подсказок пользователю. По умолчанию подсказки включены. Это значит, что непросмторенные подсказки будут появляться на странице, до тех пор пока пользователь не обратит на них внимание - просмотрит или закроет.
Не принимает параметров.

  1. _hintArea("enableHints");

disableHints

Выключает показ подсказок пользователю. Вызов данного метода аналогичен пометке галочки "Отключить подсказки" в облаке подсказки. После выключения подсказок, они не будут появляться на странице, хотя их по прежнему можно будет просмотреть используя боковую панель.
Не принимает параметров.

  1. _hintArea("disableHints");

startTour

Начинает показ указанного тура. Если тур с переданным идентификатором отсутствует, то ничего не происходит.
Принимает ID тура как параметр.

  1. _hintArea("startTour", 12);

stopTour

Останавливает отображение просматриваемого на данный момент тура.
Не принимает параметров.

  1. _hintArea("stopTour");