Trang này giải thích cách thêm văn bản và hình ảnh vào thẻ hoặc thông báo trong hộp thoại, cũng như cách sửa đổi cách văn bản và hình ảnh xuất hiện trong thông báo.
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
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 HTTPS.
Chiều rộng của hình ảnh hiển thị sẽ lấp đầy toàn bộ chiều rộng của thẻ hiển thị, còn 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ợ các thao tác onclick
diễn ra khi người dùng nhấp vào hình ảnh. Ví dụ về các thao tác onclick
:
- Mở một siêu liên kết có
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 thao tác 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
. Phần này cho thấy 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ở ra 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ế. 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 cho thấy 2 hình ảnh trong một lưới, trong đó một trong các hình ảnh bị cắt:
Cắt hình ảnh
Bạn có thể điều chỉnh hình dạng của hình ảnh bằng cách áp dụng một 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 ảnh cắt hình chữ nhật có tỷ lệ khung hình tuỳ chỉnh. Ví dụ: bạn có thể sử dụngRECTANGLE_4_3
để áp dụng ảnh 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 với một cropStyle
khác đượ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ể sử dụng Icon
trong thông báo thẻ và hộp thoại theo những cách sau:
- 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, dưới dạng 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 | BOOKMARK | ||
BUS | Ô TÔ | ||
ĐỒNG HỒ | CONFIRMATION_NUMBER_ICON | ||
NỘI DUNG MÔ TẢ | ĐÔ LA LÊN | ||
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 | ||
GẮN DẤU SAO | CỬA HÀNG | ||
VÉ | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
Thêm một đoạn văn bản đã đị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 đưa vào 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 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 bằng các thẻ HTML
<b>
,<u>
,<i>
. - 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 coi là tương tự như thẻ <p>
HTML.
Sau đây là một thẻ bao gồm 2 tiện ích TextParagraph
dùng để hiển thị 2 đoạn văn có định dạng HTML đơn giản:
Hiển thị văn bản có các yếu tố trang trí
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ằngstartIcon
. - 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ằngswitchControl
.
Sử dụng tiện ích DecoratedText
khi bạn cần trình bày thông tin theo cách 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ư thẻ liên hệ, cập nhật trạng thái đơn đặt 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, bạn chỉ cần đưa vào 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 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 hoặc thẻ Google Chat trả về lỗi, giao diện Chat sẽ hiển thị một thông báo cho biết "Đã 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 nào, nhưng ứng dụng hoặc thẻ trong Chat lại cho 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 của Chat, nhưng chúng tôi cung cấp dữ liệu nhật ký và thông báo lỗi mô tả để giúp bạn khắc phục lỗi khi bật tính năng ghi nhật ký lỗi cho các ứng dụng trong Chat. Để được trợ giúp xem, gỡ lỗi và sửa lỗi, hãy xem bài viết Khắc phục sự cố và sửa lỗi Google Chat.