หน้านี้อธิบายวิธีเพิ่มข้อความและรูปภาพลงในการ์ดหรือข้อความโต้ตอบ และวิธีแก้ไขลักษณะที่ข้อความและรูปภาพปรากฏในข้อความ
ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้
เปิดเครื่องมือสร้างการ์ดข้อกำหนดเบื้องต้น
เพิ่มภาพ
วิดเจ็ตวิดเจ็ต Image
แสดงรูปภาพ PNG หรือ JPG ที่โฮสต์อยู่บน HTTPS URL
ความกว้างของรูปภาพที่แสดงจะใช้เต็มความกว้างทั้งหมดของการ์ดที่แสดง และจะมีการปรับความสูงเพื่อรักษาอัตราส่วนของรูปภาพ วิดเจ็ต Image
รองรับการดำเนินการ onclick
ที่เกิดขึ้นเมื่อผู้ใช้คลิกรูปภาพ ตัวอย่างการดำเนินการของ onclick
ได้แก่
- เปิดไฮเปอร์ลิงก์ด้วย
OpenLink
เช่น ไฮเปอร์ลิงก์ไปยังเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chathttps://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
แสดงถึงไอคอนในตัวหรือไอคอนที่กำหนดเอง คุณใช้ Icon
ในข้อความการ์ดและกล่องโต้ตอบได้ด้วยวิธีต่อไปนี้
- แสดงไอคอนแบบสแตนด์อโลน
- แสดงไอคอนด้านหน้าข้อความที่เกี่ยวข้อง ซึ่งเป็นส่วนหนึ่งของวิดเจ็ต
DecoratedText
- แสดงไอคอนเป็นปุ่มแบบอินเทอร์แอกทีฟเป็นส่วนหนึ่งของวิดเจ็ต
ButtonList
การ์ดต่อไปนี้ประกอบด้วยคอมโพเนนต์ Icon
ที่มีไอคอนในตัว
ตารางต่อไปนี้แสดงไอคอนในตัวที่ใช้ได้สำหรับข้อความการ์ด
เครื่องบิน | BOOKMARK | ||
BUS | รถยนต์ | ||
นาฬิกา | CONFIRMATION_NUMBER_ICON | ||
คำอธิบาย | ดอลลาร์ | ||
อีเมล | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
โรงแรม | HOTEL_ROOM_TYPE | ||
เชิญ | MAP_PIN | ||
การเป็นสมาชิก | MULTIPLE_PEOPLE | ||
บุคคล | โทรศัพท์ | ||
RESTAURANT_ICON | SHOPPING_CART | ||
ดาว | ร้านค้า | ||
ตั๋ว | 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
แต่ละรายการจะแสดงเป็นย่อหน้าใหม่ ซึ่งอาจคล้ายกับแท็ก HTML <p>
ต่อไปนี้เป็นการ์ดที่ประกอบด้วยวิดเจ็ต 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