เพิ่มข้อความและรูปภาพลงในการ์ด

หน้านี้จะอธิบายวิธีเพิ่มและจัดรูปแบบข้อความและรูปภาพลงในการ์ด

ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างการ์ดได้ที่หัวข้อสร้างการ์ดสำหรับแอป Google Chat

ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและดูตัวอย่างการรับส่งข้อความและอินเทอร์เฟซผู้ใช้สำหรับแอปใน Chat ดังนี้

เปิดเครื่องมือสร้างการ์ด

ข้อกำหนดเบื้องต้น

แอป Google Chat ที่กำหนดค่าให้รับและตอบสนองต่อการโต้ตอบของผู้ใช้ หากต้องการสร้างแอป Chat แบบอินเทอร์แอกทีฟ ให้ทำตามคู่มือเริ่มใช้งานฉบับย่อข้อใดข้อหนึ่งต่อไปนี้โดยอิงตามสถาปัตยกรรมแอปที่คุณต้องการใช้

เพิ่มรูปภาพหรือไอคอน

ส่วนนี้จะอธิบายวิธีเพิ่มองค์ประกอบภาพลงในการ์ด เช่น รูปภาพ คอมโพเนนต์รูปภาพ และไอคอน

เพิ่มรูปภาพ

วิดเจ็ต Image จะแสดงรูปภาพ PNG หรือ JPG ที่โฮสต์ใน HTTPS URL ความกว้างของรูปภาพที่แสดงจะเต็มความกว้างของการ์ดที่แสดง และความสูงจะปรับตามสัดส่วนภาพของรูปภาพ วิดเจ็ต Image รองรับการดำเนินการ onclick ที่เกิดขึ้นเมื่อผู้ใช้คลิกรูปภาพ ตัวอย่างการดำเนินการของ onclick ได้แก่

  • เปิดไฮเปอร์ลิงก์ด้วย OpenLink เช่น ไฮเปอร์ลิงก์ไปยังเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chat https://developers.google.com/chat
  • เรียกใช้การดำเนินการที่เรียกใช้ฟังก์ชันที่กำหนดเอง เช่น การเรียก API

วิดเจ็ต Image มีข้อจำกัดต่อไปนี้

  • รองรับเฉพาะรูปภาพ PNG และ JPG เท่านั้น
  • URL ของโฮสต์ต้องเป็น HTTPS
  • เราขอแนะนำให้ใช้รูปภาพขนาดไม่เกิน 2 MB เพื่อให้การ์ดมีประสิทธิภาพ

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต Image โดยจะแสดงรูปภาพหน้า Landing Page ของเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chat เมื่อผู้ใช้คลิกรูปภาพ เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chat จะเปิดขึ้นในแท็บใหม่

เพิ่มคอมโพเนนต์รูปภาพ

วิดเจ็ต Image เป็นรูปภาพที่มีการจัดรูปแบบที่จำกัด วิดเจ็ต ImageComponent ช่วยให้คุณใช้cropStyleและborderStyleกับรูปภาพได้

ตัวอย่างต่อไปนี้แสดงรูปภาพ 2 รูปในตารางกริด โดยที่รูปภาพหนึ่งถูกครอบตัด

คุณปรับรูปร่างของคอมโพเนนต์รูปภาพได้โดยใช้ cropStyle คุณใช้รูปร่างกับรูปภาพได้หลายแบบ ดังนี้

  • ใช้ SQUARE เพื่อครอบตัดเป็นสี่เหลี่ยมจัตุรัส
  • ใช้ CIRCLE เพื่อใช้การครอบตัดแบบวงกลม
  • ใช้ RECTANGLE_CUSTOM เพื่อครอบตัดเป็นสี่เหลี่ยมผืนผ้าโดยมีสัดส่วนภาพที่กำหนดเอง เช่น คุณสามารถใช้ RECTANGLE_4_3 เพื่อใช้การครอบตัดสี่เหลี่ยมผืนผ้าที่มีสัดส่วนภาพ 4:3

ตัวอย่างต่อไปนี้แสดงรูปภาพ 5 รูปในตารางกริดที่มีการใช้ cropStyle ที่แตกต่างกันกับรูปภาพแต่ละรูป

เพิ่มไอคอน

วิดเจ็ต Icon แสดงไอคอนในตัวหรือไอคอนที่กำหนดเอง คุณสามารถเพิ่มไอคอนลงในการ์ดเพื่อทำสิ่งต่อไปนี้ได้

  • แสดงไอคอนแบบสแตนด์อโลน
  • แสดงไอคอนด้านหน้าข้อความที่เกี่ยวข้อง โดยเป็นส่วนหนึ่งของวิดเจ็ต DecoratedText
  • แสดงไอคอนเป็นปุ่มแบบอินเทอร์แอกทีฟ ซึ่งเป็นส่วนหนึ่งของวิดเจ็ต ButtonList

ต่อไปนี้คือการ์ดที่ประกอบด้วยคอมโพเนนต์ Icon ที่มีไอคอนในตัว

ตารางต่อไปนี้แสดงรายการไอคอนในตัวที่ใช้ได้กับข้อความการ์ด

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON โทรศัพท์
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

เพิ่มข้อความลงในการ์ด

ส่วนนี้จะอธิบายวิธีเพิ่มและจัดรูปแบบข้อความในการ์ด

เพิ่มย่อหน้าของข้อความที่จัดรูปแบบแล้ว

วิดเจ็ต TextParagraph จะแสดงย่อหน้าข้อความที่มีการจัดรูปแบบ HTML (ไม่บังคับ) เมื่อตั้งค่าเนื้อหาข้อความของวิดเจ็ตเหล่านี้ ให้ใส่แท็ก HTML ที่เกี่ยวข้อง ดูข้อมูลเพิ่มเติมเกี่ยวกับแท็ก HTML ที่รองรับได้ที่หัวข้อจัดรูปแบบข้อความที่ปรากฏในการ์ด

ตัวอย่างเช่น การจัดรูปแบบต่อไปนี้ใช้ได้กับข้อความย่อหน้า

  • แสดงข้อความตัวหนา ขีดเส้นใต้ หรือตัวเอียงด้วยแท็ก HTML <b>, <u>, <i>
  • ลิงก์ไปยังเว็บไซต์ด้วย HTML <a href="https://www.google.com">hyperlinks</a>
  • เพิ่มสีสันด้วย HTML <font color="#ea9999">font tags</font>

วิดเจ็ต TextParagraph แต่ละรายการจะแสดงผลเป็นย่อหน้าใหม่ และอาจถือว่าคล้ายกับแท็ก <p> ของ HTML

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต TextParagraph 2 รายการที่ใช้เพื่อแสดง 2 ย่อหน้าที่มีการจัดรูปแบบ HTML แบบง่าย

เพิ่มย่อหน้าข้อความที่ยุบได้

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

ข้อความที่แสดงพร้อมองค์ประกอบตกแต่ง

วิดเจ็ต DecoratedText จะแสดงข้อความพร้อมเลย์เอาต์และความสามารถที่ไม่บังคับ เช่น

  • แสดง icon หน้าข้อความที่มี startIcon
  • แสดงชื่อก่อนข้อความด้วย topLabel
  • เพิ่มปุ่มที่คลิกได้ด้วย button หรือปุ่มเปิด/ปิดที่สลับได้ด้วย switchControl

ใช้วิดเจ็ต DecoratedText เมื่อต้องการนำเสนอข้อมูลในรูปแบบที่เข้าใจง่ายและโต้ตอบได้ วิดเจ็ตนี้เหมาะอย่างยิ่งสำหรับกรณีการใช้งาน เช่น บัตรรายชื่อติดต่อ การอัปเดตสถานะการสั่งซื้อ และการแจ้งเตือนคำขอแจ้งปัญหา

วิดเจ็ต DecoratedText รองรับการจัดรูปแบบ HTML ข้อความธรรมดา เมื่อตั้งค่าเนื้อหาข้อความของวิดเจ็ตเหล่านี้ ให้ใส่แท็ก HTML ที่เกี่ยวข้อง ดูข้อมูลเพิ่มเติมเกี่ยวกับแท็ก HTML ที่รองรับได้ที่หัวข้อการจัดรูปแบบข้อความในการ์ด

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต DecoratedText ที่ใช้แสดงข้อมูลติดต่อ เช่น อีเมล สถานะออนไลน์ หมายเลขโทรศัพท์ และเว็บไซต์

แก้ปัญหา

เมื่อแอป Google Chat หรือการ์ดแสดงข้อผิดพลาด อินเทอร์เฟซของ Chat จะแสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ดำเนินการตามคำขอของคุณไม่ได้" บางครั้ง UI ของ Chat ไม่แสดงข้อความแสดงข้อผิดพลาด แต่แอปใน Chat หรือการ์ดแสดงผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความการ์ดอาจไม่ปรากฏ

แม้ว่าข้อความแสดงข้อผิดพลาดอาจไม่แสดงใน UI ของ Chat แต่ข้อความแสดงข้อผิดพลาดที่สื่อความหมายและข้อมูลบันทึกจะพร้อมใช้งานเพื่อช่วยคุณแก้ไขข้อผิดพลาดเมื่อเปิดการบันทึกข้อผิดพลาดสำหรับแอปใน Chat หากต้องการความช่วยเหลือในการดู แก้ไขข้อบกพร่อง และแก้ไขข้อผิดพลาด โปรดดูหัวข้อแก้ปัญหาและแก้ไขข้อผิดพลาดของ Google Chat