หน้านี้จะอธิบายวิธีเพิ่มข้อความและรูปภาพลงในการ์ดหรือข้อความโต้ตอบ และ เพื่อแก้ไขลักษณะการแสดงข้อความและรูปภาพในข้อความ
ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้
เปิดเครื่องมือสร้างการ์ดข้อกำหนดเบื้องต้น
แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟ ทำตามการเริ่มต้นใช้งานอย่างรวดเร็วต่อไปนี้ เกี่ยวกับสถาปัตยกรรมแอปที่คุณต้องการใช้
- บริการ HTTP กับ Google Cloud Functions
- สคริปต์ Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
เพิ่มรูปภาพ
วิดเจ็ต 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 เมื่อผู้ใช้คลิก
image, เอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Google Chat จะเปิดขึ้นในแท็บใหม่
เพิ่มคอมโพเนนต์รูปภาพ
วิดเจ็ต Image
เป็นรูปภาพที่มีการจัดรูปแบบที่จำกัด CANNOT TRANSLATE
วิดเจ็ต imageCompent
ช่วยให้คุณใช้ cropStyle
และ borderStyle
กับรูปภาพได้
ตัวอย่างต่อไปนี้แสดง 2 ภาพในตารางกริด โดยหนึ่งในภาพคือ ครอบตัดแล้ว:
ครอบตัดรูปภาพ
คุณสามารถปรับรูปร่างของรูปภาพได้โดยใช้
cropStyle
ภาพหนึ่งมีรูปร่างต่างๆ ดังนี้
- ใช้
SQUARE
เพื่อครอบตัดสี่เหลี่ยมจัตุรัส - ใช้
CIRCLE
เพื่อครอบตัดวงกลม - ใช้
RECTANGLE_CUSTOM
เพื่อครอบตัดรูปสี่เหลี่ยมผืนผ้าด้วยแง่มุมที่กำหนดเอง เช่น คุณสามารถใช้RECTANGLE_4_3
เพื่อครอบตัดรูปสี่เหลี่ยมผืนผ้า ในอัตราส่วน 4:3
ตัวอย่างต่อไปนี้แสดงภาพ 5 ภาพในตารางกริดที่มี cropStyle
ที่แตกต่างกัน
ใช้กับรูปภาพแต่ละรูป ดังนี้
เพิ่มไอคอน
วิดเจ็ต Icon
แสดงถึง
ในตัว
หรือ
กำหนดเอง
ไอคอน คุณใช้ Icon
ได้ใน
ข้อความในการ์ด
และ
กล่องโต้ตอบ
ในลักษณะต่อไปนี้
- แสดงไอคอนแบบสแตนด์อโลน
- แสดงไอคอนด้านหน้าข้อความที่เกี่ยวข้อง เป็นส่วนหนึ่งของ
วิดเจ็ต
DecoratedText
- แสดงไอคอนเป็นปุ่มอินเทอร์แอกทีฟ เป็นส่วนหนึ่งของ
วิดเจ็ต
ButtonList
ต่อไปนี้คือการ์ดที่ประกอบด้วยคอมโพเนนต์ Icon
ซึ่งมีไอคอนในตัว
ตารางต่อไปนี้แสดงไอคอนในตัวที่พร้อมใช้งานสำหรับข้อความการ์ด
เครื่องบิน | บุ๊กมาร์ก | ||
รถประจำทาง | CAR | ||
นาฬิกา | CONFIRMATION_NUMBER_ICON | ||
คำอธิบาย | ดอลลาร์ | ||
อีเมล | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
โรงแรม | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
การเป็นสมาชิก | MULTIPLE_PEOPLE | ||
บุคคล | โทรศัพท์ | ||
RESTAURANT_ICON | SHOPPING_CART | ||
ดาว | ร้านค้า | ||
ตั๋ว | รถไฟ | ||
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 วิดเจ็ตที่ใช้เพื่อ
แสดงย่อหน้าสองย่อหน้าด้วยการจัดรูปแบบ HTML แบบง่าย:
เพิ่มย่อหน้าข้อความที่ยุบได้
ย่อหน้าข้อความแบบยุบได้ช่วยให้ผู้ใช้ดูข้อมูลเพิ่มเติมได้ตามความต้องการ วิดเจ็ตนี้เหมาะอย่างยิ่งสำหรับการนำเสนอเนื้อหายาวๆ หรือให้รายละเอียดเพิ่มเติม สามารถสำรวจได้เมื่อเลือกแล้ว ซึ่งเป็นการสร้างผู้ใช้แบบไดนามิกและอินเทอร์แอกทีฟ ประสบการณ์การใช้งาน
ข้อความที่แสดงพร้อมองค์ประกอบตกแต่ง
วิดเจ็ต DecoratedText
แสดงข้อความด้วยรูปแบบและความสามารถที่ไม่บังคับ เช่น
- แสดง
icon
ด้านหน้าข้อความด้วยstartIcon
- แสดงชื่อหน้าข้อความด้วย
topLabel
- เพิ่มปุ่มที่คลิกได้ด้วย
button
หรือเปิดปุ่มสลับได้ด้วยswitchControl
ใช้วิดเจ็ต DecoratedText
เมื่อต้องการนำเสนอข้อมูลใน
ง่ายต่อการใช้งานและมีการโต้ตอบ วิดเจ็ตนี้เหมาะอย่างยิ่งสำหรับการใช้งานในกรณีต่างๆ เช่น
การ์ดติดต่อ การอัปเดตสถานะการสั่งซื้อ และการแจ้งเตือนตั๋วงาน
วิดเจ็ต DecoratedText
รองรับการจัดรูปแบบข้อความ HTML แบบง่าย เมื่อตั้งค่า
เนื้อหาข้อความของวิดเจ็ตเหล่านี้ ก็แค่ใส่แท็ก HTML ที่เกี่ยวข้องไว้ด้วย สำหรับ
ข้อมูลเพิ่มเติมเกี่ยวกับแท็ก HTML ที่รองรับ โปรดดู
การจัดรูปแบบข้อความในการ์ด
ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต DecoratedText
ที่ใช้แสดง
ข้อมูลติดต่อ เช่น อีเมล สถานะออนไลน์ หมายเลขโทรศัพท์ และ
เว็บไซต์:
แก้ปัญหา
เมื่อแอป Google Chat หรือ card จะแสดงผลข้อผิดพลาด อินเทอร์เฟซ Chat แสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ไม่สามารถดำเนินการตามคำขอของคุณ" บางครั้ง UI ของ Chat ไม่แสดงข้อความแสดงข้อผิดพลาดใดๆ แต่แอป Chat หรือ ทำให้เกิดผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความในการ์ดอาจ ปรากฏขึ้น
แม้ว่าข้อความแสดงข้อผิดพลาดอาจไม่แสดงใน UI ของแชท มีข้อความแสดงข้อผิดพลาดและข้อมูลบันทึกที่สื่อความหมายเพื่อช่วยคุณแก้ไขข้อผิดพลาด เมื่อมีการเปิดข้อผิดพลาดในการบันทึกสำหรับแอป Chat หากต้องการความช่วยเหลือในการดู การแก้ไขข้อบกพร่องและการแก้ไขข้อผิดพลาด โปรดดู แก้ปัญหาข้อผิดพลาดของ Google Chat
หัวข้อที่เกี่ยวข้อง
- ดูตัวอย่างแอปใน Chat ที่ใช้การ์ดและกล่องโต้ตอบ
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText