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

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

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

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

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

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

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ หากต้องการสร้างแอป Chat แบบอินเทอร์แอกทีฟ ให้ทําตามการเริ่มต้นใช้งานด่วนอย่างใดอย่างหนึ่งต่อไปนี้ตามสถาปัตยกรรมแอปที่คุณต้องการใช้

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

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

เพิ่มรูปภาพ

วิดเจ็ต Image แสดงรูปภาพ PNG หรือ JPG ที่โฮสต์ใน URL ของ HTTPS ความกว้างของรูปภาพที่แสดงจะเต็มความกว้างทั้งหมดของการ์ดที่แสดง และความสูงจะปรับเพื่อรักษาสัดส่วนภาพของรูปภาพ วิดเจ็ต 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 คือรูปภาพที่มีการจัดสไตล์แบบจำกัด วิดเจ็ตimageCompentช่วยให้คุณใช้ cropStyle และ borderStyle กับรูปภาพได้

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

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

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

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

เพิ่มไอคอน

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

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

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

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

AIRPLANE BOOKMARK
BUS CAR
นาฬิกา CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
อีเมล EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
เชิญ MAP_PIN
การเป็นสมาชิก MULTIPLE_PEOPLE
บุคคล PHONE
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