peekobot

Peekobot

Peekobot adalah kerangka chatbot sederhana berdasarkan pilihan untuk situs web Anda yang ditulis dalam kurang dari 100 baris JavaScript vanilla ES6 (dan beberapa CSS).

Ada contoh bot yang bisa Anda lihat di folder /docs .

Ada juga CodePen yang bisa Anda gunakan.

Fitur

• Kecil, sederhana, tanpa ketergantungan (kecuali Anda memerlukan kompatibilitas browser lama)

• Definisikan percakapan Anda sebagai objek JavaScript sederhana

• Percakapan yang didorong oleh pilihan/tombol

• Opsi untuk menautkan ke URL serta bagian percakapan lainnya

Kompatibilitas Peramban

Saya menggunakan properti khusus async/await dan CSS, jadi, secara umum, Internet Explorer dan Opera Mini tidak didukung.

Anda dapat menggunakan Babel atau sejenisnya untuk menghadirkan kompatibilitas IE11 ke JavaScript.

Anda juga dapat menyejajarkan properti khusus CSS secara manual jika Anda mau.

Penggunaan

Peekobot bukanlah sebuah paket atau perpustakaan. Anda tidak dapat npm install . Anggap saja sebagai starter kit atau kerangka kerja. Idenya adalah Anda mengambil salinannya dan mengerjakannya sendiri.

Jika Anda menggunakannya, tolong kirimkan pesan kepada saya dan tunjukkan apa yang Anda buat! Saya ingin melihat apa yang dilakukan orang lain dengannya. Terima kasih! ?

Untuk menggunakan Peekobot, Anda perlu:

1. Tambahkan skrip dan gaya Peekobot ke HTML Anda

2. Tambahkan markup Peekobot ke HTML Anda

3. Definisikan percakapan Anda

1. Tambahkan skrip dan gaya Peekobot ke HTML Anda

Unduh file peekobot.js dan peekobot.css ke dalam proyek Anda.

Anda dapat melakukan ini dengan mengambil kode mentah untuk file-file ini dari GitHub atau dengan mengkloning proyek.

Kemudian tambahkan skrip dan gaya Peekobot ke HTML Anda.

Ini harus head :

    <!-- Properti khusus Peekobot (variabel CSS) - atur ini! --><gaya>:root {
            --peekobot-tinggi: 80vh;
            --peekobot-avatar: url();
        }</style><!-- Gaya Peekobot --><link rel="stylesheet" href="peekobot.css">

Perhatikan bahwa Anda dapat mengubah ketinggian jendela chatbot di sini dan menentukan URL "avatar" untuk digunakan dalam obrolan oleh chatbot Anda. Ini harus kecil, persegi dan pas dalam bentuk lingkaran. CSS saya ditampilkan pada ukuran 24px persegi, jadi gambar berukuran 48px x 48px seharusnya baik-baik saja.

Ini harus berada di bagian bawah HTML Anda untuk memuat JavaScript:

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

2. Tambahkan markup Peekobot ke badan HTML Anda

Tambahkan markup Peekobot ke badan HTML tempat Anda ingin chatbot muncul:

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

3. Definisikan percakapan Anda

Definisi percakapan harus ditempatkan dalam variabel JavaScript yang disebut chat . Saya mendefinisikan ini di file conversation.js . Anda dapat menyejajarkannya jika Anda mau.

Variabel chat harus berupa objek. Di objek obrolan:

• nama/kunci properti pertama harus berupa angka 1

• nama properti selanjutnya dapat berupa angka atau string - string memungkinkan Anda mengelompokkan bagian percakapan Anda

• setiap nilai properti adalah entri dalam percakapan.

Entri percakapan harus memiliki:

• Properti text itulah yang dikatakan chatbot saat ini dalam percakapan

• Salah satu:

• Properti next , yang mendefinisikan entri obrolan berikutnya dengan menyatakan kunci numerik objek obrolan dan digunakan ketika chatbot perlu mengatakan beberapa hal secara bergantian tanpa masukan dari pengguna ATAU

• Properti options yang menentukan pilihan yang dapat diambil pengguna. Ini adalah array objek pilihan.

Objek opsi harus memiliki:

• properti text yang merupakan label untuk pilihan pengguna DAN BAIK

• properti next yang menentukan entri obrolan berikutnya dengan menyatakan kunci properti objek obrolan dan digunakan ketika pengguna memilih opsi ini ATAU

• properti url yang menentukan tautan untuk mengarahkan pengguna

Contoh sederhana objek obrolan adalah:

 const chat = {1: {text: 'Selamat pagi Pak',berikutnya: 'question1'},question1: {text: 'Apakah Anda ingin teh atau kopi dengan sarapan Anda?',options: [{text: 'Teh', berikutnya: 'response1'},{teks: 'Kopi',berikutnya: 'response2'}]},response1: {teks: 'Enak - minuman yang enak kalau menurutku begitu saya sendiri.'},response2: {text: 'Terserah pak'}}

Pastikan utf-8

Untuk menggunakan emoji dan karakter tambahan lainnya, sebaiknya pastikan Anda menentukan UTF-8.

Anda mungkin tetap melakukan ini, atau mungkin server web atau CMS Anda yang melakukan ini untuk Anda. Namun jika tidak, ada baiknya memastikan Anda memiliki tag meta yang benar di <head> :

 <meta charset="utf-8">

Penafian

Ini adalah proyek open source pertama saya. Ini agak rapi, dan berhasil, tapi mungkin belum selesai. Kekhawatiran utama saya adalah

• Aksesibilitas: Saya belum terlalu memperhatikan aksesibilitas kode ini. Mungkin perlu beberapa perbaikan

• Keamanan - sangat mungkin bahwa beberapa skrip dapat membajak kode skrip bot.

Beri tahu saya jika Anda punya ide tentang cara memperbaiki masalah ini dengan mengangkat suatu masalah.

Peeko-apa?

Saya merilis ini dengan tergesa-gesa dan membutuhkan nama. Ini adalah gabungan dari:

• picobot

• ciluk ba

dan saya kebanyakan memilihnya karena semua nama "bot kecil" lainnya, seperti picobot, nanobot, dll telah digunakan. Ini agak berhasil.

Belikan aku kopi

Jika Anda menyukai Peekobot, atau jika itu membantu Anda, jangan ragu untuk membelikan saya kopi.

Kredit/Kontributor

• Jesper Johansson