peekobot ดาวน์โหลด - peekobot ดาวน์โหลดซอร์สโค้ด

peekobot

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

พีโคบอท

Peekobot เป็นเฟรมเวิร์กแชทบอทที่เรียบง่ายและขับเคลื่อนด้วยตัวเลือกสำหรับเว็บไซต์ของคุณที่เขียนด้วย JavaScript Vanilla JavaScript น้อยกว่า 100 บรรทัด (และ CSS บางตัว)

มีตัวอย่างบอทที่คุณสามารถดูได้ในโฟลเดอร์ /docs

นอกจากนี้ยังมี CodePen ที่คุณสามารถปรับแต่งได้

คุณสมบัติ

ขนาดเล็ก เรียบง่าย ไม่มีการพึ่งพา (ยกเว้นกรณีที่คุณต้องการความเข้ากันได้ของเบราว์เซอร์เก่า)
กำหนดการสนทนาของคุณเป็นวัตถุ JavaScript แบบง่าย
การสนทนาที่ขับเคลื่อนด้วยตัวเลือก/ปุ่ม
ตัวเลือกในการลิงก์ไปยัง URL รวมถึงส่วนอื่นๆ ของการสนทนา

ความเข้ากันได้ของเบราว์เซอร์

ฉันใช้คุณสมบัติแบบกำหนดเอง async/await และ CSS ดังนั้น โดยทั่วไปแล้ว Internet Explorer และ Opera Mini ไม่ได้รับการสนับสนุน

คุณสามารถใช้ Babel หรือคล้ายกันเพื่อนำความเข้ากันได้ของ IE11 มาสู่ JavaScript

คุณยังสามารถอินไลน์คุณสมบัติที่กำหนดเองของ CSS ได้ด้วยตนเองหากต้องการ

การใช้งาน

Peekobot ไม่ใช่แพ็คเกจหรือไลบรารี คุณไม่สามารถ npm install ได้ คิดว่ามันเป็นชุดเริ่มต้นหรือกรอบงาน แนวคิดก็คือคุณคัดลอกมันและดำเนินการของคุณเอง

หากคุณใช้มัน โปรดส่งข้อความหาฉันและแสดงให้ฉันเห็นว่าคุณทำอะไร! ฉันชอบที่จะดูว่าคนอื่นกำลังทำอะไรกับมัน ขอบคุณ! -

หากต้องการใช้ Peekobot คุณต้อง:

เพิ่มสคริปต์และสไตล์ Peekobot ให้กับ HTML ของคุณ
เพิ่มมาร์กอัป Peekobot ลงใน HTML ของคุณ
กำหนดบทสนทนาของคุณ

1. เพิ่มสคริปต์และสไตล์ Peekobot ให้กับ HTML ของคุณ

ดาวน์โหลดไฟล์ peekobot.js และ peekobot.css ลงในโปรเจ็กต์ของคุณ

คุณสามารถทำได้โดยการดึงโค้ดดิบสำหรับไฟล์เหล่านี้จาก GitHub หรือโดยการโคลนโปรเจ็กต์

จากนั้นเพิ่มสคริปต์และสไตล์ Peekobot ให้กับ HTML ของคุณ

สิ่งเหล่านี้ควรอยู่ใน head :

    <!-- คุณสมบัติที่กำหนดเองของ Peekobot (ตัวแปร CSS) - ตั้งค่าเหล่านี้! --><สไตล์>:ราก {
            --peekobot-ความสูง: 80vh;
            --peekobot-อวตาร: url();
        }</style><!-- สไตล์ Peekobot --><link rel="stylesheet" href="peekobot.css">

โปรดทราบว่าคุณสามารถเปลี่ยนความสูงของหน้าต่างแชทบอทได้ที่นี่ และกำหนด URL "อวาตาร์" ที่จะใช้ในการแชทโดยแชทบอทของคุณ ซึ่งควรมีขนาดเล็ก เป็นรูปสี่เหลี่ยมจัตุรัส และอยู่ในรูปวงกลมพอดี CSS ของฉันแสดงเป็นสี่เหลี่ยมจัตุรัสขนาด 24px ดังนั้นรูปภาพขนาด 48px x 48px จึงน่าจะใช้ได้

สิ่งเหล่านี้ควรไปที่ด้านล่างของ 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 ที่กำหนดลิงก์สำหรับผู้ใช้ที่จะนำไป

ตัวอย่างออบเจ็กต์การสนทนาง่ายๆ คือ:

 const chat = {1: {text: 'อรุณสวัสดิ์ครับ',ถัดไป: 'question1'},question1: {text: 'คุณต้องการชาหรือกาแฟเป็นอาหารเช้าไหม',ตัวเลือก: [{text: 'ชา', ถัดไป: 'response1'},{text: 'Coffee',ถัดไป: 'response2'}]},response1: {text: 'Splendid - เครื่องดื่มชั้นดีถ้าฉัน ฉันก็พูดแบบนั้นเหมือนกัน'},response2: {text: 'ตามที่คุณต้องการครับ'}}

รับรองว่าเป็น utf-8

หากต้องการใช้อิโมจิและอักขระขยายอื่นๆ เป็นความคิดที่ดีที่จะให้แน่ใจว่าคุณระบุ UTF-8

คุณอาจจะทำเช่นนี้อยู่แล้ว หรือบางทีเว็บเซิร์ฟเวอร์หรือ CMS ของคุณกำลังทำสิ่งนี้เพื่อคุณ แต่ถ้าไม่ ก็ควรตรวจสอบให้แน่ใจว่าคุณมี meta แท็กที่ถูกต้องใน <head> :