27 Серпень 2013
136 276
Рубрика: код

Инструкция: установка и настройка Callme

Единственная и подробная инструкция по установке Callme.

Обновлено 2015-10-26

Если вам нужна инструкция по установке Callme, вы зашли по правильному адресу. В каждом посте, посвящённом скрипту обратного звонка, я писал, как именно надо его устанавливать.

В каждой версии инструкция дублировалась и кое-где изменялась. Обновлять все посты с выходами новых версий было нерационально. Поэтому я создал этот пост, в нём всегда гарантированно будет единственная и правильная инструкция по установке самой свежей версии Callme.

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

Как настроить Callme

Для всех движков процесс настройки одинаков, следуйте этим шагам:

  1. скачать архив (ссылка ниже)
  2. распаковать, найти файлы конфига
  3. отредактировать конфиг в соответствии с этой инструкцией. В версии 2.1 настройка содержится в двух файлах: config.js и send.php.
  4. загрузить папку callme на ваш сервер по ftp. Я рекомендую, чтобы эта папка находилась в корневом каталоге, то есть открывалась по адресу: http://....com/callme. Можно загружать и в другие каталоги, сохраняя расположение файлов внутри папки.
  5. В очень редких случаях файлы могут загружаться с неправильными правами доступа, проверьте, чтобы на папку и на файлы были права 755.
  6. добавить код для вызова в шаблон вашего сайта. Как это сделать, написано здесь, а также во множестве инструкций на форуме и в блоге.
  7. Открыть callme на вашем сайте и проверить работу. Настройка окончена.

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

Если вопрос задан в сотый раз, я могу отвечать что-то смешное и не по делу. Не обессудьте, мон шер.

Теперь обо всём этом немного подробнее.

Настройка Callme

Самая свежая версия — 2.3, скачать.

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

На почту вам придёт архив с вашей копией скрипта. Его нужно распаковать и загрузить папку callme по ftp в корневой каталог вашего сайта. Начиная с версии 2.0 загружать папку со скриптом можно в любое место сайта. Главное условие — сохранять файловую структуру каталогов.

В скачанном архиве находится файл /callme/lib/send.php и открываете его в редакторе кода, не в блокноте (почему?). В соответствующем поле указываете почту получателя, на которую будет приходить уведомление о заказе.

$to = "your@mail";

Список полей для отображения хранится в файле настроек. Для того, чтобы настроить поля в форме, отредактируйте файл  callme/js/config.js.

Поля формы

Параметр Назначение Варианты
showButton Показывать ли фиксированную кнопку справа? 1 да
0 нет
fields Список полей для всплывающей формы. Указываются через запятую.

  • текстовое поле — не требует дополнительного кода ( ваше имя )
  • текстовый блок — ставьте перед названием минус ( -Комментарий )
  • выпадающий список — ставьте перед названием ! и разделяйте варианты для выбора таким же символом ( !Ваш вопрос!Узнать наличие!Сделать заказ )
  • чекбокс — знак вопроса перед именем ( ?Подарочная упаковка )
  • номер телефона — знак “=” перед именем поля. В поле для телефона можно ввести только цифры ( =Ваш телефон (Введите номер) )
  • если поле должно быть обязательно заполнено, после его названия добавьте звездочку ( имя* )
callTime Показывать время звонка? 1 да
0 нет
workStart, workEnd Начало и конец рабочего дня в часах, используется для выбора времени звонка workStart “8”
workEnd “19”
center Где показывать форму на экране 1 в центре экрана
0 у места клика
template Шаблон. С версии 2.0 hello kitty переименован в pink. default, apple, vk, fb, blackred, pink
license Лицензия, чтобы законно скрыть копирайт. Этот ключ можно купить здесь) 00000000
showCopyright Показывать ли копирайт; действует только если указана лицензия 1 да
0 нет

Этот код — значение по умолчанию, которое сохраняется в файле callme/js/config.js. Чтобы все работало, достаточно не трогать его. Если хотите менять значения, пользуйтесь таблицей выше. Если что-то пошло не так, скопируйте из неё код и замените им то, что получилось у вас.

var cmeData = {
// показывать кнопку справа? (1 - да, 0 - нет)
"showButton": 	"1", 

// укажите через запятую названия полей
// textarea: ставьте перед названием минус (-)
// select: ставьте перед названием "!" и разделяйте варианты для выбора таким же символом
// для поля с телефоном (input type="tel") используйте символ '='
// checkbox: знак вопроса перед именем
// если поле должно быть обязательно заполнено, после его названия добавьте * (например, имя*)
"fields": "Имя (Ваше имя), =Телефон (Укажите номер), -Вопрос (Желательно заполнить), !Ваш вопрос!Узнать наличие!Сделать заказ, ?Подарочная упаковка",

// заголовок формы
"title": "Заказать обратный звонок",

// надпись на кнопке
"button": "Перезвоните мне", 

// показывать ли время звонка (1 - да, 0 - нет)
"callTime": "1", 
"txtCallTime": "Время звонка",
"txtToday": "сегодня",
"txtTmrw": "завтра",
"txtTill": "до",
"txtHours": "час.",

"alertSending": "Идет отправка", // идет отправка
"alertSetCallTime": "Укажите время звонка", // Укажите время звонка

"mailReferrer": "Источник трафика", // откуда пришел посетитель
"mailUrl": "Страница с запросом", // страница, откуда отправлен запрос

// начало и конец рабочего дня в часах, используется для времени звонка
"workStart": "8",
"workEnd": "19",

// центрировать форму на экране? (1 - центр экрана, 0 - у места клика)
"center": "1",

// шаблон (default, apple, vk, fb, blackred, pink)
"template": "default",

// лицензия (можно купить на get.nazartokar.com)
"license": "0",
"showCopyright": "0"
}

Сохраняете файлы и загружаете их на сервер.

Обязательные поля

Для того, чтобы поле было обязательным к заполнению, после его названия нужно поставить *. Обязательными могут быть любые текстовые поля. Чекбоксы — нет. Пример:

Телефон (Укажите телефон)*

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

Настройка placeholders

Название поля может отличаться от параметра placeholder. Чтобы указать, какой текст будет использоваться в качестве placeholder, укажите его в скобках после названия поля. Этот параметр будет действовать и для текстовых полей, и для текстовых блоков (textarea).

Например: Имя(Укажите имя), -Ваш вопрос (Опишите суть вопроса)

Как открывать форму по клику на любых объектах

Чтобы форма заказа звонка отображалась по клику на чём-либо кроме кнопки справа, этому объекту нужно присвоить такой класс:

class="callme_viewform"

Таким объектом может быть что угодно: ссылка, изображение, кнопка, простой текст. После присвоения им такого класса, их стандартное поведение поменяется, по клику будет появляться форма.

Настройка sms-уведомлений

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

Инструкция по настройке SMS

Установка кода Callme

Для работы Callme требует подключённой библиотеки jQuery версии не менее 1.4.4. Убедитесь, что у вас подключена эта версия. Если нет, подключите её таким образом:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Этот код необходимо установить до подключения скрипта. Сам скрипт подключается в одну строку:

<script type="text/javascript" charset="utf-8" src="/callme/js/callme.js"></script>

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

Обработка любых форм на странице вместо попапа

С версии 2.1 Callme умеет обрабатывать любые формы, встроенные прямо в вашу страницу. Как настроить:

  1. создаёте форму с нужными вам полями. Их количество может быть любым. Типы поддерживаемых полей — как у формы в попапе
  2. проверяете, чтобы у всех полей было указано название name="имя поля"
  3. создаёте кнопку type="button" с классом .cme-btn
  4. для того, чтобы получать уведомления, внутри формы создайте блок с классом .callme-result. В нём будут появляться сообщения об отправке. Например, “идёт отправка” или “сообщение отправлено”.

Прошу внимательно посмотреть на пример:

<form>
<input type="text" name="Ваше имя" placeholder="Укажите ваше имя">
<input type="text" name="Ваш e-mail" placeholder="Укажите вашу почту">
<button type="button" class="cme-btn">Отправить заявку</button>
<div class="callme-result"></div>
</form>

Получение атрибута ссылки

Чтобы узнать, на какую конкретно ссылку нажал пользователь, чтобы вызвать форму, вы можете присвоить этой кнопке параметр data-cme="любой параметр". После этого к уведомлению добавится параметр, указывающий, на какую именно ссылку был клик.

Что делать с версиями jQuery до 1.7 и кодировкой win-1251 (неактуально)

Начиная с версии 2.0, Callme работает со всеми версиями jQuery, не младше, чем 1.4.4 и поддерживает кодировку 1251.

Что-то не получается?

Для FAQ есть отдельный пост: возможные ошибки при установке Callme, эта запись постоянно обновляется, а свежая редакция указана над текстом.

Более подробно мы обсуждаем вопросы на нашем форуме. Читайте список вопросов и при необходимости задавайте вопросы там. Вопросы по настройке, заданные в этом посте, будут проигнорированы.

Тепер я хочу бачити коментарі 601