หน้านี้อธิบายวิธีเพิ่มข้อความและรูปภาพลงในการ์ดหรือข้อความโต้ตอบ และเพื่อแก้ไขลักษณะการแสดงข้อความและรูปภาพภายในข้อความ
ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด 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 ภาพในตารางกริดที่มีการครอบตัดภาพใดภาพหนึ่ง
ครอบตัดรูปภาพ
คุณปรับรูปร่างของรูปภาพได้โดยใช้ cropStyle
ภาพหนึ่งมีรูปร่างต่างๆ ดังนี้
- ใช้
SQUARE
เพื่อครอบตัดสี่เหลี่ยมจัตุรัส - ใช้
CIRCLE
เพื่อครอบตัดวงกลม - ใช้
RECTANGLE_CUSTOM
เพื่อครอบตัดรูปสี่เหลี่ยมผืนผ้าด้วยสัดส่วนภาพที่กำหนดเอง ตัวอย่างเช่น คุณสามารถใช้RECTANGLE_4_3
เพื่อครอบตัดรูปสี่เหลี่ยมผืนผ้า ที่มีสัดส่วนภาพ 4:3
ตัวอย่างต่อไปนี้แสดง 5 รูปภาพในตารางกริดที่มีการใส่ cropStyle
ที่แตกต่างกันกับแต่ละรูปภาพ
เพิ่มไอคอน
วิดเจ็ต Icon
จะแสดงถึงไอคอนในตัวหรือไอคอนที่กำหนดเอง คุณใช้ Icon
ในข้อความการ์ดและกล่องโต้ตอบได้ด้วยวิธีต่อไปนี้
- แสดงไอคอนแบบสแตนด์อโลน
- แสดงไอคอนด้านหน้าข้อความที่เกี่ยวข้องโดยเป็นส่วนหนึ่งของวิดเจ็ต
DecoratedText
- แสดงไอคอนเป็นปุ่มอินเทอร์แอกทีฟเป็นส่วนหนึ่งของวิดเจ็ต
ButtonList
ต่อไปนี้คือการ์ดที่ประกอบด้วยคอมโพเนนต์ Icon
ซึ่งมีไอคอนในตัว
ตารางต่อไปนี้แสดงไอคอนในตัวที่พร้อมใช้งานสำหรับข้อความการ์ด
เครื่องบิน | BOOKMARK | ||
BUS | CAR | ||
นาฬิกา | 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