เจาะลึกวิธีใช้ 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

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