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

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

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

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

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

  • บัญชี Google Workspace ที่มีสิทธิ์เข้าถึง Google 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 เมื่อผู้ใช้คลิก 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
    STAR ร้านค้า
    ตั๋ว รถไฟ
    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