Thêm văn bản và hình ảnh vào thẻ hoặc hộp thoại

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 hộp thoại, cũng như sửa đổi cách văn bản và hình ảnh xuất hiện trong thông báo.


Thiết kế và xem trước thẻ bằng Trình tạo thẻ.

Mở Trình tạo thẻ

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

  • Một tài khoản Google Workspace có quyền truy cập vào Google Chat.
  • Một ứng dụng Chat đã phát hành. Để tạo ứng dụng Chat, hãy làm theo phần quickstart này.
  • 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ị 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ợ hành động onclick xảy ra khi người dùng nhấp vào hình ảnh. Ví dụ về các hành động của onclick:

    • Mở một đường siêu liên kết có 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 trên Google Chat, https://developers.google.com/chat.
    • Chạy một thao tác chạy hàm tuỳ chỉnh, chẳng hạn như gọi 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ẻ hoạt động hiệu quả, bạn nên sử dụng kích thước hình ảnh tối đa là 2MB.

    Sau đây là một thẻ bao gồm tiện ích Image. Màn hình 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 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 bị giới hạn kiểu định dạng. Tiện ích imageCompent cho phép bạn áp dụng cropStyleborderStyle cho 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 cropStyle. Có một vài hình dạng để áp dụng cho hình ảnh:

    • Sử dụng SQUARE để áp dụng ảnh cắt theo hình vuông.
    • Sử dụng CIRCLE để áp dụng vùng cắt hình tròn.
    • Sử dụng RECTANGLE_CUSTOM để áp dụng một vùng 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 với 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 một biểu tượng tích hợp sẵn hoặc biểu tượng tuỳ chỉnh. Bạn có thể sử dụng Icon trong thông báo thẻhộp thoại theo những cách sau:

    • Hiển thị 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 trong 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 dành cho thông báo bằng thẻ:

    Máy bay BOOKMARK
    BUS Ô TÔ
    KHOÁ CONFIRMATION_NUMBER_ICON
    MÔ TẢ Hàm rỗng
    EMAIL EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    KHÁCH SẠN HOTEL_ROOM_TYPE
    MỜI MAP_PIN
    LÀ HỘI VIÊN MULTIPLE_PEOPLE
    MỘT NGƯỜI SỐ ĐIỆN THOẠI
    RESTAURANT_ICON SHOPPING_CART
    SAO CỬA HÀNG
    TRAIN
    VIDEO_CAMERA VIDEO_PLAY

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

    Tiện ích TextParagraph sẽ 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ề các thẻ HTML được hỗ trợ, hãy xem bài viết Định dạng văn bản thẻ.

    Ví dụ: định dạng sau đây áp dụng cho văn bản đoạn:

    • Hiển thị văn bản in đậm, có gạch dưới 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 nào đó 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 với các thành phần trang trí

    Tiện ích DecoratedText hiển thị văn bản với bố cục và chức năng không bắt buộc. 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 bằng button hoặc nút bật/tắt có thể chuyển đổi bằng switchControl.

    Hãy sử dụng tiện ích DecoratedText khi bạn cần trình bày thông tin một 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ệ, 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 công việc.

    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 đưa vào các thẻ HTML tương ứng. Để biết thêm thông tin về các 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 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 ứ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 nào, nhưng ứng dụng hoặc thẻ Chat 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 hiển thị trong giao diện người dùng 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 về việc xem, gỡ lỗi và sửa lỗi, hãy xem phần Khắc phục sự cố và sửa lỗi trên Google Chat.