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 vào thẻ.

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

Sử dụng Trình tạo thẻ để thiết kế và xem trước giao diện người dùng cũng như thông báo cho ứng dụng Chat:

Mở Trình tạo thẻ

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

Một ứng dụng Google Chat được định cấu hình để nhận và phản hồi các hoạt động tương tác của người dùng. Để tạo một ứng dụng Chat có tính tương tác, hãy hoàn tất một trong các hướng dẫn nhanh sau đây dựa trên kiến 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ẻ, chẳng hạn như hình ảnh, thành phần hình ảnh và biểu tượng.

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 một URL loại HTTPS. Chiều rộng của hình ảnh hiển thị lấp đầy toàn bộ chiều rộng của thẻ hiển thị và chiều cao của hình ảnh đ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ề hành động onclick bao gồm:

  • Mở một siêu liên kết bằng OpenLink, chẳng hạn như 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 hàm tuỳ chỉnh, chẳng hạn như gọi API.

Tiện ích Image có các giới hạn sau:

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

Sau đây là một thẻ bao gồm một tiện ích Image. Hình ảnh này cho thấy hình ảnh trên 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 Google Chat sẽ mở trong một thẻ mới.

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

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

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

Bạn có thể điều chỉnh hình dạng của 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 thao tác cắt hình vuông.
  • Sử dụng CIRCLE để áp dụng thao tác cắt hình tròn.
  • Sử dụng RECTANGLE_CUSTOM để áp dụng thao tác cắt hình chữ nhật với tỷ lệ khung hình tuỳ chỉnh. Ví dụ: bạn có thể sử dụng RECTANGLE_4_3 để áp dụng thao tác 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ó cropStyle khác nhau được áp dụng cho mỗi hình ảnh:

Thêm biểu tượng

Tiện ích Icon đại diện cho biểu tượng tích hợp hoặc biểu tượng tuỳ chỉnh. Bạn có thể 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ị biểu tượng độc lập.
  • Hiện một biểu tượng trước văn bản có liên quan, trong tiện ích DecoratedText.
  • Hiển thị biểu tượng dưới dạng nút tương tác, trong một 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:

Bảng sau đây liệt kê các biểu tượng tích hợp sẵn cho thông báo dạng thẻ:

AIRPLANE BOOKMARK
BUS CAR
ĐỒNG HỒ CONFIRMATION_NUMBER_ICON
NỘI DUNG MÔ TẢ DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
MỜI MAP_PIN
GÓI THÀNH VIÊN MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR CỬA HÀNG
VÉ TÀU HOẢ
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 được định dạng

Tiện ích TextParagraph hiển thị một đoạn văn bản có định dạng HTML (không bắt buộc). Khi đặt nội dung văn bản của các tiện ích này, bạn chỉ cần thêm các thẻ HTML tương ứng. Để biết thêm thông tin về những thẻ HTML được hỗ trợ, hãy xem phần Định dạng văn bản xuất hiện trong thẻ.

Ví dụ: bạn có thể sử dụng các định dạng sau cho văn bản đoạn:

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

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

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

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

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

Hiển thị văn bản có các thành phần trang trí

Tiện ích DecoratedText hiển thị văn bản có bố cục và chức năng không bắt buộc. Ví dụ:

  • Hiện icon trước văn bản bằng startIcon.
  • Hiện tiêu đề trước văn bản bằng topLabel.
  • Thêm nút có thể nhấp 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 theo cách dễ hiểu 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ư thẻ liên hệ, thông tin cập nhật về trạng thái đơn đặt hàng và thông báo về phiếu yêu cầu hỗ trợ.

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

Sau đây là một thẻ bao gồm tiện ích DecoratedText 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 thẻ trả về lỗi, giao diện Chat sẽ hiển thị thông báo "Đã 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ị thông báo lỗi, nhưng ứng dụng Chat hoặc thẻ lại tạo ra kết quả không mong muốn; ví dụ: thông báo dạng 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 của Chat, nhưng thông báo lỗi mô tả và dữ liệu nhật ký sẽ giúp bạn khắc phục lỗi khi bật tính năng ghi nhật ký lỗi cho ứng dụng Chat. Để được trợ giúp xem, gỡ lỗi và khắc phục lỗi, hãy xem bài viết Khắc phục sự cố và sửa lỗi trong Google Chat.