Как уговорить callback работать по своей кнопке?

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

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

При установке сервиса обратного звонка Chaser вы, возможно, видели такую ссылку в своем Личном Кабинете:

Обратный звонок

Эту ссылку можно разместить в любом месте, вложив внутрь тега и изображение, добавив любые дополнительные стили. На странице, где в коде размещен основной скрипт виджета, по клику на подобную ссылку сработает открытие окна Chaser.

При этом, вы можете вообще отключить нашу дефолтную кнопку – такая возможность у вас есть в личном кабинете в вкладке «Оформление виджета».

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

В коде Chaser  есть параметр  w.CH_LOADED , определяющий, что виджет на странице загружен.  На этот параметр можно завязать функцию проверки условий показа виджета, и при положительном ответе, давать «добро» на показ ссылок и кнопок с подложенным вызовом окна Chaser.

Выглядит это примерно так:

(function(w, d, undefined) {
    w.CH_SERVER_NAME = '//chaser.ru',
    w.CH_HASH = '4d91e93c7905243a769485162b66e3dc';

    w.CH_LOADED = function(chConfig) {
        if(chConfig.isDisabled != 1)
            $('# custom_button_id').show();
    }

    var p = d.createElement('script'),
    s = d.getElementsByTagName('head')[0];
    p.type = 'text/javascript';
    p.charset = 'utf-8';
    p.async = 'true';
    p.src = (d.location.protocol == 'https:' ? 'https:' : 'http:') + w.CH_SERVER_NAME + '/widget/1.1/js/chaser.js';
    s.appendChild(p);
})(window, document);

В примере, как раз прописан #custom_button_id – это идентификатор нашей новой кнопки. Его надо для нее прописать. Примерно так:

Обратный звонок

Если Chaser может показываться пользователю, то ему покажется и  наша новая кнопка. Если нет, то кнопка будет скрыта.

В случае, если под кнопкой надо оставить форму отправки лида на email, то нужно поменять поведение кнопки.

w.CH_LOADED = function(chConfig) {
    if(chConfig.isDisabled != 1){
        $('# custom_button_id).show();
    }else{
        $('# email_button_id).show();
    }
}

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

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

При этом обратите внимание, что кнопки могут быть очень разными. Это может быть как ссылка:

<a href="#widgetShowForm">Обратный звонок</a>

так и кнопка

<button onClick="chWidget.showWidget();">Заказ звонка</button>