Назар Токар
Опубліковано: 2 Листопада 2016
Оновлено: 6 Травня 2017

Те, про що ви просили бещліч разів, сталось: тепер в Callme є капча, маска телефону і ще купа корисних функцій. Навіть шаблони дизайну перероблені.

Оновлений дизайн виглядає так:callme 2.5 default template

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

Адже тепер всі налаштування, як для форми, так і для пошти (окрім паролів звичайно) зберігаються в js-файлах. Оновив файл — оновилась форма.

Що нового?

Фактично, все. Я повністю переписав скрипт з використанням EcmaScript 2015, нової версії JavaScript. Для повної сумісності зі старими браузерами скрипт зберігається в форматі JS, тож жодних проблем із його роботою не буде.

Тепер в віджеті немає графіки. Зовсім. Кнопка справа — текст, на фоні CSS-градієнту, «крутилка» завантаження теж зроблена на CSS. Навіщо це? По-перше, це суттєво зменшило вагу скрипта, тож він завантажується в три рази швидше, ніж раніше. Окрім того, це дозволить налаштовувати кнопки. Тепер щоб поміняти текст на кнопці, треба лише відредагувати його в файлі конфігу:

"button": {
	"show": true,
	"text": "Текст на кнопці"
}

Тепер розкажу докладніше про нові можливості віджету.

Маска телефону

Додано новий тип поля – «tel», для телефону. Форма може мати будь-яку кількість полів для телефону, для кожного з них можна за бажанням додати маску. Наприклад (999) 999-99-99.

{
	"type": "tel",
	"mask": "(999) 999-9999",
	"name": "Phone Number",
	"required": true,
	"sms": true
}

Валідація пошти

Додано поле «email» для електронної пошти. Якщо поле заповнене, то воно проходить валідацію і форму не можна відправити, поки це поле не заповнять.

Обов’язкові поля

Тут оновлення стосується чекбоксів. Якщо чекбокс позначено обов’язковим (required), то поки його не відмітять, форму не можна буде відправити.

Капча

Так, нарешті. В кожну форму можна за бажанням додати капчу, яка не дозволить відправляти форми ботам і людям, які не можуть відняти від 11 цифру 6.

"captcha": {
	"show": true,
	"title": "Captcha",
	"error": "Captcha is wrong"
}

Конфіги

На одній сторінці відтепер можна використовувати будь-яку кількість форм (навіть із різними шаблонами дизайну). Всі шаблони, окрім основного, завантажуються динамічно, якщо користувач виклакає відповідну форму. Конфіги повністю поміняли свій вигляд, відтепер це не купа страшного коду, а валідні JSON-файли, працювати з якими значно простіше.

Ось приклад нового конфігу:

{
	"button": {
		"show": true,
		"text": "Short form"
	},
	"fields": [
		{
			"type": "text",
			"name": "Your Name",
			"placeholder": "Type your name",
			"required": true,
			"sms": true
		},
		{
			"type": "tel",
			"mask": "(999) 999-9999",
			"name": "Phone Number",
			"required": true,
			"sms": true
		}
	],
	"form": {
			"template": "fb",
			"title": "Request a callback",
			"button": "Request",
			"class": "form-center",
			"welcome": "Fill in the form and we'll call you back as soon as possible"
	},
	"alerts": {
		"yes": "Yes",
		"no": "No",
		"process": "Sending request...",
		"success": "Your request was successfully sent",
		"fails": {
			"required": "Please fill in all required fields",
			"sent": "Previous message was sent less than a minute ago"
		}
	},
	"captcha": {
		"show": true,
		"title": "Captcha",
		"error": "Captcha is wrong"
	},
	"license": {
		"key": "143022181824244220151218223020182821163618181630221820143022",
		"show": false
	},
	"mail": {
		"referrer": "Page referrer",
		"url": "URL",
		"linkAttribute": "Link attribute",
		"smtp": true
	},
	"animationSpeed": 150,
		"sms": {
			"send": false,
			"captions": true,
			"cut": true
		}
}

Відкривши індексний файл Callme (/callme/index.html), ви побачите перелік конфігураційних файлів, що містяться в /callme/js/config/, і побачите, чи код в них валідний.

Додаткові налаштування

  • швидкість анімацій в формі;
  • всі повідомлення, що побачить користувач: підпис капчі, повідомлення про помилки, алерт про відправлене повідомлення чи помилку тощо…

Оновлення

Файли стилів

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

«Приліплені» форми

Форму, окрім звичайної появи посередині екрану, можна показувати приліпленою зліва чи справа до країв екрану:

callme 2.5 sticked form

На мобільному екрані вона перетворюється у звичайну форму.

Мобільні стилі

Суттєво оптимізовано мобільні стилі шаблонів, перевірено роботу на iOS та Android. Я впевнений, що вони додадуть нових багів, але ми з ними розберемось :)

Відправка SMS

Відтепер можна вибирати, які поля потрібно надсилати в смс, а які — тільки на пошту. Окрім того, можна вибирати, чи обрізати повідомлення до 160 символів, і чи надсилати назви полів або ж тільки їх значення. Повідомлення, як і раніше транслітеруються.

Відправка через SMTP

Перероблено відправку повідомлень через SMTP, додано стандартні налаштування для Gmail та Яндекс.пошти.

Перевірка IP і швидкість роботи

В версії 2.1 місто і країна відправника визначались за ip-адресою перед відправкою повідомлення, і це сильно впливало на швидкість роботи скрипта. Тож в версії 2.5 було додано окремий сервіс, який показуватиме місто, країну і точку на карті для бажаючих адмінів.

callme 2.5 letter

В повідомленні ви побачите тільки ip-адресу. Щоб побачити деталі, клікніть на неї і перейдете на невеликий сайт, де вся додаткова інформація завантажиться окремо. Це дозволить і мати повний контроль над географією відправників, і не гальмувати роботу скрипта.

whois по ip для callme

Ліцензія

Callme, як і раніше, має ліцензійний ключ. Раніше ключ міг хіба що сховати копірайт, але з версії 2.5 він впливає на функціонал. Так, безкоштовна версія має менше функцій і, щоб отримати повну версію, треба буде купити ключ. Для власників ліцензій на попередні версії діє знижка.

Окремий сайт

Віднині у Callme є окремий англомовний сайт — www.getcallme.com. На ньому є вся документація, відповіді на запитання, можливість скачати скрипт і купити ключ.

← Тисни «Лайк», щоб читати нас у Фейсбуці
Tokar_ua Будьте в курсі. Долучайтесь до нашого каналу в Telegram.

    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    43 коментаря

    спочатку нові
    за рейтингом спочатку нові за хронологією

    Назаре, дякую за такий чудовий модуль. Є таке запитання: чи підтримує Callme зміну теми email листа в залежності від того, з якої форми було відправлено повідомлення? Мені здалося, що ні бо змінна $subject = 'CallMe'; та все одно у вас запитаю, якщо можна :)

    Автор

    Вітаю! Ні, тема завжди одна й та ж, це зручно для сортування у Gmail. Ви самостійно можете це змінити у go.php.

    Здравствуйте. Мне необходима версия скрипта 2.1 . Как её можно скачать?

    Автор
    Назар Токар

    Вітаю, ніяк. У мене її немає.

    Назар, підкажіть, будь ласка. Встановив останню версію Callme, налаштував config та smtp, а мені видає "No email settings". Налаштування пошти правильні, перевіряв як gmail так і корпоративну пошту. Ось посилання https://logist.academy/mod/book/view.php?id=63&chapterid=5 Можливо ще якісь налаштування потрібні?

    Автор
    Назар Токар

    Все працює.

    Так, я вже пізніше прочитав про файл go і додав там пошту. Але пошта на неї не надходить. Я Вам написав листа про додаткові можливості скрипта. Напишіть мені, будь-ласка, відповідь.

    Автор
    Назар Токар

    Значить, помилка у налаштуваннях, спробуйте SMTP.

    Купил лицензию , установил, на айпадах не открывается форма. На демке сайта со скриптом тоже не октрывается, что делать?

    Автор
    Назар Токар

    А дайте урл.

    Капча и выпадающий список только для обладателей лицензии, или у меня проблемы со скриптом ( хостером ) ???

    Автор
    Назар Токар

    Так і є, ось порівняння ліцензій:
    http://getcallme.com/ru/license.html

    Page referrer

    у меня к этому прикрепилась ссылка из карточки товара

    как вернуть все в нормальный вид

    ведь должен быть урл сайта

    Назар, добрый день.

    Огромное спасибо за CallMe 2.3, бесконечно благодарен за разработку такого скрипта.

    Сейчас хотим купить лицензию CallMe 2.5.

    Возник вопрос: нужно ли покупать для каждого домена отдельную лицензию?

    Ещё раз огромное спасибо!

    Автор
    Назар Токар

    Так, одна ліцензія на один домен.

    Здравствуйте все

    как на произвольную картинку на сайте повесить вызов скрипта

    код подскажите пожалуйста

    у меня не получается

    Спасибо

    Назаре, доброго часу доби)

    Перш за все хочу подякувати за ваш скрипт.

    У мене виникла ситуація, що на сторінці є 6 форм. І мені потрібно відслідковувати з якої форми приходить запит.

    В інструкції написано, що можна використати атрибут data-cme="link attribute #1">

    Але нажаль, у листі, який приходить на мейл, цей атрибут не відображається.

    Ось приклад коду кнопки:

    Заказать звонок

    Можливо я роблю щось не так? Чи ця функція доступна тільки у платній версії?

    Автор
    Назар Токар

    Вітаю. Так, мені вже написали, що це не завжди працює. Маю перевірити і виправлю.

    Проблема.

    Смс не надсилається, тому що воно порожнє (в сервісі bytehand.com)

    На емайл повідомлення приходять як треба.

    На скріншоті показав стрілками які налаштування зроблені в скрипті, більше нічого не чіпав.

    Скріншот:

    Автор
    Назар Токар

    Цікаво, я перевіряв і працювало. І подивлюсь, в чому може бути справа.

    Спробував старий скрипт buyme, з яким працював в кінці 2013 року. Він працює, смс не порожнє.

    Автор
    Назар Токар

    Добре, перевірю, дякую.

    Назаре, ще одне питання:

    Чи є можливість якось сховати "зірочки" у required input?

    Автор
    Назар Токар

    а як ви плануєте показати користувачеві, які поля є обовЯзковими? Ні, такого я не робив.

    Бувають випадки коли всі поля є обов´язковими. Тоді немає потреби показувати "зірочки", а, наприклад, на початку форми вказати про необхідність заповнювати їх всі. Чи ці ж самі "зірочки" зробити іншого кольору... Тощо.

    Можливо було б розумно "зірочки" обгорнути якимось строковим тегом?

    Автор
    Назар Токар

    Так, можливо. Подумаю, як краще.

    Уточнення до попереднього питання: мав на увазі ту кнопку, що дефолтно виводится з боку екрану.

    Маю ще одне питання:

    Чи є можливість разом з формою передати й URL сторінки, на якій було викликано цю форму?

    Автор
    Назар Токар

    Сторінка, як і referrer, передаються за замовчуванням у листі, це можна відключити.

    Дякую, а то я вже почав думати як приціпити URL "паровозом" :)

    Доброго дня, Назаре.

    Є питання стосовно відображення кнопки виклику модального вікна.

    Чи є можливість вимкнути її відображення у разі виклику форми зі стороннього елементу DOM?

    Автор
    Назар Токар

    Звичайно, в документації про це написано.

    Мається на увазі ключ "show" у файлі опцій?

    Якщо "так" то в мене не працюэ у такому варіанті:

    "button": {

    "show": false,

    "text": "Как нам с вами связаться?"

    }

    Все одно отримую кнопку "Request a callback" на Front-end...

    Автор
    Назар Токар

    Так, це він, дивіться будь ласка доки, там все є.

    Ну ось, відкриваю http://getcallme.com/docs.html#settings-button.

    "show" приймає boolean - тру чи фелс. В моєму файлі опцій вказано false, але все одно кнопка на фронті є...

    Змушений сховати її через таблиці стилів що не є кашерно... :(

    ...а загалом дякую - скрипт гарний, зберігає розробникам час.

    Здравствуйте, Назар.
    У конторы подразделения в Москве, Питер, Казань и еще ряд городов
    Есть ли возможность при отправке сообщения выбрать подразделение, куда сообщение можно/нужно отправить?

    Тарас Климець

    Де взяти стару версію модулю де випадашки безкоштовні?

    Тарас Климець

    Швидкого замовлення. Про яке замовлення йде мова?

    Автор

    Зворотній дзвінок, наприклад.

    Тарас Климець

    Я вже подумав що ти написав модуль, що замінює кошик в інтернет-магазинах)

    откуа берется вся эта фигня в конце url ?_=1478620707091

    думаю кеширование. но как его не получать?

    .ru/callme/js/config/main.js?_=1478620707091

    Автор

    Це робить Chrome, просто не звертайте увагу :)

    Огромное спасибо за новую версию!

    Проблема - не могу скачать скрипт - http://prntscr.com/d3s2oo

    Очень жаль, что выпадающий список в платной версии, он жизненно необходим был :)

    Автор

    Спробуйте ще раз, перевірив — працює.

    Очень жаль, что выпадающий список в платной версии, он жизненно необходим был :)

    Якщо купити скрипт, це не проблема.