RSS Tvitter facebook gplus vk Youtube
Skip to content

 

Как установить скрипт Заказать обратный звонок с сайта

обратный звонокДорогие друзья, с вами на связи Ольга Абрамова. Сегодняшний пост будет о том, как установить форму Заказать обратный звонок с сайта. А также настроим sms-оповещение, что поступила заявка на звонок.

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

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

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

Обратный звонок располагает к вам посетителя, т.к. вы даете ему возможность сэкономить деньги и получить ответ на свой вопрос. И при быстром реагировании на заказ звонка и компетентной консультации конвертируете его в клиента 🙂

Процесс установки

Хотя на сайте разработчика есть инструкция, как установить скрипт обратного звонка и я рекомендую начать с нее, я все же выложу здесь свою версию (точнее дополню), т.к. там лично мне было не все понятно и вообще, все кратко 🙂

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

Итак, приступим:

1. Скачать здесь нынешнюю, 1.9.1 версию скрипта.

2. Распаковать архив в одноименную папку.

3. Загрузить через ФТП-клиент распакованную папку в корневую папку сайта http://ваш_сайт или http://ваш_сайт/public_html.

4. Убедиться, что к сайту подключена самая последняя версия библиотеки jQuery. Для этого откройте код главной страницы сайта с помощью клавиш Ctrl+U и найдите такую строку

<script type='text/javascript' src='http://ваш_сайт/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>.

Если сайт не на Вордпресс, то надо найти нечто похожее. Главное, чтобы в этой строке отображалась версия jQuery и была не ниже 1.7.2 для корректной работы скрипта формы.

5. В редакторе Notepad++ откройте файл /callme/index.php и в строках

//адрес почты для отправки уведомления
$to = "ваш эл. адрес"; //получатель

прописываете свой адрес электронной почты.

6. Откройте файл /callme/js/config.js и в строках

// отображать ли кнопку вызова скрипта справа (1 - да, 0 - нет)
var cme_bt = 0;

Поставьте 1, если хотите чтобы кнопка расположилась справа фиксированно и всегда была на виду. Мне кажется лучше поставить 0, т.к. фиксированная кнопка в глаза не бросается. Если поставите 0, то кнопка будет отображаться в нужном вам месте.

Обычно её располагают в самом верху, рядом с телефоном (также можно продублировать в футере). Так логичней будет.

В конце файла, в строках

// название папки с темплейтом (apple, default, vk, fb, blackred, hkitty)
var cme_template = 'default';

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

7. Перед закрывающим тэгом </head> надо вставить строку скрипта

<script type="text/javascript" src="/callme/js/callme.js"></script>

Я это делала в файле темы header.php.

8. Там же, но выше вставила код (перед знаками = удалите пробелы)

<p><a class ="callme_viewform" href ="#">ЗАКАЗАТЬ ОБРАТНЫЙ ЗВОНОК</a></p>

который непосредственно выводится на странице. Он выводится в виде ссылки. Нужно придать ей гламурный вид с помощью дополнений в файле style.css вашей темы в виде стилей или картинки в виде кнопки.

9. Когда вы все сделали и пошли проверять работу формы, можете увидеть, что вместо кириллицы отображается нечитаемый код 🙁 Тем не менее, заполнив поля и нажав кнопку, письмо уходит. Но при его получении текст такой же нечитаемый.

Сам автор отвечает, что нужно там-то и там-то изменить кодировку, т.к. кодировка сайта на хостинге и кодировка файлов скрипта может отличаться.

Может быть. Но что я только не делала, как ни меняла кодировки, результат был один и тот же. Весь форум изрыла. Наконец, в одной ветке прочитала, что надо принудительно прописать в файле .htaccess перед # END WordPress вот такую строку

AddDefaultCharset UTF-8

И только после этого все стало отображаться по русски. Пример работы формы можете посмотреть здесь.

Оповещения по SMS

Очень удобный метод оповещения вас о поступлении заявки на звонок это sms. Скрипт позволяет это делать. На сайте автора есть инструкция по настройке. Добавлю свои 5 копееек 🙂

1. Из предложенных сервисов рассылки смс я выбрала первый по списку sms.ru. Там платить ничего не надо, если вы используете сервис только для пересылки смс на свой же номер (идет как акция для программистов).

2. В настройках файла /callme/index.php,  в строках по настройке смс, вставьте свои данные, как показано оранжевым:

// данные для отправки смс
$id = "";
$key = "вставьте свой api_id, полученный на сервисе";
$sms_login = "";
$sms_pass = "";
$frm = "Обратный звонок"; // добавьте новую подпись в смс-шлюзе и дождитесь апрува
$num = "XXXXXXXXXXX"; // ваш номер в формате без + (79218886622)
$prv = "sms.ru"; // на выбор: sms.ru, infosmska.ru, bytehand.com, sms-sending.ru, smsaero.ru

3. Проверьте работу формы по получению смс. Увидите, что оно латинскими буквами. Я пыталась изменить кодировку, как написано на сайте автора, но тогда смс не приходит. Думаю, из-за того, что сообщение слишком большое, больше положенных стандартных символов. А может, другая причина.

В сообщение входит Тема звонка, Имя, Телефон, Часовой пояс. Много букафф 🙂 И даже латиница не позволяет получить сообщение полностью, чего уж говорить про русский язык. Но в электронном письме все полностью и видно, откуда клиент.

Можно, конечно, дальше поковыряться и сократить сообщение до 60-70 символов. Но и так понятно, что откуда, почему 🙂

Главное, что все работает!

Подведем итог сегодняшнего поста:

1. Разобрали, как установить скрипт обратного звонка с сайта для ваших посетителей.

2. Настроили смс-оповещения, что поступила заявка на обратный звонок.

Мы молодцы! 😀

P.S. Вот ещё один более удобный способ сделать форму обратного звонка, который будет работать на любом сайте.

Для расслабления... Урок радости жизни на бензозаправке (особенно, после долгого копания в кодах). Спойте, как эти двое, и вам не придется платить за бензин 😉

Related Posts Plugin for WordPress, Blogger...
Присоединяйтесь ко мне в социальных сетях:

Присоединяйтесь ко мне в ТвиттереПрисоединяйтесь ко мне в Моём Мире
Если информация была для Вас полезна, пжл, проголосуйте за неё с помощью кнопочек

6 комментариев

  1. Коментарий не в тему немного, он про дизайн. Оля вы тестировали свой шаблон на адаптивность? У вас колонка с контентом(средняя часть) на малых разрешениях экрана просто пропадает, два сайдбара ее просто закрывают.

    • Ольга Абрамова:

      Да, тестировала, конечно. Но только не виртуальными инструментами (всякими расширениями в браузерах), а реальными. Сайт прекрасно работает как на планшетниках, так и в смартфонах и обычных мобильных телефонах. При просмотре с помощью приложений для веб-мастеров, согласна, полная фигня 🙂

  2. Спасибо за обзор.
    Если у вас кодировка utf-8, то ничего менять не нужно. Если же win1251, тогда нужно перекодировать callme.js.

    • Ольга Абрамова:

      Назар, и Вам спасибо за скрипт. Но у меня кодировка utf-8 и все-таки мне пришлось прописывать условия в файле .htaccess. Иначе, текст был нечитаемый 🙂

    • Кодировку так нужно всегда указывать для всего сайта, без этого часть других страниц могла отображаться так же.

    • Ольга Абрамова:

      Спасибо, возможно и так. Просто до этого момента проблем с кодировкой не было 🙂