Phản hồi đa dạng thức sẽ thêm các phần tử hình ảnh để nâng cao khả năng tương tác của người dùng với Hành động của bạn. Bạn có thể sử dụng các loại câu trả lời nhiều định dạng sau đây trong lời nhắc:
- Thẻ cơ bản
- Thẻ hình ảnh
- Thẻ bảng
Khi xác định phản hồi chi tiết, hãy sử dụng đề xuất với khả năng giao diện RICH_RESPONSE để Trợ lý Google chỉ trả về phản hồi chi tiết trên các thiết bị được hỗ trợ. Bạn chỉ có thể sử dụng một phản hồi nhiều định dạng cho mỗi đối tượng content trong một lời nhắc.
Thẻ cơ bản
Thẻ cơ bản được thiết kế ngắn gọn, để trình bày thông tin chính (hoặc tóm tắt) cho người dùng và cho phép người dùng tìm hiểu thêm nếu bạn chọn (sử dụng đường liên kết web).
Sử dụng các thẻ cơ bản chủ yếu cho mục đích hiển thị, vì các thẻ này không có khả năng tương tác nếu không có nút. Để liên kết một nút với web, nền tảng cũng phải có tính năng WEB_LINK.
Thuộc tính
Loại phản hồi cơ bản của thẻ có các thuộc tính sau:
| Tài sản | Loại | Yêu cầu | Nội dung mô tả |
|---|---|---|---|
title |
string | Không bắt buộc | Tiêu đề thẻ ở dạng văn bản thuần tuý. Tiêu đề có phông chữ và kích thước cố định, đồng thời các ký tự sau dòng đầu tiên sẽ bị cắt bớt. Chiều cao thẻ sẽ thu gọn nếu bạn không chỉ định tiêu đề. |
subtitle |
string | Không bắt buộc | Tiêu đề phụ bằng văn bản thuần tuý của thẻ. Tiêu đề có phông chữ và kích thước cố định, đồng thời các ký tự sau dòng đầu tiên sẽ bị cắt bớt. Chiều cao thẻ sẽ thu gọn nếu bạn không chỉ định tiêu đề phụ. |
text |
string | Câu lệnh có điều kiện |
Nội dung văn bản thuần tuý của thẻ. Văn bản quá dài sẽ bị cắt bớt ở ngắt từ cuối cùng bằng dấu ba chấm. Bạn bắt buộc phải sử dụng thuộc tính này trừ phi có Tài sản này có các quy định hạn chế sau đây:
Chỉ hỗ trợ một số ít Markdown:
|
image |
Image |
Không bắt buộc | Hình ảnh hiển thị trong thẻ. Hình ảnh có thể ở định dạng JPG, PNG và GIF (ảnh động và tĩnh). |
image_fill |
ImageFill |
Không bắt buộc | Đường viền giữa thẻ và vùng chứa hình ảnh sẽ được sử dụng khi tỷ lệ khung hình của hình ảnh không khớp với tỷ lệ khung hình của vùng chứa hình ảnh. |
button |
Link |
Không bắt buộc | Nút liên kết người dùng đến một URL khi họ nhấn vào. Nút này phải có một thuộc tính name chứa văn bản của nút và một thuộc tính url chứa URL của đường liên kết. Văn bản trên nút có thể không gây hiểu lầm và sẽ được kiểm tra trong quá trình xem xét. |
Mã mẫu
Hàm YAML
candidates:
- first_simple:
variants:
- speech: This is a card.
text: This is a card.
content:
card:
title: Card Title
subtitle: Card Subtitle
text: Card Content
image:
url: 'https://developers.google.com/assistant/assistant_96.png'
alt: Google Assistant logo
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is a card.",
"text": "This is a card."
}
]
},
"content": {
"card": {
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": {
"url": "https://developers.google.com/assistant/assistant_96.png",
"alt": "Google Assistant logo"
}
}
}
}
]
}
Node.js
app.handle('Card', conv => {
conv.add('This is a card.');
conv.add(new Card({
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
})
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"card": {
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
}
}
},
"firstSimple": {
"speech": "This is a card.",
"text": "This is a card."
}
}
}
}
Thẻ hình ảnh
Thẻ hình ảnh được thiết kế để trở thành một giải pháp thay thế đơn giản hơn cho thẻ cơ bản cũng chứa hình ảnh. Sử dụng thẻ hình ảnh khi bạn muốn trình bày hình ảnh mà không cần hỗ trợ văn bản hoặc các thành phần tương tác.
Thuộc tính
Loại phản hồi thẻ hình ảnh có các thuộc tính sau:
| Tài sản | Loại | Yêu cầu | Nội dung mô tả |
|---|---|---|---|
url |
string | Bắt buộc | URL nguồn của hình ảnh. Hình ảnh có thể ở định dạng JPG, PNG hoặc GIF (ảnh động và tĩnh). |
alt |
string | Bắt buộc | Nội dung mô tả bằng văn bản của hình ảnh được dùng để hỗ trợ người khuyết tật. |
height |
int32 | Không bắt buộc | Chiều cao của hình ảnh tính bằng pixel. |
width |
int32 | Không bắt buộc | Chiều rộng của hình ảnh tính bằng pixel. |
Mã mẫu
Hàm YAML
candidates:
- first_simple:
variants:
- speech: This is an image prompt.
text: This is an image prompt.
content:
image:
alt: Google Assistant logo
url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is an image prompt.",
"text": "This is an image prompt."
}
]
},
"content": {
"image": {
"alt": "Google Assistant logo",
"url": "https://developers.google.com/assistant/assistant_96.png"
}
}
}
]
}
Node.js
app.handle('Image', conv => {
conv.add("This is an image prompt!");
conv.add(new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
}
},
"firstSimple": {
"speech": "This is an image prompt.",
"text": "This is an image prompt."
}
}
}
}
Thẻ bảng
Thẻ bảng cho phép bạn hiển thị dữ liệu dạng bảng trong câu trả lời của mình (ví dụ: bảng xếp hạng thể thao, kết quả bầu cử và chuyến bay). Bạn có thể xác định cột và hàng (tối đa 3 hàng mỗi cột) mà Trợ lý hiển thị trong thẻ bảng. Bạn cũng có thể xác định các cột và hàng bổ sung, cùng với mức độ ưu tiên của các cột và hàng đó.
Bảng hiển thị dữ liệu tĩnh và không tương tác được. Đối với các phản hồi lựa chọn tương tác, hãy sử dụng phản hồi lựa chọn hình ảnh.
Thuộc tính
Loại phản hồi bằng thẻ bảng có các thuộc tính sau:
| Tài sản | Loại | Yêu cầu | Nội dung mô tả |
|---|---|---|---|
title |
string | Câu lệnh có điều kiện | Tiêu đề văn bản thuần tuý của bảng. Thuộc tính này là bắt buộc nếu bạn đặt subtitle. |
subtitle |
string | Không bắt buộc | Tiêu đề phụ bằng văn bản thuần tuý của bảng. Phụ đề trong thẻ bảng không bị ảnh hưởng khi tuỳ chỉnh giao diện. |
columns |
mảng TableColumn |
Bắt buộc | Tiêu đề và căn chỉnh các cột. Mỗi đối tượng TableColumn mô tả tiêu đề và cách căn chỉnh của một cột khác trong cùng một bảng. |
rows |
mảng TableRow |
Bắt buộc |
Dữ liệu hàng của bảng. 3 hàng đầu tiên chắc chắn sẽ hiển thị, nhưng các hàng khác có thể không xuất hiện trên một số khu vực. Bạn có thể kiểm thử bằng trình mô phỏng để xem hàng nào xuất hiện trên một nền tảng nhất định. Mỗi đối tượng |
image |
Image |
Không bắt buộc | Hình ảnh được liên kết với bảng. |
button |
Link |
Không bắt buộc | Nút liên kết người dùng đến một URL khi họ nhấn vào. Nút này phải có một thuộc tính name chứa văn bản của nút và một thuộc tính url chứa URL của đường liên kết. Văn bản trên nút không được gây hiểu lầm và sẽ được kiểm tra trong quá trình xem xét.
|
Mã mẫu
Các đoạn mã sau đây cho biết cách triển khai thẻ bảng:
Hàm YAML
candidates:
- first_simple:
variants:
- speech: This is a table.
text: This is a table.
content:
table:
title: Table Title
subtitle: Table Subtitle
columns:
- header: Column A
- header: Column B
- header: Column C
rows:
- cells:
- text: A1
- text: B1
- text: C1
- cells:
- text: A2
- text: B2
- text: C2
- cells:
- text: A3
- text: B3
- text: C3
image:
alt: Google Assistant logo
url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is a table.",
"text": "This is a table."
}
]
},
"content": {
"table": {
"title": "Table Title",
"subtitle": "Table Subtitle",
"columns": [
{
"header": "Column A"
},
{
"header": "Column B"
},
{
"header": "Column C"
}
],
"rows": [
{
"cells": [
{
"text": "A1"
},
{
"text": "B1"
},
{
"text": "C1"
}
]
},
{
"cells": [
{
"text": "A2"
},
{
"text": "B2"
},
{
"text": "C2"
}
]
},
{
"cells": [
{
"text": "A3"
},
{
"text": "B3"
},
{
"text": "C3"
}
]
}
],
"image": {
"alt": "Google Assistant logo",
"url": "https://developers.google.com/assistant/assistant_96.png"
}
}
}
}
]
}
Node.js
app.handle('Table', conv => {
conv.add('This is a table.');
conv.add(new Table({
"title": "Table Title",
"subtitle": "Table Subtitle",
"image": new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
}),
"columns": [{
"header": "Column A"
}, {
"header": "Column B"
}, {
"header": "Column C"
}],
"rows": [{
"cells": [{
"text": "A1"
}, {
"text": "B1"
}, {
"text": "C1"
}]
}, {
"cells": [{
"text": "A2"
}, {
"text": "B2"
}, {
"text": "C2"
}]
}, {
"cells": [{
"text": "A3"
}, {
"text": "B3"
}, {
"text": "C3"
}]
}]
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"table": {
"button": {},
"columns": [
{
"header": "Column A"
},
{
"header": "Column B"
},
{
"header": "Column C"
}
],
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
},
"rows": [
{
"cells": [
{
"text": "A1"
},
{
"text": "B1"
},
{
"text": "C1"
}
]
},
{
"cells": [
{
"text": "A2"
},
{
"text": "B2"
},
{
"text": "C2"
}
]
},
{
"cells": [
{
"text": "A3"
},
{
"text": "B3"
},
{
"text": "C3"
}
]
}
],
"subtitle": "Table Subtitle",
"title": "Table Title"
}
},
"firstSimple": {
"speech": "This is a table.",
"text": "This is a table."
}
}
}
}
Tuỳ chỉnh câu trả lời của bạn
Bạn có thể thay đổi hình thức hiển thị của phản hồi nhiều định dạng bằng cách tạo một giao diện tuỳ chỉnh cho dự án Actions của mình. Việc tuỳ chỉnh này có thể hữu ích cho việc xác định giao diện độc đáo cho cuộc trò chuyện khi người dùng gọi Hành động của bạn trên một nền tảng bằng màn hình.
Để đặt giao diện phản hồi tuỳ chỉnh, hãy làm như sau:
- Trong Bảng điều khiển Actions, hãy chuyển đến phần Phát triển > Tuỳ chỉnh giao diện.
- Thiết lập một hoặc tất cả các giá trị sau:
- Màu nền: Được dùng làm nền của thẻ. Nói chung, hãy sử dụng màu sáng cho nền để giúp nội dung thẻ dễ đọc hơn.
- Màu chính: Màu chính cho văn bản tiêu đề và các thành phần trên giao diện của thẻ. Nhìn chung, hãy sử dụng màu chính tối hơn để tương phản tốt hơn với màu nền.
- Bộ phông chữ: Mô tả loại phông chữ dùng cho tiêu đề và các thành phần văn bản nổi bật khác.
- Kiểu góc hình ảnh: Thay đổi giao diện các góc của thẻ.
- Hình nền: Hình ảnh tuỳ chỉnh để sử dụng thay cho màu nền. Cung cấp 2 hình ảnh riêng biệt khi thiết bị bề mặt ở chế độ ngang hoặc dọc. Nếu bạn sử dụng hình nền, màu chính sẽ được đặt thành màu trắng.
- Nhấp vào Lưu.
