Thêm văn bản và hình ảnh vào thẻ

Trang này giải thích cách thêm và định dạng văn bản cũng như hình ảnh cho thẻ.

Để tìm hiểu thêm về cách tạo thẻ, hãy xem Tạo thẻ cho ứng dụng Google Chat.

Sử dụng Trình tạo thẻ để thiết kế và xem trước thông báo trên thẻ JSON cho các ứng dụng trong Chat:

Mở Trình tạo thẻ

Điều kiện tiên quyết

Một ứng dụng Google Chat đã bật các tính năng tương tác. Để tạo một ứng dụng Chat tương tác, hãy hoàn thành một trong các bước bắt đầu nhanh sau đây trên cấu trúc ứng dụng mà bạn muốn sử dụng:

Thêm hình ảnh hoặc biểu tượng

Phần này giải thích cách thêm các thành phần hình ảnh vào thẻ như hình ảnh biểu tượng và thành phần hình ảnh.

Thêm hình ảnh

Tiện ích Image hiển thị hình ảnh PNG hoặc JPG được lưu trữ trên URL HTTPS. Chiều rộng của hình ảnh đang hiển thị sẽ lấp đầy toàn bộ chiều rộng của thẻ được hiển thị, và chiều cao của hình ảnh sẽ điều chỉnh để duy trì tỷ lệ khung hình của hình ảnh. Tiện ích Image hỗ trợ onclick hành động xảy ra khi người dùng nhấp vào hình ảnh. Ví dụ về các thao tác onclick:

  • Mở siêu liên kết bằng OpenLink! chẳng hạn như đường siêu liên kết đến tài liệu dành cho nhà phát triển Google Chat https://developers.google.com/chat.
  • Chạy một hành động chạy một hàm tuỳ chỉnh, chẳng hạn như gọi một API.

Tiện ích Image có các hạn chế sau:

  • Chỉ hỗ trợ hình ảnh PNG và JPG.
  • URL máy chủ phải là HTTPS.
  • Để đảm bảo thẻ hiệu suất, kích thước hình ảnh nên dùng tối đa là 2 MB.

Sau đây là một thẻ bao gồm một tiện ích Image. Thẻ này hiển thị Hình ảnh trang đích của tài liệu dành cho nhà phát triển Google Chat. Khi người dùng nhấp vào hình ảnh, tài liệu dành cho nhà phát triển về Google Chat sẽ mở trong một thẻ mới.

Thêm một thành phần hình ảnh

Tiện ích Image là một hình ảnh được định kiểu hạn chế. Một Tiện ích imageCompent cho phép bạn áp dụng cropStyle và borderStyle cho một hình ảnh.

Ví dụ sau đây hiển thị hai hình ảnh trong một lưới, trong đó một trong hai hình ảnh đã cắt bớt:

Bạn có thể điều chỉnh hình dạng của một thành phần hình ảnh bằng cách áp dụng cropStyle. Có một số hình dạng để áp dụng cho hình ảnh:

  • Sử dụng SQUARE để áp dụng ảnh cắt hình vuông.
  • Sử dụng CIRCLE để áp dụng vùng cắt hình tròn.
  • Dùng RECTANGLE_CUSTOM để áp dụng vùng cắt hình chữ nhật có một khung hình tuỳ chỉnh . Ví dụ: bạn có thể dùng RECTANGLE_4_3 để áp dụng vùng cắt hình chữ nhật với tỷ lệ khung hình 4:3.

Ví dụ sau đây cho thấy 5 hình ảnh trong một lưới có một cropStyle khác đã áp dụng cho mỗi hình ảnh:

Thêm biểu tượng

Chiến lược phát hành đĩa đơn Tiện ích Icon biểu thị một tích hợp biểu tượng hoặc tuỳ chỉnh . Bạn thêm biểu tượng vào thẻ để thực hiện bất kỳ thao tác nào sau đây:

  • Hiển thị một biểu tượng độc lập.
  • Hiển thị một biểu tượng ở phía trước văn bản liên quan, như một phần của Tiện ích DecoratedText.
  • Hiển thị biểu tượng dưới dạng nút tương tác, như một phần của Tiện ích ButtonList.

Sau đây là một thẻ bao gồm thành phần Icon có biểu tượng tích hợp sẵn:

Bảng sau đây liệt kê các biểu tượng tích hợp sẵn cho tin nhắn thẻ:

TRÊN MÁY BAY Dấu trang
XE BUÝT Ô TÔ
ĐỒNG HỒ CONFIRMATION_NUMBER_ICON
NỘI DUNG MÔ TẢ ĐÔ LA LÊN
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
KHÁCH SẠN HOTEL_ROOM_TYPE
MỜI MAP_PIN
Gói thành viên MULTIPLE_PEOPLE
NGƯỜI Điện thoại
RESTAURANT_ICON SHOPPING_CART
STAR CỬA HÀNG
VÉ ĐÀO TẠO
VIDEO_CAMERA VIDEO_PLAY

Thêm văn bản vào thẻ

Phần này giải thích cách thêm và định dạng văn bản trong thẻ.

Thêm một đoạn văn bản đã định dạng

Chiến lược phát hành đĩa đơn Tiện ích TextParagraph hiển thị một đoạn văn bản có định dạng HTML tuỳ chọn. Khi đặt nội dung văn bản của các tiện ích này, chỉ cần bao gồm các thẻ HTML tương ứng. Để biết thêm thông tin về loại thẻ HTML được hỗ trợ, hãy xem Định dạng văn bản xuất hiện trong các thẻ.

Ví dụ: định dạng sau đây có sẵn cho văn bản đoạn:

  • Hiển thị văn bản in đậm, được gạch chân hoặc in nghiêng với HTML <b>, <u>, <i> các thẻ.
  • Liên kết đến các trang web có HTML <a href="https://www.google.com">hyperlinks</a>.
  • Thêm một số màu sắc với HTML <font color="#ea9999">font tags</font>.

Mỗi tiện ích TextParagraph hiển thị dưới dạng một đoạn mới và có thể được nghĩ đến tương tự như thẻ HTML <p>.

Sau đây là một thẻ bao gồm 2 tiện ích TextParagraph được dùng để hiển thị hai đoạn văn có định dạng HTML đơn giản:

Thêm một đoạn văn bản có thể thu gọn

Các đoạn văn bản có thể thu gọn cho phép người dùng cung cấp thêm thông tin theo yêu cầu. Tiện ích này hoàn hảo để trình bày nội dung dài hoặc các chi tiết bổ sung có thể khám phá khi được chọn, tạo ra một người dùng động và có tính tương tác của bạn.

Hiển thị văn bản có các yếu tố trang trí

Chiến lược phát hành đĩa đơn Tiện ích DecoratedText hiển thị văn bản với bố cục và chức năng tuỳ chọn. Ví dụ:

  • Hiển thị icon ở phía trước văn bản bằng startIcon.
  • Hiện tiêu đề trước văn bản bằng topLabel.
  • Thêm một nút có thể nhấp vào bằng button hoặc nút bật/tắt có thể chuyển đổi bằng switchControl.

Sử dụng tiện ích DecoratedText khi bạn cần trình bày thông tin trong một dễ sử dụng và có tính tương tác. Tiện ích này rất phù hợp cho các trường hợp sử dụng như danh bạ, thông tin cập nhật trạng thái đơn hàng và thông báo phiếu yêu cầu hỗ trợ.

Tiện ích DecoratedText hỗ trợ định dạng văn bản HTML đơn giản. Khi đặt nội dung văn bản của các tiện ích này, chỉ cần bao gồm các thẻ HTML tương ứng. Cho thông tin thêm về loại thẻ HTML được hỗ trợ, hãy xem Định dạng văn bản trong thẻ.

Sau đây là một thẻ bao gồm tiện ích DecoratedText được dùng để hiển thị thông tin liên hệ, chẳng hạn như địa chỉ email, trạng thái trực tuyến, số điện thoại và trang web:

Khắc phục sự cố

Khi một ứng dụng Google Chat hoặc card trả về một lỗi, thì phương thức Giao diện Chat hiển thị một thông báo với nội dung "Đã xảy ra lỗi". hoặc "Không thể xử lý yêu cầu của bạn". Đôi khi, giao diện người dùng của Chat không hiện thông báo lỗi nào ngoài ứng dụng Chat hoặc thẻ tạo ra kết quả không mong muốn; ví dụ: thông báo thẻ có thể không xuất hiện.

Mặc dù thông báo lỗi có thể không xuất hiện trong giao diện người dùng Chat, thông báo lỗi mô tả và dữ liệu nhật ký luôn có sẵn để giúp bạn sửa lỗi khi tính năng ghi nhật ký lỗi cho các ứng dụng trong Chat được bật. Để được trợ giúp xem, gỡ lỗi và sửa lỗi, hãy xem Khắc phục lỗi và khắc phục lỗi của Google Chat.