Установка та налаштування - Callme 2
З чого почати, email, SMTP та sms налаштування
Налаштування форми
Серверні налаштування
З чого почати
Перші кроки
Процес установки дуже простий, вам потрібно зробити таке:
- Завантажити та розархівувати вашу копію Callme
- Купити ліцензію (опціонально)
- Змінити файл config для отримання необхідних полів у вашій формі
- Встановити повідомлення на e-mail та SMS
- Завантажити файли через FTP
- Оновити шаблон вашого сайту
Все готове, насолоджуйтесь! 🎉
Вбудована форма
Ви також можете обробляти будь-яку форму, вбудовану на сторінку. Для цього створіть звичайну форму і надайте їй атрибут data-callme-form, кнопка для підтвердження повинна відправляти форму:
Необхідним для обробки полям додайте атрибут: data-required="true" .
Переконайтеся, що всі потрібні вам поля мають атрибут name . Він використовується для назв полів у сповіщеннях скрипта.
Результат обробки форми можна відображати у будь-якому елементі усередині форми. Це можуть бути помилки, процес надсилання або повідомлення про успішне надсилання.
Щоб скрипт автоматично відображав результати роботи, створіть усередині форми елемент з атрибутом data-callme-result .
Додайте цей рядок у ваш шаблон після налаштування та додавання всіх файлів на сайт:
Якщо ви використовуєте іншу папку, а не /callme, оновіть посилання:
Важливо додати її до файлу, який знаходиться на всіх сторінках, наприклад, у footer або header.
Бібліотека jQuery
Callme працює з jQuery тому її також необхідно встановити:
У більшості випадків ця бібліотека вже встановлена, якщо ні - завантажуйте тут.
Викликиформи
Для цього просто додайте елементу атрибут класу data-callme-config='__config__' Якщо не вказати значення атрибуту, буде використано "main" config файл.
Замініть __config__ точною назвою вашого config файлу (за винятком '.js').
У більш старих версіях можна використовувати клас замість data-attribute: . Ви все ще можете використовувати клас, але data-attr краще.
Події (Events)
Коли щось відбувається з будь-якою з ваших форм в Callme запускається відповідна подія в об'єкті jQuery $('window') .
Ви можете прив'язати будь-які дії. Наприклад, Google anayltics.
EcmaScript6 синтакс:EcmaScript5/JS синтакс:
Список подій
| 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 | Подія запускається під час створення нової форми |
Маркери посилань
Приклад налаштувань
Пояснення налаштувань
| button | Налаштування плаваючої кнопки | [object] |
| fields | Список полів, які будуть показані у поточній формі | [array] |
| form | Налаштування форми: стиль, текстові підказки, позиціонування | [object] |
| alerts | Текстові підказки, які будуть показані в повідомленнях (успіх, помилка або процес надсилання) | [object] |
| captcha | Налаштування коду перевірки: видимий чи ні та повідомлення про помилку | [object] |
| license | Після покупки ліцензії ви можете розширити функціональність скрипту та за бажанням прибрати копірайт. Зверніть увагу, що ключ ліцензії прив'язаний до домену і повинен додаватися до кожного файлу config. У більшості випадків у вас буде єдиний файл config. | [object] |
| Установки сповіщень електронною поштою. Тут ви можете редагувати текст повідомлень, що надсилається по e-mail. | [object] | |
| animationSpeed | Швидкість анімації форми встановлена у мікросекундах. Тобто. 1 секунда = 1000 мікросекунд. | [number] |
Налаштування плаваючої кнопки.
| show | Показувати або приховувати плаваючу кнопку праворуч (true/false) | [boolean] |
| text | Підпис на кнопку. Наприклад,"Замовити дзвінок" або "Будь ласка, зв'яжіться зі мною". | [string] |
Масив об'єктів для полів, які з'являться у формі. Callme працює з наведеними нижче типами полів.
Класичний текстове поле. Аргументи:
type text name string placeholder string required boolean sms boolean
Поле для Email при заповненні перевіряється на валідність. Аргументи:
type email name string placeholder string required boolean sms boolean
Телефонний номер із маскою введення. Аргументи:
type tel name string mask текстова маска для поля, наприклад "(999) 999-9999" required boolean sms boolean
Область тексту (Textarea), аргументи:
type textarea name string placeholder string required boolean sms boolean
Випадаючий список. "options" має містити масив можливих варіантів вибору.
type select name string options array sms boolean
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] |
Оповіщення (Alerts)
Тексти, які побачить відвідувач під час роботи з формою.
| yes | Так (yes, si, так, ja і т.д.) | [string] |
| no | Ні | [string] |
| process | Текстовий підпис, показаний при надсиланні запиту. Наприклад, "Відсилаю запит." | [string] |
| success | Повідомлення про успішне надсилання. Наприклад, "Ваш запит було успішно надіслано" | [string] |
| fails | Можливі причини скасування запиту | [object] |
Alerts → fails
Можливі причини скасування запиту. Будь ласка, зверніть увагу, якщо ви не встановите жодне поле обов'язковим, усі поля будуть обов'язковими за промовчанням.
| required | Якщо не обов'язкові поля заповнені. Наприклад, "Будь ласка, заповніть обов'язкові поля" | [string] |
| sent | Форма не може бути надіслана, якщо прериючий запит від цього відвідувача відправлено менше хвилини тому. Наприклад, "Попереднє повідомлення надіслано менше хвилини тому". | [string] |
Якщо ви користуєтеся ліцензійним скриптом, ви можете використовувати код перевірки для покращення безпеки форми. У безкоштовній версії ця функція недоступна.
| show | Показати код перевірки? true/false | [boolean] |
| title | Текст перед капчем. Наприклад, "Капча" або "Введіть код" | [string] |
| error | Помилка введення капчі. Наприклад,"Невірний код" | [string] |
Тут можна додати ліцензійний ключ. Ключ є унікальним для домену і скористатися вашим ключем на іншому сайті неможливо. Якщо у вас декілька форм, слід додати ключ до всіх файлів налаштувань.
| key | Ключ, отриманий після придбання ліцензії. | [string] |
| show | Показувати копірайт форми? Ми будемо вдячні, якщо ви підтримаєте наш скрипт і не прибиратимете копірайт. | [boolean] |
Установки пошти. Назви полів у повідомленнях на пошті.
| animationSpeed | Швидкість анімації форми. Наприклад, 150. | [integer] |
Налаштування пошти
Налаштування пошти можна змінювати в php/go.php. Є два варіанти роботи з поштовими повідомленнями: SMTP та mail() PHP функція.
PHP надсилає листи набагато швидше, але SMTP надійніший спосіб, який майже гарантує, що листи не виявляться в спамі.
Якщо ви хочете змінити стиль відображення ваших повідомлень, можете заглибитись у змінну $message
| $to |
$to = '[email protected]';
$from_user = true;
Вибір одержувача повідомлення
Ви можете дозволити користувачеві вибрати одержувача, який отримає повідомлення. Наприклад, це можуть бути різні департаменти залежно від обраної опції.
Ця настройка проводиться у два кроки:
Установки SMTP
Установки 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
Якщо ви користуєтеся Gmail (сподіваємося, це так і є), вам необхідно буде ввімкнути двоетапну автентифікацію та згенерувати пароль програми. Це робиться легко, просто дотримуйтесь інструкцій:
Згенерований пароль буде використаний для Callme.
Сервер SMTP
Gmail smtp.gmail.com Yahoo smtp.mail.yahoo.com Yandex ssl://smtp.yandex.ru
Порти використовуються для більшості серверів:
Gmail 25, 465 та 587 Yahoo 465 та 587 Yandex 465
Налаштування SMTP
Детальна документація знаходиться тут:
SMS Установки
SMS налаштування знаходяться у php/sms.php
Ви можете вибрати, які з полів будуть відправлені в смс, а які ні. Подивіться на налаштування полів у ваших config файлах для прикладу.
Так, деякі посилання на смс-сервіси містять реферальний код і теоретично я можу отримати невеликий прибуток у розмірі 5-10% від ваших витрат на смс.
Працюєте із SMS-сервісами за хорошими цінами та з можливістю розсилок у більшість країн? передзвоніть мені для додавання вашого сервісуперелік.
Установки SMS зберігаються в SMS, об'єкті з такими параметрами: