HBOT.io
Published in

HBOT.io

เจาะลึกวิธีใช้ Carousel

Finstreet

what is carousel?

ตัวอย่าง Carousel จาก Finstreet ลองไปเล่นได้

Carousel จะมีหน้าตาแบบรูปด้านซ้าย คือเป็นกล่องสี่เหลี่ยมที่สามารถใส่รูป, ข้อความ, ปุ่ม, และสามารถเลื่อนไปมาได้

Carousel เหมาะกับ

  • ทำเป็นเมนูหลักของ Chatbot เพราะมีหลายปุ่มและเลื่อนเลือกได้ เราสามารถแบ่งฟังก์ชั่นของ Bot ได้👉ตัวอย่าง Finstreet
  • เมนูสินค้าสำหรับ Chatbot ขายของ เพราะสามารถเลื่อนเพื่อเลือกสินค้าได้ 👉ตัวอย่าง Generali 365

ส่วนประกอบของ Carousel

ส่วนประกอบของ Carousel

คุณสมบัติทั่วไปของ Carousel

  • ใส่ภาพได้ 2 แบบคือแบบสี่เหลี่ยมผืนผ้าและสี่เหลี่ยมจตุรัส
  • แบบสี่เหลี่ยมผืนผ้ามีอัตราส่วน 1:1.91 หรือ 500 x 260 pixel
การแสดงผล carousel แบบสี่เหลี่ยมผืนผ้า
  • แบบสี่เหลี่ยมจตุรัสมีอัตราส่วน 1:1 หรือ 500 x 500 pixel
การแสดงผล Carousel แบบสี่เหลี่ยมจตุรัส
  • Title สามารถใส่ตัวอักษรได้สูงสุด 80 ตัวอักษร (จำเป็นต้องมี)
  • Subtitle สามารถใส่ตัวอักษรได้สูงสุด 80 ตัวอักษรเช่นกัน (ไม่จำเป็นต้องมี)
  • Carousel 1 อันสามารถใส่ปุ่มได้ 3 ปุ่ม (ไม่จำเป็นต้องมีปุ่ม)
  • ปุ่มสามารถเชื่อมต่อได้ 3 แบบ คือเชื่อมไป Block อื่น, Website, และโทรออก
  • สามารถใส่ Carousel ได้ 10 อันใน 1 แถว
  • Font ที่ใช้ในรูปควรใหญ่กว่า 30 pt เพื่อให้อ่านผ่านมือถือได้ง่าย

วิธีสร้าง Carousel

  1. คลิกเลือก Carousel
เลือก Carousel

จะได้ Card หน้าตาแบบนี้

Card Carousel

2. คลิกรูปกล้องเพื่อใส่รูป

คลิกรูปกล้อง

3. คลิกเลือกรูปจากไฟล์ในเครื่อง

เลือกรูปจากไฟล์ในเครื่อง

4. เลือกการแสดงผลของรูป

เลือกการแสดงผลของรูป
  • เลือก Horizontal เพื่อการแสดงผลแบบสี่เหลี่ยมผืนผ้า
  • เลือก Square เพื่อการแสดงผลแบบสี่เหลี่ยมจตุรัส

5. ใส่ ​Heading(หัวข้อ) ของ Carousel (อันนี้จำเป็นต้องใส่)

6. ใส่ Subtitle(หัวข้อรองหรือคำอธิบาย) ถ้ามี

7. ใส่ปุ่มและตั้งค่าว่าต้องการจะให้ลิ้งค์ไปที่ไหน

ตั้งชื่อและเลือกเป้าหมายเป็น

  • Block: เชื่อมต่อไป block อื่นใน bot
  • URL: ลิ้งไปที่ website
  • Phone: โทรออก ตามเบอร์โทรที่เราใส่ไป

เรียบร้อยแล้วคลิก Save

8. ถ้าต้องการเพิ่ม Carousel ให้กดปุ่ม +

เพิ่ม Carousel

แค่นี้ก็เรียบร้อยแล้ว

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store