Как создать свой сайт с чатом

Создание чата для сайта

Из этого материала вы узнаете:

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

Что представляет собой онлайн-чат

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

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

Система привычна по мессенджерам вроде WhatsApp, Telegram. Она позволяет избежать барьера между продавцом и покупателем, которому некомфортно звонить и разговаривать голосом. Плюс не приходится ждать, когда менеджер обработает заявку, поступившую с формы обратной связи. У посетителя создается уверенность, что ему помогут в любое время и по любому вопросу. Благодаря такому подходу повышается лояльность потенциальных клиентов.

Зачем нужен чат

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

Преимущества для бизнеса

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

Руководитель (владелец) бизнеса получает:

  • снижение затрат на обработку заказов;
  • возможность онлайн-отслеживания разговоров;
  • создание базы для рекламных рассылок.

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

Как сделать чат эффективным

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

  1. Подготовьте список часто задаваемых вопросов. При использовании чат-бота ответы на них будут отправляться автоматически.
  2. Подключите чат к CRM, e-Commerce. Интеграция канала в систему сквозной аналитики дает возможность получать оперативные данные по работе отдела продаж, подробные отчеты.
  3. Используйте программный интерфейс API. Он заметно упростит интеграцию со сторонними сервисами.

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

Специальные функции онлайн-чата

Нормой считается включение в виджет дополнительного функционала вроде оценки разговора или обязательного сохранения истории диалогов. Если предусмотреть такие возможности, статистика будет пополняться маркетинговыми данными, а менеджеры получат доступ к прежней переписке сразу после ввода контактов. Разработка мобильного приложения для чата на сайте позволит находиться онлайн в любое время суток, независимо от места нахождения оператора. Также полезна функция переадресации вопросов между сотрудниками. Она позволяет передавать технические вопросы профильному специалисту или разгружать персонал в пиковые периоды. То же относится к возможности прикреплять файлы. При грамотном построении работы они сразу же будут подгружаться в CRM, и не понадобится отдельно списываться для их отправки.

Нужна ли интеграция с дизайном

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

  • чат должен выглядеть органично на настольных компьютерах и любых смартфонах;
  • приглашение к общению лучше максимально персонализировать;
  • предпочтительно сразу создавать виджет под все задачи.

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

Готовое решение или отдельная разработка?

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

  • открытый код, отсутствуют ограничения по доработкам;
  • полноценная интеграция с ИТ-инфраструктурой компании;
  • программа в точности соответствует бизнес-процессам.

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

Этапы создания чата для сайта

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

Шаги по разработке:

  1. Сбор, анализ требований.
  2. Составление, согласование ТЗ.
  3. Написание кода.
  4. Тестирование ПО.

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

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

Делаем видео-чат в веб-браузере с минимумом трудозатрат

Для реализации функционала видео-чата в браузере существует две наиболее подходящие из технологии — WebRTC и Flash. Каждая из технологий обладает рядом своих особенностей, например, во Flash можно использовать видео кодеки H.264 или Sorenson, а в WebRTC на текущий момент доступен VP8, что делает два этих подхода плохо совместимыми друг с другом (перекодирование видео на лету — это очень затратная операция), к тому же видео-чат лучше делать peer-to-peer по возможности, стоит ли говорить, что соединить Flash и WebRTC напрямую не выйдет. В нашем примере мы рассмотрим вариант видео-звонка звонка из WebRTC в WebRTC, с помощью платформы VoxImplant. В целом, можно сделать выбор конкретного варианта, вплоть до динамического выбора технологии в зависимости от того кому звоним. Подробности, как обычно, под катом.

Для начала нам потребуется аккаунт разработчика VoxImplant (регистрация тут), после входа в панель управления VoxImplant в разделе Applications создаем новое приложение и называем его videochat. Чтобы организовать простой видео-чат нам потребуется хотя бы 2 пользователя — testuser1 и testuser2, создаем их в разделе Users. При звонке от пользователя к пользователю вызывается сценарий обработки звонка, который пишется на Javascript и выполняется движком VoxEngine. Создадим внутри приложения новый сценарий, назовем его User2User, при использовании режима peer-to-peer сценарий будет выглядеть следующим образом:

Создание приложения, пользователей, сценария и настройка

Для начала нам потребуется аккаунт разработчика VoxImplant (регистрация тут), после входа в панель управления VoxImplant в разделе «Приложения» создаем новое приложение и называем его videochat. Чтобы организовать простой видео-чат нам потребуется хотя бы 2 пользователя — testuser1 и testuser2, создаем их в разделе «Пользователи». При звонке от пользователя к пользователю все равно вызывается сценарий обработки звонка, который пишутся на Javascript и выполняется движком VoxEngine. Создадим внутри приложения новый сценарий, назовем его User2User, при использовании режима peer-to-peer сценарий будет выглядеть следующим образом:

Если в будущем захочется гонять видео через сервер (принудительно), то можно использовать , но в этом случае звонки будут стоить денег.

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

Читайте также  Как сделать набойки

После создания сценария нам нужно создать правило в разделе —«Роутинг». Назвать можно как угодно, например, Intercom, в маске указывается регулярное выражение — правило срабатывает если номер соот-вует этому выражению, оставляем .*, прикрепляем наш сценарий User2User и сохраняем правило. Остается только сделать клиент с помощью VoxImplant Web SDK.

Создание веб-клиента

Для клиента потребуется только файл voximplant.min.js, который лежит на cdn, а также базовое понимание как устроено Web SDK. Чтобы все выглядело все более-менее прилично можно использовать Bootstrap. Не вижу смысла вываливать сюда весь код из HTML-файла, разберем только основные моменты, а более глубоко разобраться всегда можно, скачав файлы с нашей странички на GitHub.

Вот собственно все основные функции и эвенты, которые нам нужны. Естественно, это голый JS, к этому нужно прикрутить стили и верстку. Вариант, который мы выложили на GitHub выглядит так:


В случае если нужна поддержка и Flash и WebRTC придется переключать клиентское приложение в соответствующий режим, потому что видео-звонки WebRTC<>Flash мы реализовывать не стали. Надеемся, что в ближайшем будущем поддержка WebRTC появится в IE12, а за ним и в Safari. Если у вам нужен вариант «звонок с сайта оператору», то можно сделать 2 операторских приложения, одно с использованием WebRTC, другое с использованием Flash, и направлять звонки с сайта в зависимости от того какой режим SDK включится у посетителя сайта или на одного или на другого оператора.

Создаем чат для сайта: HTML, JS, PHP и AJAX

Когда обычных комментариев становится недостаточно, приходит время создать чат.

С помощью чата пользователи общаются друг с другом, повышая интерес к сайту. Это важный элемент для вебинарных площадок, порталов со службой поддержки и страниц, где необходимо более живое, нефорумное общение. Гайд поможет на практике скомбинировать знания по HTML, JS, PHP и AJAX и создать готовый продукт.

Если знаний ещё недостаточно, обратите внимание на курс «Веб-разработчик c нуля до PRO».

Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Каким должен быть чат

Удобство для пользователей превыше всего. Позаботьтесь, чтобы чат соответствовал современным требованиям:

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

Каркас чата на HTML

В первую очередь создаём форму отправки и контейнер для отображения сообщений:

Задаём стили

Первый этап пройден:

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

Основная часть чата
на JS + PHP

Сообщения будут отправляться и загружаться с помощью AJAX. На JavaScript пишем функции работы с интерфейсом и связи с серверной частью, а на PHP — методы обработки полученных данных и взаимодействия с базой данных.

Создаем переменные на JS

Создаем функцию для запросов

Она получает переменную act, в которой хранится одно из трёх значений: auth (авторизация), load (загрузка) и send (отправка). От них зависит, какая информация будет передана в PHP-файл.

Создаём функцию обновления чата

И укажем для нашей функции интервал выполнения:

После отлавливается событие отправки формы — это поможет отказаться от обновления страницы:

Теперь займёмся самим обработчиком. В первую очередь с помощью функции session_start () запускается сессия, затем подключается база данных:

Создаём функцию авторизации

Создаём функцию загрузки

Создаём функцию отправки сообщений

В функции уже присутствует несложная валидация, но можно добавить и другие меры защиты от инъекций и спама:

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

Теперь, когда все функции готовы, пропишем их вызов.

Вызываем функции

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

Теперь, когда чат работает, пора добавить авторизацию. Для этого можно создать отдельную форму во фронте, но можно обойтись и модальными окнами. В функции send_request () дополним отправку запроса:

Вот как это выглядит:

Дополнительные функции

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

Смайлики

Создадим свой набор смайликов чата. Работать это будет так:

  • пользователь открывает специальное окошко и кликает по смайлику;
  • в поле ввода добавляется код смайлика (например, : sad: или: crazy:);
  • при выводе сообщения код смайлика заменяется на изображение.

Для начала добавим контейнер со смайликами и кнопку для его открытия:

Добавим скрипт для загрузки смайликов и открытия меню с ними:

А теперь и функцию добавления смайлика в поле:

После этого укажем, когда вызываются функции:

Приступим к загрузке смайликов и их преобразованию на PHP:

Эта функция сканирует папку со смайликами, а потом проверяет расширение файлов. Она очень удобна, потому что отображает в формате PNG все смайлики, которые мы добавили.

Чтобы вызвать её, добавим ещё один case в функцию switch () в конце обработчика:

Теперь с помощью регулярных выражений можно заменять код смайлика на изображение:

Вызывается эта функция при загрузке сообщений:

Вот как это выглядит:

Ответ на сообщения

Чтобы добавить возможность отвечать кому-то конкретному, изменим функцию addEmoji (). При нажатии на ник собеседника будет меняться текст в поле ввода.

Для этого в load () изменим формат сообщений, добавив span к нику:

Пишем саму функцию:

И вызываем функцию:

Заключение

Одной статьи недостаточно, чтобы охватить все возможности PHP и JS для разработки чатов. С помощью этих языков легко добавить:

  • ответ на конкретные сообщения;
  • форматирование текста;
  • отправку аудио;
  • разные «комнаты»;
  • чат-бота и многое другое.

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

Веб-разработчик c нуля до PRO

Практический курс для тех, кто хочет стать профессиональным
веб-разработчиком, запустить свой интернет-проект или веб-сервис и получить первые заказы на разработку. Помимо просмотра уроков, вы будете делать реальные проекты, которые оценят. Ведь работодатели будут встречать вас в том числе и по тому, что увидят на аккаунте вашего GitHub. После прохождения обучения — гарантированное трудоустройство

Как создать собственный сайт: пошаговая инструкция для начинающих

Константин Докучаев, автор блога All-in-One Person, специально для блога Нетологии написал статью о том, как быстро зарегистрировать домен и создать свой сайт.

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

Сейчас для создания сайта нужно менее 1000 рублей, 3 дня работы и большое желание. Я постарался описать все шаги максимально подробно, понятно и со скриншотами.

Шаг 1. Выбираем и покупаем домен

Прежде чем купить домен, нужно определиться с именем. Возьмём для примера myfirstwebsite.соm. Теперь заходим на один из самых популярных регистраторов — REG.RU. На его примере покажу, как купить домен. Для других регистраторов действия будут аналогичные.

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

Создаем сайт myfirstwebsite в доменной зоне «.com»

На следующем шаге система предложит купить выбранный домен или аналоги в другой зоне. Если результат устраивает, нажимайте кнопку «Зарегистрировать».

Альтернативные свободные доменные зоны для сайта myfirstwebsite

На следующем шаге будет информация о сроках регистрации домена и дополнительных услугах. Я рекомендую всё оставить по умолчанию: регистрация на год с автопродлением и без дополнительных услуг. Услуги всегда можно подключить потом отдельно. Всё круто, нажимайте «Продолжить».

Следующий шаг — заполняем анкету владельца домена. Затем REG.RU предложит настроить DNS-сервера. Поскольку у вас пока нет своих серверов, поставьте галочку «Использовать серверы регистратора» и нажмите «Продолжить».

DNS — это специальный сетевой адрес вашего сайта. С его помощью интернет понимает, какую страницу открыть при вводе адреса.

Обязательно ставим галочку

Наконец-то можно оплатить домен. Проверьте ещё раз все данные, сумму и переходите к оплате. После оплаты домен появится в личном кабинете пользователя в разделе «Мои домены».

В личном кабинете отображаются все ваши домены

Есть и другие регистраторы: webnames.ru, godaddy.com, nic.ru, nethouse.ru и много других. Просто введите в поисковую строку «Зарегистрировать домен».

Шаг 2. Создаём сайт

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

Мы возьмём для примера один из самых удобных и простых конструкторов создания сайта — Tilda, который пользуется большой популярностью у бизнеса и медиасферы.

После регистрации в Tilda нужно просто выбрать стартовый шаблон и начать его редактировать на своё усмотрение, следуя пошаговым инструкциям. Это достаточно просто и для начала работы достаточно одной минуты.

Выбираем шаблон сайта

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

Читайте также  Как определить беременность свиньи

Если не понравилась Tilda, есть и другие варианты. Например, Wix, uKit, Readymag очень хорош для презентаций, а WordPress — полноценная и самая развитая CMS для создания профессиональных и простых сайтов. Выбирайте на свой вкус и по своим потребностям. Разные конструкторы нацелены на разные задачи и предлагают разную функциональность. При желании можно создать интернет-магазин без участия программистов с помощью Ecwid или Shopify. Первый хорошо ориентирован на российские сервисы, второй больше на Европу и под него много красивых дизайн-шаблонов.

Шаг 3. Связываем сайт и домен

Для работы сайта нужно, чтобы браузер понял, что по адресу myfirstwebsite.соm должен открываться именно ваш сайт. Это называется настройка DNS.

Чтобы настроить DNS, перейдите в раздел настроек своего сайта в Tilda и выберите пункт «Домен». Здесь нужно написать свой адрес (myfirstwebsite.соm).

Привязываем наш сайт на Тильде к домену

Далее, нужно у регистратора (REG.RU) прописать сервера Tilda. В справке Тильды есть пошаговая инструкция для REG.RU и других популярных регистраторов.

Шаг 4. Настраиваем сервисы обратной связи

Если у вас сайт личного характера, можете пропустить этот шаг.

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

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

Самый простой способ установить такой чат — воспользоваться специализированным сервисом наподобие Re:plain. Это бесплатный веб-чат, где сообщения с сайта приходят сразу в мессенджер Telegram и общение с посетителем можно вести прямо из мессенджера.

Инструкция по подключению сервиса обратной связи

Установите Telegram для ПК, Android или iPhone и iPad, добавьте бота Re:plain, следуйте инструкции, и вы получите код, который надо установить на сайт.

Если используете Tilda, откройте редактор страницы, промотайте в самый низ, добавьте новый раздел и выберите «Виджет > Другое > HTML код». Туда вставьте код, скопированный из бота, и сохраните страницу.

Копируем и вставляем код

Остальные популярные виджеты можете найти в статье блога «Обзор популярных виджетов для сайта».

Шаг 5. Публикуем сайт в сети

Вы создали сайт, настроили DNS, поставили веб-чат. Теперь сайт готов к публикации в сети. Для этого просто откройте редактор страницы в Tilda и нажмите кнопку «Опубликовать».

Всё, теперь сайт доступен для всех в интернете.

Теперь у вас есть свой сайт

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

Для дальнейшей работы я рекомендую также установить на сайт основные счётчики, которые помогут анализировать ваших посетителей: видеть, откуда они пришли, какие страницы смотрят, кто совершает заказ и так далее. Основные инструменты для этого — Яндекс.Метрика и Google.Analytics.

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

Второй инструмент аналитики — это Google.Analytics — более мощная и функциональная система анализа посетителей.

Настроить счётчики в Tilda можно в специальном разделе настроек «Аналитика & SEO» с помощью подробной инструкции.

Конечно, в зависимости от сложности задач, инструменты, описанные в статье, могут не подойти, и вы выберете другой путь разработки сайта. Я, например, всегда подключаю Cloudflare и AddThis ко всем своим проектам. Если у вас есть полезные инструменты, которые пригодятся новичкам, напишите о них в комментариях.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Как сделать чат

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

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

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

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

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

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

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

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

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

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

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

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 25 ):

    Спасибо за статью, Михаил! Но ведь можно сделать и без применения js?

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

    Spasiba za statiu Mixail..Vapros: Shtob Sozdat Chatik na znat PHP ? i JavScript? obizatelna ? a mojna li vot suda postavit http://remzi.mail2k.ru/ ? Zarane spasiba ..

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

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

    Отправлять вместе с запросом id последнего сообщения, например. Если новое появилось, то возвращать результат.

    А лучше ли будет передавать хэш id ? или лучше будет сделать специально отдельно колонку в таблице, с рандомным значением (и сделать и его хэш)чтоб исключить подстановку?!

    Если беспокоитесь о безопасности, то можете и так сделать. Как альтернатива, можете передавать не id, а время последнего обновления. Тогда выводить только сообщения, отправленные позже этого времени.

    Можно сделать асинхронную подгрузку сообщений если не беспокоетесь о нагрузке

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

    Михаил, а как сделать так, чтобы при обновлении страницы все сообщения из окна чата исчезали? Т.е. каждый новый пользователь не видел сообщений старых. И если это вообще возможно, то где хранить сообщения в БД или в файлах… Спасибо

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

    у меня вопрос) я не разбирал код честно говоря, просмотрел поверхностно) но как быть в случае когда нужно показывать 100 сообщений, тогда контент страницы требует прокрутку) и вид вовсе не компактный, как решить эту проблему? просто не хочу курить форумы))

    Через CSS у блока можно поставить максимальную высоту и прокрутку.

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

    Михаил, вы пишите статьи для людей или для поисковиков?

    В первую очередь, для людей. Для поисковиков только ставлю.

    Михаил, спасибо за статью. Вопрос: мне нужно установить, уже готовый чат Mibew Messenger.Все понятно, но там нужно создать БД MySQL и БД пользователя, где это создавать и как? управление сайта через самописную cms. В примере БД создаются в phpMyAdmin.

    Для создания пользователя и БД используйте все тот же phpMyAdmin

    Инструкция: «Как установить на сайт онлайн-консультант»

    В качестве примера мы рассмотрим установку онлайн-чата от JivoSite. Установка других сервисов происходит аналогичным способом. Отличия в мелочах и числе доступных интеграций.

    Регистрация на сервисе

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

    1. Откройте сайт JivoSite и нажмите на кнопку «Зарегистрироваться».
    2. Укажите действующий адрес электронной почты и придумайте или сгенерируйте пароль.
    3. Добавьте имя администратора и адрес сайта, на который собираетесь установить чат. Укажите также номер телефона, который будет использоваться для оперативного решения возникающих вопросов.
    4. Подтвердите обработку персональных данных и завершите регистрацию.
    5. Скачайте приложение для десктопа или мобильного устройства, если в этом есть необходимость. Можно обойтись без него и пользоваться браузерной версией личного кабинета JivoSite.

    На финальном этапе регистрации появится HTML-код, который нужно вставить на сайт для отображения на его страницах формы онлайн-консультанта. Можно скопировать его в буфер обмена или пропустить этот шаг.

    После нажатия на кнопку «Начать работу» вы попадёте в личный кабинет JivoSite. Здесь настраиваются параметры работы чата, а также проходит общение с клиентами, которые написали через форму онлайн-консультанта.

    Вставка кода HTML

    При регистрации вы получили код, который вставляет форму на сайт. Работать с ним очень просто — вы копируете синтаксис в буфер обмена, а затем вставляете в шаблон страницы, на которой должен отображаться чат. Код чата доступен в личном кабинете в разделе «Управление» — «Каналы связи» — «Настройки» — «Установка».

    В шаблоне страницы необходимо найти закрывающий тег ‹/body›. Искать его следует внизу, после основного контента страницы.

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

    Установка онлайн-чата на конструкторы сайтов

    На большинстве конструкторов у JivoSite есть виджет или приложение, через которое онлайн-чат можно вставить на любую страницу сайта. В качестве примера рассмотрим популярные сервисы:

    uKit → Детальный обзор:

    1. В визуальном редакторе откройте вкладку «Конструктор».
    2. Выберите пункт «Контакты».
    3. Найдите в списке JivoSite и перетащите его на страницу.
    4. Нажмите на появившуюся панель онлайн-консультанта, чтобы открыть его настройки.
    5. Авторизуйтесь или создайте новый аккаунт.

    Wix → Детальный обзор:

    1. В панели редактирования перейдите на вкладку «Приложения».
    2. Откройте категорию «Чат».
    3. Выберите в списке JivoChat Live Support.
    4. Нажмите «Добавить».
    5. После установки нажмите на виджет, чтобы открыть его параметры.
    6. Авторизуйтесь или создайте новый аккаунт.

    Flexbe → Детальный обзор:

    1. Откройте меню «Настройки».
    2. Зайдите в «Виджеты».
    3. Выберите из перечня JivoSite.
    4. Вставьте полученный при регистрации код.

    Nethouse → Детальный обзор:

    1. Откройте раздел «Приложения».
    2. Выберите JivoSite.
    3. Перейдите во вкладку «Подключение» и нажмите «Подключить».
    4. Введите логин, пароль, а также имя основного оператора.

    LPgenerator → Детальный обзор:

    1. В личном кабинете LPgenerator откройте «Центр оптимизации и конверсии».
    2. В разделе «Интеграции» выберите JivoSite.
    3. Введите данные от имеющегося аккаунта или добавьте новые: почту, пароль, имя оператора и адрес лендинга.
    4. Нажмите «Добавить интеграцию».

    Lpmotor → Детальный обзор:

    1. Откройте вкладку «Интеграции» в панели управления конструктора.
    2. Выберите в списке JivoSite.
    3. Включите интеграцию.
    4. Вставьте код, полученный при регистрации личного кабинета JivoSite.

    InSales → Детальный обзор:

    1. Откройте центр приложений InSales.
    2. Найдите и установите JivoSite.
    3. Создайте новый аккаунт или подключитесь к существующей учётной записи.

    Однако встречаются исключения. Например, на конструкторе A5 нет виджета или приложения, поэтому единственный рабочий вариант — вставка кода HTML.

    1. Перейдите на вкладку «Страницы».
    2. Выберите шаблон «Мастер-страница».
    3. Откройте каталог виджетов и перетащите на страницу виджет HTML-кода.
    4. В поле «Код» вставьте код онлайн-консультанта, который вы получили при регистрации на JivoSite.
    5. Сохраните изменения, нажав на кнопку «ОК».

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

    Установка онлайн-консультанта на CMS

    На CMS тоже доступна вставка консультанта через правку шаблона. Можно использовать редактор в панели администратора или открыть файл с помощью FTP-подключения к серверу. Принцип везде один и тот же — код вставляется в один из файлов шаблона перед закрывающим тегом ‹/body›. На некоторых CMS есть также расширения JivoSite. С их помощью добавить чат ещё проще.

    В качестве примера рассмотрим популярные движки.

    WordPress → Детальный обзор:

    1. Перейдите в раздел «Плагины» в панели управления.
    2. Нажмите «Добавить плагин».
    3. Найдите и установите расширение JivoSite.
    4. После установки активируйте плагин.
    5. Откройте настройки JivoSite, нажав на него в боковом меню.
    6. Укажите почту, пароль от личного кабинета и имя оператора, которое будет отображаться в чате.
    7. Нажмите «Установить онлайн-консультант JivoSite».

    Если вы из одной панели управляете несколькими сайтами, то вариант с плагином не подойдёт. В таком случае можно добавить виджет в разделе «Внешний вид» и вставить в него код HTML или отредактировать файл footer.php.

    Joomla → Детальный обзор:

    1. Скачайте модуль JivoSite, который подходит используемой версии Джумлы.
    2. В панели администратора Joomla откройте список «Расширения» и перейдите к установке.
    3. Загрузите предварительно скачанный архив JivoSite.
    4. Откройте «Менеджер модулей».
    5. Перейдите в настройки JivoSite.
    6. В поле «Widget ID» вставьте идентификатор чата. Его можно посмотреть в коде, полученном при регистрации на JivoSite. Вам нужен “widget_id =” с десятизначным ID.

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

    Drupal → Детальный обзор:

    1. В панели администратора откройте «Структуру».
    2. Выберите «Схему блоков».
    3. Перейдите в «Библиотеку пользовательских блоков».
    4. Добавьте новый блок.
    5. В строке «Описание блока» напишите «JivoSite».
    6. В поле «Содержимое» добавьте HTML-код, полученный при регистрации на сервисе.
    7. Выберите режим «Полный HTML».
    8. Сохраните изменения для добавления чата.
    9. Вернитесь в «Схему блоков».
    10. Отыщите в перечне JivoSite и кликните «Расположить блок».
    11. Снова отыщите JivoSite и разместите блок.
    12. После его появления в области «Шапка» сохраните конфигурацию.

    Можно также вставить чат через FTP, добавив фрагмент кода в файл html.tpl.php. Он находится в папке /modules/system. Код вставляется перед закрывающим тегом ‹/body›. В Drupal 6 код вставляется в page.tpl.php, который находится в папке активной темы.

    OpenCart → Детальный обзор:

    1. Откройте вкладку «Модули/Расширения».
    2. Выберите тип «Аналитика» и добавьте модуль Google Analytics.
    3. После появления в перечне сайта нажмите на кнопку Edit.
    4. Добавьте код чата и установите статус «Включено», после чего сохраните настройки.

    Можно также вставить чат через FTP-подключение, отредактировав файл Footer.tpl.

    PrestaShop → Детальный обзор:

    1. Скачайте JivoSite для PrestaShop.
    2. В панели администратора откройте «Модули/Модули и сервисы».
    3. Нажмите «Загрузить модуль».
    4. Выберите скачанный файл модуля и загрузите его на сервер.
    5. Выберите JivoSite в списке доступных модулей и нажмите «Установить».
    6. Нажмите на кнопку Proceed with the installation.
    7. Подключите действующий аккаунт или создайте новый.
    8. Нажмите Update/Save, чтобы сохранить изменения.

    При добавлении через FTP ищите файл footer.tpl, который находится внутри каталога с названием действующего шаблона в директории themes. Фрагмент кода вставляется перед закрывающим тегом ‹/body›. На некоторых шаблонах это не работает, поэтому приходится вставлять запись в файл header.tpl перед закрывающим тегом ‹/head›.

    Shopify → Детальный обзор:

    1. Откройте AppStore Shopify.
    2. Найдите приложение JivoSite, нажмите Get, чтобы его установить.
    3. Авторизуйтесь или создайте новый аккаунт.
    4. Нажмите на кнопку Install App.
    5. Выберите канал для подключения — свой сайт.

    Magento → Детальный обзор:

    1. В панели администратора откройте меню «Система» и выберите подменю «Конфигурация».
    2. Откройте «Дизайн» и перейдите в «Футер».
    3. В поле «Различный HTML» добавьте фрагмент кода, после чего сохраните конфигурацию.

    Добавить запись можно также в файл в файл footer.phtml. Он хранится в папке /app/design/frontend/default/ /template/page/html.

    Чтобы консультант заработал на сайте, откройте меню «Система» и перейдите в раздел «Управление кэшем». Нажмите «Выбрать все» и затем «Отправить».

    ModX → Детальный обзор:

    1. В панели администратора перейдите на вкладку «Элементы».
    2. Нажмите на кнопку «Новый чанк».
    3. Укажите имя JivoSite.
    4. В строке «Код чанка» вставьте фрагмент кода, полученный при регистрации.
    5. На вкладке «Элементы» откройте раздел «Шаблоны».
    6. Выберите текущий шаблон для перехода в режим редактирования.
    7. Перед закрывающим тегом ‹/head› добавьте конструкцию [[$jivosite]].

    Можно не создавать чанк, а вставить код онлайн-консультанта в файл шаблона перед закрывающим тегом ‹/body›. Если вы используете несколько шаблонов, то добавлять чат придётся в каждый из них.

    Ни один из способов не требует специальных навыков. В итоге вы получаете функциональный онлайн-чат, которым управляете через личный кабинет JivoSite, доступный в веб-версии или в отдельном приложении.

    Понравилась статья? Поделиться с друзьями:
    Добавить комментарий

    ;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: