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

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

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

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

สิ่งที่ต้องดำเนินการก่อน

  • บัญชี 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 ภาพในตารางกริดที่มีการครอบตัดภาพใดภาพหนึ่ง

    ครอบตัดรูปภาพ

    คุณปรับรูปร่างของรูปภาพได้โดยใช้ 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