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

З чого почати, email, SMTP і sms налаштування

З чого почати

Процес установки дуже простий, вам потрібно зробити наступне:

  1. Скачати і розпакувати вашу копію Callme
  2. Купити ліцензію (за бажанням)
  3. Змінити config файл, щоб потрібні поля з'явились у вашій формі
  4. Налаштувати повідомлення на e-mail і СМС
  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.

💡 Ви можете створити стільки файлів налаштувань, скільки вам потрібно

Callme працює з jQuery, тому її також необхідно встановити:

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

У більшості випадків ця бібліотека вже встановлена, якщо ні - завантажуйтетут.

Форма може бути викликана кліком на будь-який з елементів сторінки, наприклад, посилання, зображення, кнопку, будь-який рядковий або блоковий елемент тощо.

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

Замініть __config__ точною назвою вашого файлу налаштувань (без '.js').

<a href="#" data-callme-config>Клікни сюди!</a>
<a href="#" data-callme-config='short-default'>Клікни сюди!</a>
🕹 Спробуйте:клікни сюди або сюди

В старіших версіях можна використовувати клас замість data-attribute: class='callme_viewform'. Ви все ще можете використовувати клас, але data-attr краще.

Коли щось відбувається з будь-якою з ваших форм, в Callme запускається відповідна подія в jQuery, в об'єкті $('window').

Ви можете прив'язати до них будь-які дії. Наприклад, Google analytics.

Синтакс 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Подія запускається при помилковому введенні капчі при відправці форми
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Текстові підказки, які будуть показані в повідомленнях (успіх, помилка або процес відправки)[object]
captchaНалаштування коду перевірки (капча): видимий чи ні і повідомлення про помилку[object]
licenseПісля покупки ліцензії ви можете розширити функціональність скрипта и прибрати копірайт (за бажанням). Зверніть увагу, що ключ прив'язується до домену и повинен додаватися в кожен config файл. У більшості випадків у вас буде єдиний config файл.[object]
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" />

Поле для електронної пошти, при заповленні перовіряється на валідність. Аргументи:

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['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

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

Налаштування СМС знаходяться в php/sms.php

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

Для початку роботи з СМС необхідно створити акаунт на одному з SMS-сервісів. Callme підтримує такі сервіси:

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

Ви працюєте з смс-сервісами за хорошими цінами і з можливістю розсилок в більшість країн? Зв'яжіться з нами, щоб я додав ваш сервіс до списку.

Налаштування смс зберігаються в sms, об'єкті з такими налаштуваннями:

ЗміннаОписТип
sendНадсилати смс чи ні[boolean]
captionsЧи потрібні заголовки для полів? Наприклад, ви можете отримати текст
you name: ivan, phone: +1-123-123-1122
або
ivan, +1-123-123-1122
[boolean]
cutЯкщо має true, смс буде обрізано до 160 символів[boolean]