[ClickToCall] Виджет звонка

Представляю Вашему вниманию компонент, который выводит анимационную кнопку «позвонить» для пользователей мобильных устройств.

Для определения мобильных устройств используется библиотека mobile-detect.js

Особенности

Выводит виджет только для пользоваталей мобильных устройств (используется mobile-detect.js).
Гибкая настройка времени отображения виджета по каждому дню.
Можно выключить используемую библиотеку mobile-detect.js в настройках, если Вы уже её используете на сайте.
Имеется возможность использовать собственные JS/CSS файлы.

Настройки компонента:

Параметры сниппета ClickToCall
&force — Принудительный вызов виджета, по умолчанию 0.
&phone — Телефон для виджета, если параметр не указан, то берется значение из системных настроек
&tpl — Чанк с виджетом, по умолчанию ClickToCall.tpl
&useCustomCss — Полностью отключает подключение CSS компонентом.
&useCustomJs — Полностью отключает подключение JS компонентом. (кроме mobile-detect.js, которая отключается в настройках).

Если вы отключили использование CSS и JS, то Вам необходимо самому написать скрипт отображения кнопки и задать свои собственные стили.

Системные настройки:

clicktocall_mobiledetect — Включить использование библиотеки mobile-detect.js. Если Вы уже используете mobile-detect на своём сайте, отключите данную опцию. По умолчанию — Да.
clicktocall_phone — Телефон для виджета по умолчанию

Сниппет должен вызываться не кэшируемым!

Примеры использования:

Для принудительного вызова сниппета используется параметр &force

[[!ClickToCall? &force=`1`]]

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

Если Вам необходимо на разных страницах указывать разный телефон, используйте следующий вызов:

[[!ClickToCall? &phone=`+79991234567`]]

Визуальное отображение виджета

Компонент полностью бесплатный и распространяется под лицензией GNU GPLv3.
Компонет добавлен в MODSTORE, код выложен на GitHub.

Большое спасибо Василию Наумкину и Илье Уткину за прекрасную кодовую базу выложенную на github, отдельно спасибо Михаилу Воеводскому за великолепное обучение написанию компонетов различной сложности, а также Никите Денисову за помощь с ExtJS.

UPD:
Компонент доступен для скачивания в репозитории MODSTORE

Роман Садоян

04 апреля 2016, 07:57

9 073

Комментарии: 53

brioni

04 апреля 2016, 11:39

Меценат, творец, человечище!

Алексей Федоров

04 апреля 2016, 14:18

Присоединяюсь к комменту выше. Это очень здорово!

Роман Викторович Зайцев

04 апреля 2016, 17:31

Супер. Большое человеческое спасибо!

Владимир Ульяновский

04 апреля 2016, 23:09

Супер, очень нужная и полезная штука.
Пожелания к доработке принимаете?
Было бы полезно статистику иметь, например: с какой страницы звонили и тп
так чтоб в метрику можно было загнать как цель…

Роман Садоян

04 апреля 2016, 23:23

Конечно принимаю, я думал над этим, но в метрику и так ведь можно загнать нажатие на кнопку как цель, а она уже покажет всю поднаготную: кто, откуда, когда.

Владимир Ульяновский

05 апреля 2016, 08:25

Роман правильно ли я понимаю что нужно как цель выбирать javascript-событие? А что подставлять в идентификатор цели?

Статистика на сайте в виде виджета думаю многим бы пришлась по душе :)

Роман Садоян

05 апреля 2016, 13:53

Собственно смысл такой, есть чанк, в чанке тэг a с id=«ClickToCall», можете в своём JS написать следующее:

$( document ).ready(function() {
    $( "#ClickToCall" ).on( "click", function() {
     // yaCounterXXXXXX.reachGoal('TARGET_NAME');
    });
});

Евгений

06 апреля 2016, 06:28

Откуда берутся часовые пояса?

Роман Садоян

06 апреля 2016, 07:00

Хороший вопрос, часовой пояс берётся из настроек по ключу — date_timezone, если эта настройка не заполнена, то устанавливается часовой пояс Europe/Moscow

Виктор

05 апреля 2016, 08:15

На modstore его не видно, как его скачать в виде пакета?

Владимир Ульяновский

05 апреля 2016, 08:25

С Github a возьмите

Виктор

05 апреля 2016, 08:34

На гитхабе лежат сорсы. Создавать папки с файлами и править системные настройки не совсем хочется. или я чего-то не знаю?

Алексей Федоров

05 апреля 2016, 09:38

или я чего-то не знаю?

Похоже на то.

С гитхаба нужно скачать архив, залить на сервер (я закидываю в корневую папку), распаковать и запустить файл build.transport.php
Скрипт создает транспортный пакет и автоматически устанавливает в систему. Если установка не прошла, в менеджере запускаем функцию «Искать пакеты локально» и устанавливаем — профит.

Leonid Krylov

05 апреля 2016, 13:27

Выложили!
modstore.pro/packages/other/clicktocall

Сергей Лим

05 апреля 2016, 08:13

Не вижу в магазине

Leonid Krylov

05 апреля 2016, 13:27

modstore.pro/packages/other/clicktocall

Воеводский Михаил

05 апреля 2016, 18:29

Рома, молодец!
Добавил на сайт :)

Лев Вербицкий

06 апреля 2016, 20:55

Одного не понял, а почему только для мобильных?))) Почему обидели десктопщиков)))
А в целом гут)

Роман Садоян

06 апреля 2016, 21:13

ИМХО как то не айс видеть такое (кликабельно):

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

Но в любом случае, можно передать сниппету параметр &useCustomJs=`1`, отключить использование mobile-detect.js в настройках, подключить новый js файл, скопировав функционал из файла clicktocall.js, оставив только:

$(document).ready(function () {
        $('#ClickToCall').css('display', 'block');
});

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

В принципе если кому-то понадобится такой функционал из коробки, почему бы и не реализовать, реализую?!

А в целом гут)

За отзыв — спасибо!

Лев Вербицкий

07 апреля 2016, 12:18

Может вывести в системную настройку? «Отображать для ПК» и «Позиция виджета для ПК и смартфонов» =) Сделать не сложно, а будет отлично)

Роман Садоян

07 апреля 2016, 12:31

Хорошо, добавлю эту возможность в новой версии.

Лев Вербицкий

07 апреля 2016, 12:47

Спасибо) Ништяк будет)

adminixi

07 апреля 2016, 15:21

Так не будет работать?
[[!ClickToCall? &phone=`[[$tel]]`]]

У меня телефон записан в отдельный чанк…

Василий Наумкин

07 апреля 2016, 16:30

Должен, почему нет?

Хотя, правильнее было бы записать его в системную настройку и вызывать так:

[[!ClickToCall? &phone=`[[++tel]]`]]

P.S. Для оформления кода у нас на сайте нужно использовать тег code.

adminixi

07 апреля 2016, 23:33

Спасибо.

Роман Садоян

07 апреля 2016, 20:47

Просто для информации — у компонента уже есть системная настройка clicktocall_phone для вывода телефона по умолчанию, если не указан параметр &phone.

adminixi

07 апреля 2016, 23:00

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

Роман Садоян

07 апреля 2016, 23:30

Если всё так сложно, то можно использовать clientconfig — это лучше, чем лазить по чанкам.

adminixi

07 апреля 2016, 23:33

Спасибо за информацию. Опробую.

Волков Николай

26 апреля 2016, 21:00

Внесу свои пожелания:
1) Было бы ОЧЕНЬ здорово, если бы, когда время не рабочее, то иконка все равно отображалась бы, но при нажатии происходил не вызов, в всплывало модальное окошко с формой для обратной связи, к примеру.
2) Можно добавить возможность, чтобы звонок был не на телефон, а в скайп, к примеру.

Роман Садоян

26 апреля 2016, 21:30

1) Было бы ОЧЕНЬ здорово, если бы, когда время не рабочее, то иконка все равно отображалась бы, но при нажатии происходил не вызов, в всплывало модальное окошко с формой для обратной связи, к примеру.

Подумаю над этим, в принципе можно реализовать.

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

Можно создать свой чанк (например с именем — ClickToCall.skype.tpl, со следующим содержимым:

<a href="skype:[[+phone]]?call" id="ClickToCall">
    <div class="click-to-call-phone"></div>
</a>

И вызвать сниппет так:

[[!ClickToCall? &phone=`skypeusername` &tpl=` ClickToCall.skype.tpl`]]

Где skypeusername — имя логина в скайпе куда будем звонить.

Не тестировал, но должно работать.

Волков Николай

26 апреля 2016, 21:42

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

Кстати, а помимо дней недели и времени, сниппет учитывает праздники?

Роман Садоян

26 апреля 2016, 23:20

Нет, праздники не учитываются, решение довольно общее, даже если выключить отображение виджета 1ого января, оно может подойти не всем, вдруг вы торгуете шампанским или же солёными огурцами и количество звонков именно в день, больше чем в любой другой ЦЕЛЫЙ месяц.

А теперь по делу, мысль хорошая — внедрить календарь и добавить возможность для отметки дней, по которым виджет не должен будет отображаться.
Записал, постараюсь реализовать.

Николай

26 апреля 2016, 21:53

) Было бы ОЧЕНЬ здорово, если бы, когда время не рабочее, то иконка все равно отображалась бы,…
Подумаю над этим, в принципе можно реализовать.

и я за такое решение!

Николай

26 апреля 2016, 21:52

поддерживаю глубочайше!

Николай

27 апреля 2016, 00:45

И жду-верю в форму обратной связи заместо кнопки в ночное время…

Николай

26 апреля 2016, 21:51

Благодарю! Все понял, временные настройки работают как часы, по москве!

Дайте плз код чтобы поставить время 30 секунд, через которое посетитель увидит кнопку?

ps для будущих новичков подскажу — настройки цвета и место-положения кнопки в ищите в файле: assets/components/clicktocall/css/clicktocall.css

Роман Садоян

26 апреля 2016, 23:13

Лучше всего переопределите стили или скопируйте все стили в свой файл и подключите его, так как при обновлении этот файл перезапишется.

Николай

27 апреля 2016, 00:47

Сложно. Но спасибо вобщем, завтра еще проверю как кнопка работает.

Николай

27 апреля 2016, 19:41

Опытным путем выяснил что номер телефона надо вводить в параметры сниппета. А введя телефон только в настройки системы /clicktocall результата был не тот — мобилы предлагают ввести номер самостоятельно.

Резюмирую, ошибок нет?

1.Установили пакет, вызвали снипет [[!ClickToCall]]
2. Вписали номер в параметры снипета и все ок.

ps буду ждать пожалуйста наворот — чтоб в ночное время вместо вызова по телефону, была форма обратной связи, и клиент оставил контакты

Алечка

13 декабря 2016, 16:59

Здравствуйте!
Подскажите, пожалуйста, как сделать, чтобы сss вызвать из своей папки, а не автоматически: Т.е. не не так:

assets/components/clicktocall/css/clicktocall.css

а так:

<link href="assets/template/css/clicktocall.css" rel="stylesheet" />

Роман Садоян

13 декабря 2016, 17:59

&useCustomCss=`1`

И подключайте в ручную стили.

Алечка

13 декабря 2016, 19:34

clicktocall.css кинула в свою папку (assets/template/css/clicktocall.css), а еще изображение mobile.png тоже кинула в свою папку (assets/template/img/clicktocall/mobile.png). Соответственно путь к картинке такой:
background-image: url("../img/clicktocall/mobile.png");

почему то изображения трубки нет. Может путь не верный?

Роман Садоян

13 декабря 2016, 20:11

я сторонник абсолютных путей.
Посмотрите ошибки в консоли браузера, можете имитировать юзер агента через плагин Random Agent Spoofer

Алечка

13 декабря 2016, 20:34

а как прописать абсолютный путь?

Роман Садоян

13 декабря 2016, 20:38

background-image: url("/assets/template/img/clicktocall/mobile.png");

Не забудьте подключить скрипт на странице

Алечка

13 декабря 2016, 20:51

спасибо!

Алечка

13 декабря 2016, 23:52

JS точно также можно сделать &useCustomJS=`1`
А как components/clicktocall/js/plugins/mobile-detect.min.js подключить из своей папки?

Алечка

14 декабря 2016, 00:04

вопрос исчерпан)))

Дарья Сизова

17 августа 2019, 19:03

Здравствуйте! Почему-то не нахожу в установщике ClickToCall. Поставщик modstore.pro.

Дарья Сизова

17 августа 2019, 19:44

Вопрос снят.

Олег

17 января 2022, 14:35

Роман, и коллеги, всем привет!
Роману спасибо за работу!
Такой вопрос, на MODX Revolution 2.6.4-pl — работает?

Олег

17 января 2022, 18:46

Ниже сrриншоты настроек в Modx revo 2.6.4 — pl. У кого есть идеи, посчему не работает компонент, отзовитесь… Буду благодарен!

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

[ClickToCall] Виджет звонка

Комментарии: 53

Здесь упомянуты