Наверх
Подписаться

Перемещение кнопки обратного звонка в левую часть экрана

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

calltouch_callback_button.png

 

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

 

1. В контейнере <head> необходимо разместить следующие стили CSS:

Скопировать стили
<style>
/* Расположение кнопки обратного звонка Calltouch в левой части экрана */
#calltouch_callback_button {
    right: null !important;
    left: 60px !important;
  }

a#setсookiectbt {
    right: 450px !important;
  }

#minctbut {
    right: null !important;
    left: 0px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 900px !important;
  }

.ctbutton_7 {
    right: null !important;
    left: 9px !important;
  }

#ctbt_copyright {
    right: 140px !important;
    }
/* Расположение кнопки обратного звонка Calltouch в левой части экрана */
</style>

 

2. В контейнере <head> после кода из пункта 1 разместить следующий скрипт JS:

Скопировать скрипт
<!-- Изменение положения кнопки обратного звонка, работает только совместно
с корректировками в CSS -->
<script type="text/javascript">
$(window).bind('load', function(){
setTimeout(function () {
$('#ctbt_call_up').on('click', function (e) {
  var phone = clearPhoneNum($('#ctbt_phone').val());
  if (validatePhone(phone)) {
   $('#ctbt_sider').css({'margin':'22px 0 0 -20px'});
  }
  });
document.onkeyup = function (enter) {
        enter = enter || window.event;
        if (enter.keyCode === 13) {
            var phone = clearPhoneNum($('#ctbt_phone').val());
  if (validatePhone(phone)) {
   $('#ctbt_sider').css({'margin':'22px 0 0 -20px'});
  }
        }
        return false;
    }
}, 10);
 });
</script>
<!-- Изменение положения кнопки обратного звонка, работает только совместно с корректировками в CSS -->

 

Обратите внимание!

Данный скрипт требует обязательного подключения на сайте библиотеки jQuery. Если она не подключена, разместите скрипт ее подключения перед кодом из пункта 2:

Скопировать скрипт

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 

Указанные стили CSS в 1 пункте и указанный скрипт во 2 пункте по Вашему усмотрению можно подключить и во внешних .css и .js файлах - главное, чтобы они были подгружены при загрузке страницы.

По результатам выполнения всех пунктов необходимо обязательно сообщить Вашему аккаунт-менеджеру Calltouch или на почту info@calltouch.net, чтобы мы проверили корректность работы кнопки обратного звонка.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
Еще есть вопросы? Отправить запрос

0 Комментарии

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