Документация по Callme

С чего начать, email, SMTP и sms настройки

С чего начать

Процесс установки очень прост, вам нужно сделать следующее:

  1. Скачать и разархивировать вашу копию Callme
  2. Купить лицензию (опционально)
  3. Изменить config файл для получения необходимых полей в вашей форме
  4. Установить уведомления на e-mail и по SMS
  5. Загрузить файлы через FTP
  6. Обновить шаблон вашего сайта

Все готово, наслаждайтесь! 🎉

Вы также можете обрабатывать любую форму, встроенную в страницу. Для этого создайте обыкновенную форму и присвойте ей атрибут data-callme-form, кнопка для подтверждения должна отправлять форму:

<button type="submit" data-callme-action="submitForm" class="">Отправить форму</button>

Необходимым для обработки полям добавьте атрибут: data-required="true".

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

Результат обработки формы можно отображать в любом элементе внутри формы. Это могут быть ошибки, процесс отправки или сообщение об успешной отправке.

Для того, чтобы скрипт автоматически отражал результаты работы, создайте внутри формы элемент с атрибутом data-callme-result.

Добавьте эту строчку в ваш шаблон после настройки и добавления всех файлов на сайт:

<script src="/callme/js/callme.min.js" charset="utf-8"></script>

Если вы используете другую папку, а не /callme, обновите ссылку:

<script src="/__folder__/js/callme.min.js" charset="utf-8"></script>

Важно добавить ее в файл, который находится на всех страницах, например в footer или header.

💡 Вы можете создать столько config файлов сколько вам нужно

Callme работает с jQuery поэтому ее также необходимо установить:

<script src="/callme/js/jquery.js"></script>

В большинстве случаев эта библиотека уже установлена, если нет - скачивайтездесь.

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

Для этого просто добавьте элементу атрибут класса data-callme-config='__config__' Если не указать значение атрибута, будет использован "main" config файл.

Замените __config__ точным названием вашего config файла (исключая '.js').

<a href="#" data-callme-config>Click me!</a>
<a href="#" data-callme-config='short-default'>Click me!</a>
🕹 Попробуйте: нажмите сюда или сюда

В более старых версиях возможно использовать класс вместо data-attribute: class='callme_viewform'. Вы все еще можете использовать класс, но data-attr предпочтительнее.

Когда что-то происходит с любой из ваших форм в Callme запускается соответствующее событие в jQuery объекте $('window').

Вы можете привязать к ним любые действия. Например, Google anayltics.

EcmaScript6 синтакс:
$(window).on('callme.close.finish', () => console.info('Форма Callme закрылась'))
EcmaScript5/JS синтакс:
$(window).on('callme.close.finish', function() {
	console.info('Форма Callme закрылась'));
}
EventОписание
callme.load.finishСобытие запускается при окончании загрузки настроек callme
callme.close.startСобытие запускается при начале закрытия формы
callme.close.finishСобытие запускается при окончании закрытия формы
callme.show.startСобытие запускается при начале появления формы
callme.show.finishСобытие запускается при окончании появления формы
callme.request.finishСобытие запускается при окончании отправки запроса
callme.request.failСобытие запускается при ошибке отправки запроса
callme.captcha.errorСобытие запускается при ошибочном вводе captcha при отправке формы
callme.submit.startСобытие запускается при нажатии кнопки отправки формы
callme.submit.failСобытие запускается при ошибке отправки формы
callme.submit.finishСобытие запускается при успешной отправке формы
callme.formCreate.finishСобытие запускается при создании новой формы

Если на вашей странице много форм, вы можете легко отследить какая ссылка была использована для отправки запроса. Все, что нужно, это добавить атрибутdata-cme объекту, который вызывает форму:

<button data-callme-config data-cme="link attribute #1">Нажми сюда!</button>
{
	"button": {
		"show": true,
		"text": "Краткая форма"
	},
	"fields": [
		{
			"type": "text",
			"name": "Ваше имя",
			"placeholder": "Введите имя",
			"required": true,
			"sms": true
		},
		{
			"type": "tel",
			"mask": "(999) 999-9999",
			"name": "Номер телефона",
			"required": true,
			"sms": true
		}
	],
	"form": {
			"template": "fb",
			"title": "Заказать обратный звонок",
			"button": "Заказать",
			"class": "form-center",
			"welcome": "Заполните форму и мы свяжемся с вами в ближайшее рабочее время"
	},
	"alerts": {
		"yes": "Да",
		"no": "Нет",
		"process": "Отправка запроса...",
		"success": "Ваш запрос успешно отправлен",
		"fails": {
			"required": "Заполните необходимые поля",
			"sent": "Предыдущий запрос отправлен менее минуты назад"
		}
	},
	"captcha": {
		"show": true,
		"title": "Капча",
		"error": "Ошибка в капче"
	},
	"license": {
		"key": "143022181824244220151218223020182821163618181630221820143022",
		"show": false
	},
	"mail": {
		"referrer": "Источник перехода",
		"url": "URL",
		"linkAttribute": "Атрибут ссылки",
		"smtp": true
	},
	"animationSpeed": 150,
		"sms": {
			"send": false,
			"captions": true,
			"cut": true
		}
}
ПолеОписаниеТип
buttonНастройки плавающей кнопки[object]
fieldsСписок полей, которые будут показаны в текущей форме[array]
formНастройки формы: стиль, текстовые подсказки, позиционирование[object]
alertsТекстовые подсказки, которые будут показаны в уведомлениях (успех, ошибка or или процесс отправки)[object]
captchaНастройки проверочного кода: видимый или нет и сообщение об ошибке[object]
licenseПосле покупки лицензии вы можете расширить функциональность скрипта и по желанию убрать копирайт. Обратите внимание, что ключ лицензии привязан к домену и должен добавляться в каждый config файл. В большинстве случае у вас будет единственный config файл.[object]
mailНастройки оповещений по электронной почте. Здесь вы можете редактировать текст уведомлений, который отправляется по e-mail.[object]
animationSpeedСкорость анимации формы установленая в микросекундах. Т.е. 1 секунда = 1000 микросекунд.[number]

Настройки плавающей кнопки.

ПолеОписаниеТип
showПоказывать или скрывать плавающую кнопку с правой стороны (true/false)[boolean]
textПодпись на кнопке. Например, "Заказать звонок" или "Пожалуйста, свяжитесь со мной".[string]

Массив объектов для полей, которые появятся в форме. Callme работает с описанными ниже типами полей.

Пример полей:

{
	"type": "text",
	"name": "Ваше имя",
	"placeholder": "Введите имя",
	"required": true,
	"sms": true
}

<input type="text" />

Классическое текстовое поле. Аргументы:

type
text
name
string
placeholder
string
required
boolean
sms
boolean

<input type="email" />

Поле для Email, при заполнении проверяется на валидность. Аргументы:

type
email
name
string
placeholder
string
required
boolean
sms
boolean

<input type="tel" />

Телефонный номер с маской ввода. Аргументы:

type
tel
name
string
mask
текстовая маска для поля, например"(999) 999-9999"
required
boolean
sms
boolean

<textarea type="email"</><textarea>

Область текста (Textarea), аргументы:

type
textarea
name
string
placeholder
string
required
boolean
sms
boolean

<select>...</select>

Выпадающий список. "options" должен содержать массив возможных вариантов выбора.

type
select
name
string
options
array
sms
boolean

<input type="checkbox /">

Checkbox. Если вы установите "required", форма Callme не будет отправлена до тех пор, пока не отмечен чекбокс.

type
checkbox
name
string
caption
string (текст, который должен отображаться рядом с чекбоксом, HTML разрешён)
required
boolean
sms
boolean

Настройки формы.

ПолеОписаниеТип
templateВыбор шаблона формы. Например, "fb" или "default"[string]
titleЗаголовок формы, например "Запросить звонок"[string]
buttonПодпись кнопки, например "Позвоните мне"[string]
alignВы можете выбрать отображение формы: по центру экрана, слева или справа. Для этого используйте значения:left илиright[string]
welcomeПриветственный текст, по умолчанию установлен "Заполните эту форму и мы перезвоним вам как можно скорее"[string]

Тексты, которые увидит посетитель при работе с формой.

ПолеОписаниеТип
yesДа (yes, si, так, ja и т.д.)[string]
noНет[string]
processТекстовая подпись, показана при отсылке запроса. Например, "Отсылаю запрос..."[string]
successУведомление об успешной отправке. Например, "Ваш запрос был успешно отправлен"[string]
failsВозможные причины отмены запроса[object]

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

ПолеОписаниеТип
requiredЕсли не все обязательные поля заполнены. Например, "Пожалуйста, заполните обязательные поля"[string]
sentФорма не может быть отправлена, если прерыдущий запрос от данного посетителя отправлен менее минуты назад. Например, "Предыдущее сообщение отправлено менее минуты назад".[string]

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

ПолеОписаниеТип
showПоказать проверочный код? true/false[boolean]
titleТекст перед капчей. Например, "Капча" или "Введите код"[string]
errorОшибка ввода капчи. Например, "Неверный код"[string]

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

ПолеОписаниеТип
keyКлюч, полученный после покупки лицензии.[string]
showПоказывать копирайт формы? Мы будем благодарны, если вы поддержите наш скрипт и не будете убирать копирайт.[boolean]

Настройки почты. Названия полей в уведомлениях на почте.

ПолеОписаниеТип
referrerНазвание источника перехода. Например, "источник перехода".[string]
urlНазвание url страницы, с которого отправлен запрос. Например, "URL".[string]
linkAttributeЕсли вы пользуетесь атрибутами в ссылках, чтобы отследить, откуда пришёл покупатель, вам нужно указать такой атрибут здесь. Например, "Атрибут ссылки".[string]
smtpИспользовать ли smtp уведомления для отправки электронной почты. Если false, будет использован стандартный PHP-метод sendmail().[boolean]

Анимация

ПолеОписаниеТип
animationSpeedСкорость анимации формы. Например, 150.[integer]

Настройки почты можно изменять в php/go.php. Есть два варианта работы с почтовыми уведомлениями: SMTP и mail() PHP функция.

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

Если вы хотите поменять стиль отображение ваших уведомлений, можете углубиться в переменную $message

ПеременнаяОписаниеТип
$to

Это основная (и чаще всего единственная) переменная, которую нужно менять для правильной работы почты в Callme. Здесь вы можете настроить один или несколько (разделенных запятой) адресов электронной почты для получения уведомлений. Например: 

$to = 'yourmail@gmail.com';
[string]
$from_user

Если переменная равна true, электронная почта, указанная пользователем в форме в поле почты, буде использована в качестве адреса отправителя. Если в форме несколько таких полей, будет взято последнее. Обратите внимание: на некоторых почтовых сервисах смена отправителя может не работать. (v2.5.5).

$from_user = true;
[boolean]

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

Эта настройка производится в два шага:

  1. в php/go.php нужно поменять переменную $to, указав в ней массив из адресов, которые будут получать сообщения.

    Пример

    $to = array('department_1@mail.com', 'department_2@mail.com', 'department_3@mail.com');

  2. После этого нужно добавить новое поле в конфиг: receiver, где у options указать соответствующие названия для каждого из адресов.

    Пример

    {
    	"type": "receiver",
    	"name": "Department",
    	"sms": false,
    	"options": [
    		"Отдел продаж",
    		"Рекламации",
    		"Сотрудничество"
    	]
    }

    Сами адреса получателей пользователь не увидит.

Настройки SMTP находятся в файле php/smtp.php

Обратите внимание: данный файл игнорируется до тех пор, пока вы не установите mail → smtp как true в вашем config файле.

ПеременнаяОписаниеТип
$config['smtp_username']Имя пользователя SMTP[string]
$config['smtp_port']SMTP порт[integer]
$config['smtp_host']SMTP сервер. Смотрите пример ниже[string]
$config['smtp_password']Ваш SMTP пароль[string]
$config['smtp_charset']Кодировка сообщения, чаще всего 'utf-8'[string]
$config['smtp_from']Имя отправителя, по умолчанию Callme.[string]

Если вы пользуетесь Gmail (надеемся, это так и есть), вам необходимо будет включить двухэтапную аутентификацию и сгенерировать пароль приложения. Это делается легко, просто следуйте инструкциям:

  1. Двухэтапная аутентификация
  2. Создать пароль приложения

Сгенерированный вами пароль будет использован для Callme.

Адрес сервера. В большинстве случаев вам необходим один из этих адресов:

Gmail
smtp.gmail.com
Yahoo
smtp.mail.yahoo.com
Yandex
ssl://smtp.yandex.ru

Порты используются для большинства серверов:

Gmail
25, 465 и 587
Yahoo
465 и 587
Yandex
465

Подробная документация находится здесь:

SMS настройки cнаходятся в php/sms.php

Вы можете выбрать какие из полей будут отправлены в смс, а какие нет. Посмотрите на настройки полей в ваших config файлах для примера.

Для начала работы с SMS необходимо создать аккаунт на одном из SMS-сервисов. Callme поддерживает сервисы:

Да, некоторые ссылки на смс-сервисы содержат реферальный код и в теории я могу получить небольшую прибыль в размере 5-10% от ваших затрат на смс.

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

Настройки SMS сохраняются в sms, объекте с такими настройками:

ПеременнаяОписаниеТип
sendПосылать sms или нет[boolean]
captionsНужны заголовки для полей? Например, вы можете получить текст
you name: ivan, phone: +1-123-123-1122
или
ivan, +1-123-123-1122
[boolean]
cutЕсли true, смс будет обрезан до 160 символов[boolean]