Peekobot是一个简单、选择驱动的聊天机器人框架

Peekobot是一个简单、选择驱动的聊天机器人框架

Peekobot

Peekobot is a simple, choice-driven chatbot framework for your website written in less than 100 lines of ES6 vanilla JavaScript (and some CSS).

There is an example bot you can see in the /docs folder.

There is also a CodePen you can tinker with.

Features

Small, simple, zero dependencies (unless you need old browser compatibility)Define your conversation as a simple JavaScript objectChoice/button driven conversationsOptions to link to URLs as well as other parts of the conversation

Browser Compatibility

I use async/await and CSS custom properties, so, broadly speaking, Internet Explorer and Opera Mini are not supported.

You can use Babel or similar to bring IE11 compatibility to the JavaScript.

You can also manually inline the CSS custom properties if you want to.

Usage

To use Peekobot, you need to:

Add Peekobot scripts and styles to your HTMLAdd Peekobot markup to your HTMLDefine your conversation

1. Add Peekobot scripts and styles to your HTML

Download the peekobot.js and peekobot.css files into your project.

You can do this by grabbing the raw code for these files from GitHub or by cloning the project.

Then add the Peekobot scripts and styles to your HTML.

These should go in the head:

Note that you can change the height of the chatbot window here and define an "avatar" URL to be used in the chat by your chatbot. This should be small, square and fit within a circle shape. My CSS displays at 24px square, so a 48px x 48px image should be fine.

These should go at the bottom of your HTML to load the JavaScript:

2. Add Peekobot markup to your HTML body

Add the Peekobot markup to your HTML body where you want the chatbot to appear:

3. Define your conversation

The conversation definition should be placed in a JavaScript variable called chat. I define this in the conversation.js file. You can inline it if you want to.

The chat variable should be an object with numerical property names, and each property is an entry in the conversation.

A conversation entry should have:

A text property that is what the chatbot says at this point in the conversationEither: A next property, which defines the next chat entry by stating a numerical key of the chat object and is used when the chatbot needs to say several things in turn without input from the user ORAn options property that defines the choices a user can take. This is an array of option objects.

An options object should have:

a text property that is the label for the user's choice AND EITHERa next property that defines the next chat entry by stating a numerical key of the chat object and is used when the user selects this option ORa url property that defines a link for the user to be taken to

A simple example chat object is:

const chat = { 1: { text: 'Good morning sir', next: 2 }, 2: { text: 'Would you like tea or coffee with your breakfast?', options: [ { text: 'Tea', next: 3 }, { text: 'Coffee', next: 4 } ] }, 3: { text: 'Splendid - a fine drink if I do say so myself.' }, 4: { text: 'As you wish, sir' }}

Disclaimers

This is my first proper open source project. It's kinda neat, and it works, but it's probably not finished. My main concerns are

Accessibility: I've not really looked at accessibility of this code. It probably needs some workSecurity - it's entirely possible that some script could hijack the bot's script code.

Let me know if you have ideas about how to fix these things by raising an issue.

Peeko-what?

I released this in a bit of a hurry and needed a name. It's a mash-up of:

picobotpeek-a-boo

and I mostly chose it becase all the other "small bot" names, such as picobot, nanobot, etc were taken. It kinda works.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。