Как привязать обратный звонок к статичной форме

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

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

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

Например, вот так:

<div id="static_chaser" style="display: none;">
    <div id="talkingHead"></div>
    <form id="static_chaser_form">
        <div class="vertical-centered">
            <div class="form-row">
                Закажите бесплатный звонок нашего оператора.
            </div>
            <div class="form-row">
                <input type="text" class="textField phone" name="phone" id="custom-chaser-phone-input" value="+7 ("/>
                <input type="submit" name="makeCall" class="disabled" disabled="disabled" value="Перезвоните мне"  id="custom-chaser-phone-call-button"/>
            </div>
            <i>Оператор свяжется с Вами в течение 30 секунд.</i>
        </div>
    </form>
</div>

И использовать модифицированный скрипт Chaser на этой странице.

    <script type='text/javascript' charset='utf-8'>
    (function(w, d) {
        w.CH_SERVER_NAME = '//chaser.ru',
        w.CH_HASH = 'eef15e7066deb4f1a7a6c1e2d24eda9e'; //заменить на свой CH_HASH
        w.CH_LOADED = function(config) {
            var $ = chWidget.$,
                staticContainer = chWidget.$('#static_chaser'),
                phoneInput = $('#custom-chaser-phone-input'),
                phoneCallButton = $('#custom-chaser-phone-call-button');
                    
            if(config.isDisabled == 1) return;

            if(!staticContainer.size()) return;

            staticContainer.get(0).style.display = '';   

            document.getElementById('talkingHead').style.backgroundImage = 'url(' + config.thead + ')';

            var val = phoneInput.val();
            phoneInput.val('');
            phoneInput.get(0).value = val;

            chWidget.utils.sendData({
                action: 'update_cb_data',
                form_showed: 'staticForm'
            });

            chWidget.utils.phoneInput(phoneInput, function(phone) {
                var phone = ''+phone.replace(/[^0-9]/g, '');
                if (phone.length == 11) {
                    phoneCallButton.removeAttr('disabled');
                    phoneCallButton.removeClass('disabled');
                    phoneInput.addClass('ready');
                } else {
                    phoneCallButton.attr('disabled', 'disabled');
                    phoneCallButton.addClass('disabled');
                    phoneInput.removeClass('ready');
                }
            });

            phoneCallButton.on('click', function(e) {
                e = e || window.event;
                if(e.preventDefault) e.preventDefault();
                else e.returnValue = false;

                var phone = phoneInput.val();

                if (phone !== '' && phone.replace(/[^0-9]/g, '').length == 11 && !phoneInput.hasClass('calling')) {
                    phoneCallButton.attr('disabled', 'disabled');

                    phoneCallButton.val("Звоним…");
                    phoneCallButton.addClass('disabled');
                    phoneInput.attr('disabled', 'disabled');
                    phoneInput.addClass('disabled');
                    phoneInput.addClass('calling');

                    chWidget.utils.reachGoal('ChaserCustom');

                    chWidget.utils.sendData({
                        action: 'make_call',
                        phone: phone
                    });

                    setTimeout(function() {
                        phoneCallButton.removeAttr('disabled');
                        phoneCallButton.val('Позвонить');
                        phoneCallButton.removeClass('disabled');
                        phoneInput.removeClass('calling');
                        phoneInput.removeClass('disabled');
                        phoneInput.removeAttr('disabled');
                        phoneInput.val('+7 (');
                    }, config.timer * 1000);
                }
            });
        }
        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);
    </script>

Обратите внимание: необходимо обязательно использовать свой  CH_HASH.

Результат подобной интеграции колбека со статической формой можно посмотреть на https://chaser.ru/static/index.html