01
авг
2018
Обратная связь на сайте является очень важным элементом, чтобы не потерять клиента когда вас нет рядом. Есть много платных аналогов, которые помогут вам создать чат-бота для сайта, и помочь пользователю в решении распространенных вопросов на сайте, тем самым помочь пользователю, не тратить на это усилий, но сегодня мы хотим показать как сделать такого бота самому, в красивой форме при помощи небольшого плагина convForm-это небольшой плагин jQuery для создания умного, интерактивного чат-бота из обычной html-формы.
Шаг 1. HTML
Плагин требует, чтобы последняя библиотека jQuery была правильно загружена в документ, обратите внимание, чтобы у вас не было подключено одновременно две библиотеки:
Идем дальше, загрузите в документ файлы javascript и CSS плагина jQuery convForm:
Создавая разметку вы можете определять свои собственные вопросы для каждой формы, используя атрибуты conv -*:
Если вы хотите показать конкретные вопросы, на основе ответов пользователя:
На основании это разметки, мы создали целую структуру вопросов и ответов, которые отображены в демонстрации.
Шаг 2. JS
По умолчанию все работу выполняет плагин, который имеет следующие настройки, вы можете их изменить под свое усмотрение:
Такой бот станет отличным помощником и поможет проконсультировать пользователя за вас, вы можете построить целую иерархию вопросов, тем самым разгрузив себя от одинаковых вопросов посетителей.
Вот и все. Готово!
Чат-бот для сайта при помощи JS
Обратная связь на сайте является очень важным элементом, чтобы не потерять клиента когда вас нет рядом. Есть много платных аналогов, которые помогут вам создать чат-бота для сайта, и помочь пользователю в решении распространенных вопросов на сайте, тем самым помочь пользователю, не тратить на это усилий, но сегодня мы хотим показать как сделать такого бота самому, в красивой форме при помощи небольшого плагина convForm-это небольшой плагин jQuery для создания умного, интерактивного чат-бота из обычной html-формы.
Шаг 1. HTML
Плагин требует, чтобы последняя библиотека jQuery была правильно загружена в документ, обратите внимание, чтобы у вас не было подключено одновременно две библиотеки:
<script src="jquery.min.js"></script>
Идем дальше, загрузите в документ файлы javascript и CSS плагина jQuery convForm:
<link rel="stylesheet" href="dist/jquery.convform.css">
<script src="dist/jquery.convform.js"></script>
<script src="dist/jquery.convform.js"></script>
Создавая разметку вы можете определять свои собственные вопросы для каждой формы, используя атрибуты conv -*:
<input type="text" name="name" conv-question="Привет">
Если вы хотите показать конкретные вопросы, на основе ответов пользователя:
<select name="conversation" conv-question="Как ваши дела?">
<option value="yes">Хорошо</option>
<option value="no">Плохо</option>
</select>
<div conv-fork="conversation">
<div conv-case="yes">
<input type="text" conv-question="Как ваши дела" no-answer="true">
</div>
<div conv-case="no">
<select name="thought" conv-question="Спросить почему?">
<option value="yes">Скучно</option>
<option value="no">Голодный</option>
</select>
</div>
</div>
<option value="yes">Хорошо</option>
<option value="no">Плохо</option>
</select>
<div conv-fork="conversation">
<div conv-case="yes">
<input type="text" conv-question="Как ваши дела" no-answer="true">
</div>
<div conv-case="no">
<select name="thought" conv-question="Спросить почему?">
<option value="yes">Скучно</option>
<option value="no">Голодный</option>
</select>
</div>
</div>
На основании это разметки, мы создали целую структуру вопросов и ответов, которые отображены в демонстрации.
Шаг 2. JS
По умолчанию все работу выполняет плагин, который имеет следующие настройки, вы можете их изменить под свое усмотрение:
var convForm = $('.my-conv-form-wrapper').convform({
placeHolder : 'Type Here',
typeInputUi : 'textarea',
timeOutFirstQuestion : 1200,
buttonClassStyle : 'icon2-arrow',
eventList : {
onsubmitForm : function(convState) {
console.log('completed');
convState.form.submit();
return true;
},
onInputSubmit : function(convState, readyCallback) {readyCallback()}
},
formIdName : 'convForm',
inputIdName : 'userInput',
loadSpinnerVisible : '',
buttonText: '▶'
});
placeHolder : 'Type Here',
typeInputUi : 'textarea',
timeOutFirstQuestion : 1200,
buttonClassStyle : 'icon2-arrow',
eventList : {
onsubmitForm : function(convState) {
console.log('completed');
convState.form.submit();
return true;
},
onInputSubmit : function(convState, readyCallback) {readyCallback()}
},
formIdName : 'convForm',
inputIdName : 'userInput',
loadSpinnerVisible : '',
buttonText: '▶'
});
Такой бот станет отличным помощником и поможет проконсультировать пользователя за вас, вы можете построить целую иерархию вопросов, тем самым разгрузив себя от одинаковых вопросов посетителей.
Вот и все. Готово!
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): JoesphJoift
В новости: Akeeba Admin Tools Pro v7.5.2 - безопасность и администрирование сайтов на Jooml ...Hi there, neighboring Californians! Just desired to place a quick note to let you know that my drywall repair venture is properly up and functional. Based precisely here in radiant California, I'm here to support homeowners throughout the coast with all their drywall demands. Whether you're handling with cracks, holes, or water damage, my team and I have the skills and proficiency to get your walls seeming good as new. So if you're in need of some repairs, don't pause to give us a call! Let's work together to keep those California homes in top-notch shape. -
Написал(а): dafaher
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для JoomlaДобрый день, в первую очередь спасибо, что поделились такими ценными расширениями. Я просто хотел сообщить вам, что ссылка не работает, спасибо большое. -
Написал(а): arbuku2
В новости: DJ-Catalog2 v4.1.2 - каталог товаров для Joomladj-catalog2 v5 Когда он будет опубликован? When will it be published? -
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"?