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

Ключевая особенность чата в том, что его содержимое обновляется автоматически . Отсюда и возникают все трудности.

Для начала разберём с Вами структуру таблицы в базе данных . Вот те поля, которые обязательно потребуются:

• id - уникальный идентификатор.
• name - имя, оставившего сообщение. Здесь также может быть, например, user_id , означающий id пользователя из другой таблицы.
• message - сам текст сообщения.
• date - дата отправления сообщения.

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

Теперь необходимо вывести HTML-код :

Имя	Сообщение	Дата
Имя	Сообщение	Дата

В данном коде опять же всё как пример. Можно всё смело менять, но принцип должен быть тем же: есть место, где выводятся сообщения, причём они выводятся в одинаковом виде. Вместе с полем, где выводятся сообщения, есть текстовое поле и кнопка "Отправить ".

Обязательно для блока chat поставьте фиксированную высоту, чтобы при добавлении новых сообщений, у Вас этот блок не вырастал, также поставьте полосу прокрутки у него, чтобы можно было просмотреть все сообщения. Всё это делается с помощью CSS .

Теперь займёмся JavaScript :

function send() {
var message = document.getElementById("message").value;
var name = "Гость";
/* Здесь блок отправки POST-запроса с данными (например, через Ajax) */
}
function update() {
/* Здесь отправка запроса на получение всех сообщений (например, через Ajax) */
/* Здесь вывод сообщений в определённом формате прямо в HTML-код с использованием DOM, либо JQuery. */
}
setInterval("update()", 1000); // Обновление окна чата каждую секунду

И, наконец, PHP-код (добавление новых сообщений):

И последний файл, которые потребуется - это получение всех сообщений из таблицы:

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

Добавить контакт в группу в WhatsApp или отправить ему сообщение можно, если у человека на устройстве установлено приложение. Если же его нет, собеседника можно пригласить в WhatsApp. Инструкция по добавлению и удалению контактов в группы приложения отличаются в зависимости от операционной системы устройства: iOS или Android.

Добавлять и удалять контакты в групповых обсуждениях могут только администраторы. Администраторы могут давать аналогичные привилегии другим участникам группы. Во вкладке «Информация» можно посмотреть, кто в данном обсуждении обладает соответствующими правами.

Инструкции:

Добавление контакта в iOS

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

Добавление контакта в группу WhatsApp на iOS:

Запустить мессенджер.

Открыть вкладку «Чаты».

Нажать на название нужного чата.

В появившемся меню выбрать пункт «Добавить участника».

Выбрать из телефонной книги нудный контакт и отправить ему приглашение в группу.

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

Для добавления нового контакта в сам WhatsApp нужно:

Запустить приложение.

Открыть вкладку «Чаты (Chats)», расположенную в меню внизу экрана.

Если при открытии вкладки «Чаты» открылось какое-либо обсуждение, нужно нажать кнопку «Назад» в левом верхнем углу.

Нажать на значок в виде квадрата с карандашом, расположенный справа от надписи Чаты/Chats в верхней части экрана.

Выбрать пункт «Новый контакт/New contact».

Появится окно с добавлением контакта. Можно добавить имя, фамилию, место работы, фотографию, e-mail и другие дополнительные данные.

Добавление номера телефона происходит по нажатию кнопки «Добавить телефон/Add phone». Для номеров, обслуживаемых зарубежными операторами, требуется указывать код страны.

Нажать в правом верхнем углу экрана на кнопку «Готово».

Добавленный контакт должен появиться в приложении «Контакты» на iPhone. Если человек пользуется приложением WhatsApp, новый контакт появится в мессенджере автоматически.

Добавление номера в Android

Добавление нового контакта в WhatsApp на Android происходит несколько иначе. Суть действий остается та же: контакт либо сразу появится в мессенджере, либо просто сохранится в контактах телефона, если приглашаемый человек еще не установил приложение.

Добавление нового участника в группу:

Открыть приложение, перейти во вкладку с чатами.

Открыть группу, в которую требуется добавить контакт. Для выполнения данного действия требуются права администратора в группе.

Вызвать контекстное меню в верхней части экрана.

В открывшемся списке выбрать пункт «Инфо о группе».

Нажать на кнопку «Добавить участников».

Выбрать из телефонной книги нужного человека и отправить ему приглашение.

На странице «Инфо о группе» показываются все участники обсуждения. Если около участника есть надпись «Админ группы», значит он имеет право добавлять людей в обсуждение и удалять их из группы. Если добавляемого контакта нет в телефонной книге смартфона, добавить его можно напрямую из приложения.

Добавление нового контакта в WhatsApp:

Открыть мессенджер.

Нажать на кнопку в виде текстового облачка, расположенную в правом верхнем углу экрана, слева от кнопки «⋮».

Если откроется чат, нажать «Назад», на стрелочку в левом верхнем углу.

Откроется окно с выбором контакта (Select contact). Для добавления нового контакта нужно нажать на кнопку в виде человечка со знаком «+».

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

При необходимости, контакту можно настроить звук звонков, сменив стандартную мелодию.

По окончанию настройки нажать на галочку в вверху экрана/кнопку «готово», чтобы завершить добавление контакта.

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

Обратная связь с посетителями сайта и возможность пообщаться с клиентами - важная часть бизнеса.

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

Но почти все чаты для сайтов - это сторонние сервисы с платными и бесплатными функциями. Нужно добавить виджет к CMS или просто вставить специальный HTML код на WEB-страницу, чтобы заработал чат на сайте.

Это удобно, если вопросы безопасности вас не интересуют. Используя такие сервисы, вы даёте своё согласие на то, что все сообщения клиентов и ответы операторов будут храниться на каком-то чужом сервере.

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

2. Что должен уметь чат?

Необходимый минимум, три важные вещи:

• Отправлять текстовые сообщения. Важно, чтобы система «помнила» человека, и показала историю сообщений, если он будет общаться с оператором во второй или в третий раз.
• Делать голосовые и видео звонки с сайта. Без установки плагинов или Flash (браузеры планомерно отказались от него). Идеально подходит WebRTC, эту технологию поддерживают все современные браузеры.
• Отправлять изображения и документы. Очень хорошо, если можно вставлять скриншоты экрана (PrintScreen, Ctrl+V).

3. Безопасно или бесплатно?

И то, и другое. Как ни странно, но такой продукт есть. Это . В минимальной бесплатной лицензии на 20 онлайн-подключений можно легко запустить чат для сайта.

Со звонками, передачей файлов, хранением истории сообщений и неограниченным количеством операторов. С приложениями под Windows/Linux/Mac OS/Android и WEB.

4. Как запустить чат для сайта?

Сначала нужно установить MyChat Server. Как это сделать, написано в .

Необходимо иметь внешний IP адрес, чтобы к вашему серверу MyChat могли подключаться пользователи через Интернет. Если не знаете, как настроить сервер для работы в Интернете - .

За работу веб-чата отвечает встроенный в MyChat веб-сервер, по умолчанию он работает на 80 TCP порту без использования шифрования.

Чтобы самостоятельно узнать, какой у вас порт использует веб-сервер - зайдите в веб-админку через меню MyChat Client ”Инструменты” -> ”Администрирование сервера” (CTRL+F10), этот пункт будет только у пользователей с административными правами:

Затем, уже в браузере, в админ-панели, откройте раздел ”Настройки” -> ”Web-сервисы”, там указан порт вашего веб-сервера:

Теперь мы знаем порт, по которому будем подключать посетителей сайта к чату, запомним его.

Воспользуемся встроенным механизмом для генерации HTML кода чата. Открываем раздел админки ”Инструменты” -> ”Web-поддержка на сайт”:

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

В списке пользователей слева выделите одного или нескольких человек и нажмите кнопку ”Получить”, чтобы получить текст HTML-кода для вставки на сайт.

Пример кода кнопки:

< script type= "text/javascript" > (function () { window .mc_uho_opt = { id : "119368490_1932_6-13-6-600000000" , text : "Задать вопрос" , position: "1" , uin : , url : "mychat-server.com" , secure: false }; var run = document .createElement("script" ); run.type = "text/javascript" ; run.async = true ; run.src = (mc_uho_opt.secure ? "https://" : "http://" ) + mc_uho_opt.url + "/chat/uho/supportUho.js" ; var s = document .getElementsByTagName("script" ); s.parentNode.insertBefore(run, s);})();

Параметры:

Итак, у нас уже есть готовый код HTML для вставки на сайт. Открываем в менеджере сайта файл index.html и перед закрывающим тегом добавляем код кнопки.

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

5. Примеры, примеры

Стандартный HTML-код кнопки может показаться сложным и не очень понятным.

Им можно и не пользоваться, ведь он всего лишь рисует ”ушко” с текстом, а ”под капотом” у него ссылка на ваш MyChat сервер с набором параметров. Зная их, можно делать свой дизайн и функционал кнопки для веб-чата.

Когда посетитель вашего сайта нажмет на кнопку - он перейдет по ссылке и откроет отдельное окно браузера.

HTTP(s)://YOU_SERVER_IP_OR_HOST:PORT/support/?uin=UIN

• Протокол: HTTP используется по умолчанию, если у вас настроено шифрование - нужно писать HTTPS.
• Адрес: YOU_SERVER_IP_OR_HOST замените на ваш внешний IP адрес или доменное имя, по которому доступен MyChat Server.
• Порт: PORT нужно подставлять только в тех случаях, если ваш веб-сервер работает на нестандартных портах (порт 80 для протокола HTTP и 443 для HTTPS писать не нужно).
• Идентификатор пользователя: UIN нужен обязательно, чтобы веб-чат знал, с каким именно оператором будет открыт диалог.

Пример №1: стандартный HTTP порт 80 , IP адрес — 10.10.123.123 и UIN - 55 :

http :// 10.10.123.123 / support /? uin = 55

Пример №2: нестандартный порт - 8080 , host - mysite.org , UIN - 12 и еще включенное шифрование на веб-сервере:

https :// mysite.org :8080 / support /? uin = 12

Как видите, после названия host-а явно через двоеточие указан порт mysite.org:8080 , потому что он нестандартный.

Пример №3: включено шифрование, домен третьего уровня voronezh.mycompany.com , UIN - 7 и свой дизайн кнопки:

Вот и вся магия.

Если у вас еще остались вопросы - ждем на .

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

Мини-чат – это простой и понятный мессенджер, в котором можно отправлять сообщения и вставлять смайлики. Хотите сделать такой? В данной статье мы как раз и расскажем вам о том, как добавить чат на свой сайт.

Чтобы добавить форму для отправки сообщений, вам нужен компьютер с подключением к интернету. Далее:

• Зарегистрируйте чат на сайте cbox.ws. Процедура регистрации простая, много времени не требует. После её прохождения вы сможете сразу входить в аккаунт. Чтобы изменить стиль оформления, задайте нужные вам настройки в меню «Внешний вид» (опция «Изменение стиля»). Понравился результат? Сохраняйте его и жмите кнопочку «Опубликовать». Сохраните код – он понадобится вам для создания мини-чата.
• Теперь заходите в админку для управления новой функцией.
• Переходите в настройки модуля. В поле url впишите ссылку из кода, задайте параметры высоты и ширины фрейма, введите цели cboxmain, затем сохраните сделанные произведённые изменения.

Если площадка создана на популярной сегодня платформе Joomla, жмите «Фрейм» для привязки к сайту. Заполняйте поля формы, в названии прописывайте «Мини-чат» и подключайте его (опция «Включён»). Выберите положение (лучше слева) и тип доступа (открытый). Ваша площадка создана на WordPress? Выберите виджет чата, перетяните его в нужное место. Если чатов будет несколько, разделите их с помощью специального кода и не забудьте при этом проставить нумерацию.

Как видите, создать чат на сайте предельно просто – на это у вас уйдёт совсем не много времени, если знать, что к чему. Следуйте вышеизложенной инструкции. Не забудьте проверить корректность работы формы сразу после размещения и внести коррективы при необходимости. Благодаря наличию специальной формы быстрого обмена сообщениями коммуникация между пользователями станет максимально приятной и простой, что повысит их лояльность к вашему сайту. Наличие эмоций (иными словами, смайликов) – не обязательное, но весьма желательное условие, поскольку данные средства дополнительно облегчают общение.

На большинстве современных площадок есть мини-чаты, что указывает на их высокую популярность. Коды для разделения (если на сайте их будет несколько) вы найдёте в Сети. Вводите значения внимательно – даже лишний пробел сделает систему неработоспособной. Именно поэтому её работу следует проверять сразу же после создания и вносить правки, не дожидаясь гневных комментариев посетителей площадки, которые начнут жаловаться на невозможность нормального общения или пропавшие реплики.

В январе 2018 года в поисковой выдаче Яндекс у некоторых сайтов появилась кнопка «Начать чат». Что это такое и как ее добавить на свой сайт, поговорим в этой статье.

Появление этой кнопки в поиске является совместным экспериментом компании JivoSite и Яндекс. Наверняка, вы уже видели как это работает:

• вводите поисковый запрос в Яндекс;
• в сниппете главной страницы некоторых сайтов видна кнопка;
• по клику на кнопке открывается чат.

Все что вы напишете попадет в онлайн-косультант JivoSite.

Менеджеры интернет-магазинов зачастую не понимают, что вы пишете им прямо из поиска. Также они не имеют информации о поисковом запросе, с которым вы пришли.

Как добавить кнопку «Начать чат» на свой сайт

Для тестирования были отобраны некоторые пользователи платформы JivoSite. Если вы также хотите завести такую кнопку для своего сайта, вот порядок действий:

Зарегистрируйтесь и установите онлайн-консультант JivoSite . После настройки в личном кабинете, вы получите html-код, который нужно добавить на все страницы вашего сайта. Сделать это можно по аналогии со .

Оплатите подписку на сервисе. Да, чаты Яндекс доступны только в платной версии онлайн-консультанта. На момент написания статьи она стоит чуть больше 7000 rub в год.

3. Написать в техническую поддержку JivoSite со словами «Хотим принять участие в эксперименте Яндекса». Таких запросов там уже предостаточно, можно скопировать любой из них и написать домен своего сайта. Отвечают на запросы в течение суток.

После этого вас включат в список желающих и передадут информацию в Яндекс. Если все пройдет хорошо — у вашего сайта появится долгожданная кнопка.

А теперь о результатах

По отзывам наших коллег, количество целевых обращений НЕ ИЗМЕНИЛОСЬ, вопреки ожиданиям. Вот так, и на то есть свои причины.

Сама надпись на кнопке «Начать чат» двусмысленна. Зачем начинать чат если человек пришел купить? Онлайн-консультант является штукой исключительно коммерческой (судя по цене годовой подписки). Хорошо было бы написать «Задать вопрос» или «Получить консультацию». Не зная цен и других характеристик предложения (переход на сайт не выполнялся) спрашивать не о чем.

Кнопка чата повысит кликабельность Яндекс сниппета вашей главной страницы, в теории. Но если вы используете другие онлайн-консультанты, это дополнительные расходы.

Альтернативы

Вот если бы Яндекс выполнял проверку на наличие контактных телефонов из Яндекс Справочника в популярных мессенджерах, таких как: Viber, Telegram, WhatsApp и выводил ссылки с иконками — это было бы здорово. Тем более на волне растущей популярности мессенджеров.

Выводы

Кто-то ненавидит онлайн-консультанты, кто-то их ставит во все свои проекты. Но факт остается фактом — чаще они работают. Особенно в коммерческих темах. Вот пример:

Онлайн-консультант в строительной тематике.

Про онлайн-консультанты будет отдельная статья. Расскажем как их настроить и установить на Ваш сайт.

На этом все. Повышайте конверсию ваших сайтов и получайте прибыль.