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

หน้านี้อธิบายวิธีเพิ่มข้อความและรูปภาพลงในการ์ดหรือข้อความโต้ตอบ และวิธีแก้ไขลักษณะที่ข้อความและรูปภาพปรากฏในข้อความ

ออกแบบและแสดงตัวอย่างการ์ดด้วยเครื่องมือสร้างการ์ด

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

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

  • บัญชี Google Workspace ที่มีสิทธิ์เข้าถึง Google Chat
  • แอป Chat ที่เผยแพร่แล้ว หากต้องการสร้าง แอป Chat ให้ทำตาม quickstartนี้

    • เพิ่มภาพ

    วิดเจ็ตวิดเจ็ต 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 เป็นรูปภาพที่มีการจำกัดการจัดรูปแบบ วิดเจ็ต 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