peekobot

Пикобот

Peekobot — это простая платформа чат-ботов для вашего веб-сайта, основанная на выборе, написанная менее чем на 100 строках стандартного JavaScript ES6 (и немного CSS).

Пример бота вы можете увидеть в папке /docs .

Существует также CodePen, с которым вы можете повозиться.

Функции

• Небольшие, простые, без каких-либо зависимостей (если вам не нужна совместимость со старым браузером)

• Определите свой разговор как простой объект JavaScript.

• Диалоги, управляемые выбором/кнопками

• Варианты ссылки на URL-адреса, а также на другие части разговора.

Совместимость браузера

Я использую пользовательские свойства async/await и CSS, поэтому, вообще говоря, Internet Explorer и Opera Mini не поддерживаются.

Вы можете использовать Babel или аналогичный вариант, чтобы обеспечить совместимость IE11 с JavaScript.

Вы также можете вручную встроить пользовательские свойства CSS, если хотите.

Использование

Peekobot — это не пакет или библиотека. Вы не можете npm install . Думайте об этом как о стартовом наборе или фреймворке. Идея состоит в том, что вы берете его копию и делаете с ней свое дело.

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

Чтобы использовать Peekobot, вам необходимо:

1. Добавьте скрипты и стили Peekobot в свой HTML

2. Добавьте разметку Peekobot в свой HTML

3. Определите свой разговор

1. Добавьте скрипты и стили Peekobot в свой HTML.

Загрузите файлы peekobot.js и peekobot.css в свой проект.

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

Затем добавьте сценарии и стили Peekobot в свой HTML.

Это должно прийти в head :

    <!-- Пользовательские свойства Peekobot (переменные CSS) — установите их! --><стиль>:корень {
            --peekobot-height: 80vh;
            --peekobot-аватар: URL();
        </style><!-- Стили Peekobot --><link rel="stylesheet" href="peekobot.css">

Обратите внимание, что здесь вы можете изменить высоту окна чат-бота и определить URL-адрес «аватара», который будет использоваться вашим чат-ботом в чате. Он должен быть маленьким, квадратным и вписываться в форму круга. Мой CSS отображает квадрат размером 24 пикселя, поэтому изображение размером 48 x 48 пикселей должно подойти.

Они должны находиться внизу вашего HTML для загрузки JavaScript:

    <script src="conversation.js"></script><script src="peekobot.js"></script>

2. Добавьте разметку Peekobot в тело HTML.

Добавьте разметку Peekobot в тело HTML, где вы хотите, чтобы чат-бот отображался:

    <div id="peekobot-container"><div id="peekobot-inner"><div id="peekobot"></div></div></div>

3. Определите свой разговор

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

Переменная chat должна быть объектом. В объекте чата:

• первое имя/ключ свойства должно быть номером 1

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

• каждое значение свойства является записью в диалоге.

Запись разговора должна содержать:

• text свойство, которое говорит чат-бот в данный момент разговора.

• Или:

• Свойство next , которое определяет следующую запись в чате путем указания числового ключа объекта чата и используется, когда чат-боту необходимо сказать несколько слов по очереди без участия пользователя ИЛИ

• Свойство options , определяющее выбор, который может сделать пользователь. Это массив объектов опций.

Объект параметров должен иметь:

• text свойство, которое является меткой по выбору пользователя И ЛИБО

• свойство next , которое определяет следующую запись чата путем указания ключа свойства объекта чата и используется, когда пользователь выбирает эту опцию ИЛИ

• свойство url , определяющее ссылку, по которой пользователь может перейти

Простой пример объекта чата:

 constchat = {1: {text: 'Доброе утро, сэр',next: 'question1'},question1: {text: 'Вы хотите чай или кофе на завтрак?',options: [{text: 'Чай', next: 'response1'},{text: 'Кофе',next: 'response2'}]},response1: {text: 'Великолепно - отличный напиток, если я скажи это сам.'},response2: {text: 'Как пожелаете, сэр'}}

Убедитесь, что UTF-8

Чтобы использовать эмодзи и другие расширенные символы, рекомендуется убедиться, что вы указываете UTF-8.

Вероятно, вы все равно делаете это, или, возможно, ваш веб-сервер или CMS делает это за вас. Но если нет, то стоит убедиться, что в вашем <head> указан правильный meta :

 <мета-кодировка="utf-8">

Отказ от ответственности

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

• Доступность: я особо не рассматривал доступность этого кода. Наверное, нужно поработать

• Безопасность — вполне возможно, что какой-то скрипт может перехватить код скрипта бота.

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

Пико-что?

Я выпустил это в спешке, и мне нужно было имя. Это смесь:

• пикобот

• подглядывать

и я в основном выбрал его, потому что все остальные имена «маленьких ботов», такие как пикобот, нанобот и т. д., были заняты. Это вроде как работает.

Купи мне кофе

Если вам нравится Peekobot или он вам чем-то помог, не стесняйтесь купить мне кофе.

Авторы/Соавторы

• Йеспер Йоханссон