Виджет встраивается в сайт путем вставки JS кода в HTML код Вашего сайта.

<!-- Start SiteHeart code -->
<script>
(function(){
// your widget ID
var widget_id = 1;
_shcp = [{widget_id : widget_id}]; 
// set default language
var lang = (navigator.language || navigator.systemLanguage 
	|| navigator.userLanguage ||  "en")
	.substr(0, 2).toLowerCase();
// script url
var url  = "widget.siteheart.com/widget/sh/" + widget_id + "/" 
  +  lang + "/widget.js"; 
var hcc = document.createElement("script"); 
hcc.type = "text/javascript"; 
hcc.async = true; 
hcc.src = ("https:" == document.location.protocol ? "https" : "http") 
  +   "://" + url; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hcc, s.nextSibling);
})();
</script>
<!-- End SiteHeart code -->

Настроить виджет можно в административной панели https://admin.siteheart.com/settings/widget/edit

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

Например:

На данной странице виджет будет отображаться вверху.

_shcp = [{widget_id : 1, side : ‘top’}];

Виджет спроектирован таким образом, чтобы его можно было адаптировать к стилям Вашего сайта. Вы можете изменить практически все элементы, настроить шрифт, цвет, размер, отступы, фон, границы и т.д. Единственный элемент,который запрещается изменять это copyright (ссылка на siteheart.com).
Для того чтобы изменить стили элемента, Вам нужно просто переопределить основные стили виджета. Сделать это очень просто. Вам нужно в CSS файле Вашего сайта прописать нужный селектор и задать для него стили с высшим приоритетом используя слово important.

Например,чтобы изменить цвет кнопки пропишите в css:

.sh_btn{ 
   background-color: #4d90fe!important;
}

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

_shcp = [{widget : “Chat”, callback : function(chat){ } }];

Используя экземпляр виджета chat можно подписаться на разные события, изменять их и отменять. Например:

callback = function(chat){
   // не показывает, что оператор подключился к диалогу
   chat.on("clientRoomSellerAccepted", function(data){ 
         return false; 
   });
		
   // вызывается когда клиент закрывает окно чата
   chat.on("eventJSWidgetExit", function(){
	  $('#embed_chat').hide();  
   });
};