เจาะลึกวิธีใช้ Carousel
Feb 9, 2019 · 2 min read
what is carousel?
Carousel จะมีหน้าตาแบบรูปด้านซ้าย คือเป็นกล่องสี่เหลี่ยมที่สามารถใส่รูป, ข้อความ, ปุ่ม, และสามารถเลื่อนไปมาได้
Carousel เหมาะกับ
- ทำเป็นเมนูหลักของ Chatbot เพราะมีหลายปุ่มและเลื่อนเลือกได้ เราสามารถแบ่งฟังก์ชั่นของ Bot ได้👉ตัวอย่าง Finstreet
- เมนูสินค้าสำหรับ Chatbot ขายของ เพราะสามารถเลื่อนเพื่อเลือกสินค้าได้ 👉ตัวอย่าง Generali 365
ส่วนประกอบของ Carousel
คุณสมบัติทั่วไปของ Carousel
- ใส่ภาพได้ 2 แบบคือแบบสี่เหลี่ยมผืนผ้าและสี่เหลี่ยมจตุรัส
- แบบสี่เหลี่ยมผืนผ้ามีอัตราส่วน 1:1.91 หรือ 500 x 260 pixel
- แบบสี่เหลี่ยมจตุรัสมีอัตราส่วน 1:1 หรือ 500 x 500 pixel
- Title สามารถใส่ตัวอักษรได้สูงสุด 80 ตัวอักษร (จำเป็นต้องมี)
- Subtitle สามารถใส่ตัวอักษรได้สูงสุด 80 ตัวอักษรเช่นกัน (ไม่จำเป็นต้องมี)
- Carousel 1 อันสามารถใส่ปุ่มได้ 3 ปุ่ม (ไม่จำเป็นต้องมีปุ่ม)
- ปุ่มสามารถเชื่อมต่อได้ 3 แบบ คือเชื่อมไป Block อื่น, Website, และโทรออก
- สามารถใส่ Carousel ได้ 10 อันใน 1 แถว
- Font ที่ใช้ในรูปควรใหญ่กว่า 30 pt เพื่อให้อ่านผ่านมือถือได้ง่าย
วิธีสร้าง Carousel
- คลิกเลือก Carousel
จะได้ Card หน้าตาแบบนี้
2. คลิกรูปกล้องเพื่อใส่รูป
3. คลิกเลือกรูปจากไฟล์ในเครื่อง
4. เลือกการแสดงผลของรูป
- เลือก Horizontal เพื่อการแสดงผลแบบสี่เหลี่ยมผืนผ้า
- เลือก Square เพื่อการแสดงผลแบบสี่เหลี่ยมจตุรัส
5. ใส่ Heading(หัวข้อ) ของ Carousel (อันนี้จำเป็นต้องใส่)
6. ใส่ Subtitle(หัวข้อรองหรือคำอธิบาย) ถ้ามี
7. ใส่ปุ่มและตั้งค่าว่าต้องการจะให้ลิ้งค์ไปที่ไหน
ตั้งชื่อและเลือกเป้าหมายเป็น
- Block: เชื่อมต่อไป block อื่นใน bot
- URL: ลิ้งไปที่ website
- Phone: โทรออก ตามเบอร์โทรที่เราใส่ไป
เรียบร้อยแล้วคลิก Save
8. ถ้าต้องการเพิ่ม Carousel ให้กดปุ่ม +
แค่นี้ก็เรียบร้อยแล้ว
