Базовые настройки позволяют выбрать положение кнопки на одном из краев экрана (левом, нижнем и правом), текст надписи (поддерживаются любые языки, при изменении настроек языка сайта надпись не меняется автоматически), отступ от края экрана (задается перемещением бейджа в окне просмотра результатов изменений), цвет (выбирается из стандартной палитры с регулируемой интенсивностью) и размер бейджа (маленький - 38 на 174 пикселя, средний - 43 на 183 пикселя, большой - 50 на 206 пикселей).

С помощью API возможно сделать любой элемент сайта кнопкой вызова чата (обрабатывается стандартное событие клика - onclick). Например:

• Текст

  <span class="redhlp_button redhlp_withBadge" style="text-decoration:underline; color:red;">текст, клик на который вызывает окно чата.</span>

  Класс redhlp_button redhlp_withBadge указывает, что вместе с самодельной кнопкой необходимо показывать и обычную. В противном случае используйте класс redhlp_button.

  В результате получим текст, клик на который вызывает окно чата.

• Картинка

  <img class="redhlp_button redhlp_withBadge" src="API/img/statpic.png">

  Класс redhlp_button redhlp_withBadge указывает, что вместе с самодельной кнопкой необходимо показывать и обычную. В противном случае используйте класс redhlp_button.

  В результате получим картинку, клик на который вызывает окно чата:

  

• Своя кнопка, копирующая поведение стандартной

  <div id="rh-customBadge" class="redhlp_button redhlp_withBadge rh-medium">
  <div class="rh-inner rh-reset">
  <div class="badgeImage" class="rh-reset"></div>
  <img src="/API/img/button1.png" class="rh-reset"/>
  </div>
  </div>
  

  Класс redhlp_button redhlp_withBadge указывает, что вместе с самодельной кнопкой необходимо показывать и обычную. В противном случае используйте класс redhlp_button.

  #rh-customBadge { ... }

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

  #rh-customBadge:hover { ... }

  Класс, описывающий поведение бейджа при наведении на него курсора.

  .redhlp_online #rh-customBadge .badgeImage { ... background-image: url(/API/img/bubble.png); }

  Класс, описывающий поведение индикатора в случае, если все операторы недоступны (изображение конверта).

  .redhlp_offline #rh-customBadge .badgeImage { ... background-image: url(/API/img/mail.png); }

  Класс, описывающий поведение индикатора в случае, если хотя бы один из операторов доступен (изображение облака с чатом).

  .redhlp_openChat #rh-customBadge { display: none !important; }

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

  Результат можно видеть на правой границе страницы сайта. Кнопка ведет себя также, как стандартная (реакция на наведение, нажатие, отображение состояния оператора).

Посмотреть исходный код примера можно нажав Ctrl+U (браузер Chrome) или выбрав в меню браузера опцию "Просмотреть исходный код".
Запустить консоль - F12 (браузер Chrome) или "Инструменты разработчика".