Zengin yanıtlar, kullanıcıların İşleminizle etkileşimini geliştirmek için görsel öğeler ekler. Bir istemin parçası olarak aşağıdaki zengin yanıt türlerini kullanabilirsiniz:
- Temel kart
- Resim kartı
- Tablo kartı
Zengin yanıt tanımlarken RICH_RESPONSE yüzeyine sahip bir aday kullanın. Böylece Google Asistan, yalnızca desteklenen cihazlarda zengin yanıtı döndürür. Bir istemdeki content nesnesi başına yalnızca bir zengin yanıt kullanabilirsiniz.
Temel kart
Temel kartlar, kullanıcılara önemli (veya özet) bilgiler sunmak ve isterseniz (bir web bağlantısı kullanarak) kullanıcıların daha fazla bilgi edinmesini sağlamak için kısa ve öz olacak şekilde tasarlanmıştır.
Düğme olmadan etkileşim özellikleri olmadığından temel kartları genellikle görüntüleme amacıyla kullanın. Bir düğmeyi web'e bağlamak için yüzeylerde WEB_LINK özelliği de bulunmalıdır.
Özellikler
Temel kart yanıt türü aşağıdaki özelliklere sahiptir:
| Özellik | Tür | Koşul | Açıklama |
|---|---|---|---|
title |
dize | İsteğe bağlı | Kartın düz metin başlığı. Başlıklar sabit yazı tipinde ve boyutundadır. İlk satırdan sonraki karakterler kısaltılır. Başlık belirtilmezse kart yüksekliği daraltılır. |
subtitle |
dize | İsteğe bağlı | Kartın düz metin alt başlığı. Başlıklar sabit yazı tipinde ve boyutundadır. İlk satırdan sonraki karakterler kısaltılır. Altyazı belirtilmezse kart yüksekliği daraltılır. |
text |
dize | Şart Kipi |
Kartın düz metin içeriği. Çok uzun metinler, son kelime sonunda üç nokta ile kesilir. Bu tesis için aşağıdaki kısıtlamalar geçerlidir:
Sınırlı bir Markdown alt kümesi desteklenir:
|
image |
Image |
İsteğe bağlı | Kartta gösterilen resim. Resimler JPG, PNG ve GIF (animasyonlu ve animasyonsuz) olabilir. |
image_fill |
ImageFill |
İsteğe bağlı | Resmin en boy oranı, resim kapsayıcısının en boy oranıyla eşleşmediğinde kullanılacak kart ile resim kapsayıcısı arasındaki kenarlık. |
button |
Link |
İsteğe bağlı | Dokunulduğunda kullanıcıyı bir URL'ye bağlayan düğme. Düğmenin, düğme metnini içeren name özelliği ve bağlantı URL'sini içeren url özelliği olmalıdır. Düğme metni yanıltıcı olmayabilir ve inceleme sürecinde kontrol edilir. |
Örnek kod
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."
}
}
}
}
Resim kartları
Resim kartları, resim de içeren basit kartlara kıyasla daha basit olacak şekilde tasarlanmıştır. Resim sunmak istediğinizde ve destekleyici metin ya da etkileşimli bileşene ihtiyacınız olmadığında resim kartı kullanın.
Özellikler
Görüntü kartı yanıt türü aşağıdaki özelliklere sahiptir:
| Özellik | Tür | Koşul | Açıklama |
|---|---|---|---|
url |
dize | Gerekli | Görselin kaynak URL'si. Resimler JPG, PNG veya GIF (animasyonlu ve animasyonsuz) olabilir. |
alt |
dize | Gerekli | Erişilebilirlik için kullanılacak resmin metin açıklaması. |
height |
int32 | İsteğe bağlı | Resmin piksel cinsinden yüksekliği. |
width |
int32 | İsteğe bağlı | Resmin piksel cinsinden genişliği. |
Örnek kod
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."
}
}
}
}
Tablo kartları
Masa kartları, yanıtınızda tablo verileri (örneğin, spor puan durumu, seçim sonuçları ve uçuşlar) göstermenize olanak tanır. Asistan'ın tablo kartınızda gösterdiği sütunları ve satırları (her biri en fazla 3 adet) tanımlayabilirsiniz. Ayrıca önceliklendirmeleriyle birlikte ek sütunlar ve satırlar tanımlayabilirsiniz.
Tablolar statik verileri gösterir ve etkileşime geçilemez. Etkileşimli seçim yanıtları için bunun yerine bir görsel seçim yanıtı kullanın.
Özellikler
Tablo kartı yanıt türü aşağıdaki özelliklere sahiptir:
| Özellik | Tür | Koşul | Açıklama |
|---|---|---|---|
title |
dize | Şart Kipi | Tablonun düz metin başlığı. subtitle ayarlandıysa bu özellik gereklidir. |
subtitle |
dize | İsteğe bağlı | Tablonun düz metin alt başlığı. Tablo kartlarındaki altyazılar, tema özelleştirmesinden etkilenmez. |
columns |
TableColumn dizisi |
Gerekli | Başlıklar ve sütunların hizalaması. Her TableColumn nesnesi, aynı tablodaki farklı bir sütunun başlığını ve hizalamasını açıklar. |
rows |
TableRow dizisi |
Gerekli |
Tablonun satır verileri. İlk 3 satırın gösterilmesi garanti edilir ancak diğerleri belirli yüzeylerde görünmeyebilir. Belirli bir yüzey için hangi satırların gösterildiğini görmek üzere simülatörü kullanarak test yapabilirsiniz. Her |
image |
Image |
İsteğe bağlı | Tabloyla ilişkilendirilen resim. |
button |
Link |
İsteğe bağlı | Dokunulduğunda kullanıcıyı bir URL'ye bağlayan düğme. Düğmenin, düğme metnini içeren name özelliği ve bağlantı URL'sini içeren url özelliği olmalıdır. Düğme metni yanıltıcı olmayabilir ve inceleme sürecinde kontrol edilir.
|
Örnek kod
Aşağıdaki snippet'lerde bir tablo kartının nasıl uygulanacağı gösterilmektedir:
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."
}
}
}
}
Yanıtlarınızı özelleştirme
Actions projeniz için özel bir tema oluşturarak zengin yanıtlarınızın görünümünü değiştirebilirsiniz. Bu özelleştirme, kullanıcılar ekranlı bir yüzeyde İşlemlerinizi çağırdığında görüşmenin benzersiz bir görünümünü ve tarzını tanımlamak için yararlı olabilir.
Özel bir yanıt teması belirlemek için aşağıdakileri yapın:
- Actions Console'da Geliştirme > Tema özelleştirme'ye gidin.
- Aşağıdakilerden birini veya tümünü ayarlayın:
- Arka plan rengi: Kartlarınızın arka planı olarak kullanılır. Genel olarak, kart içeriğinin daha kolay okunabilmesi için arka planda açık bir renk kullanın.
- Birincil renk: Kartlarınızın başlık metinleri ve arayüz öğelerinin ana rengi. Genel olarak, arka plan rengiyle daha iyi kontrast oluşturmak için daha koyu bir birincil renk kullanın.
- Yazı tipi ailesi: Başlıklar ve diğer belirgin metin öğeleri için kullanılan yazı tipi türünü açıklar.
- Resim köşe stili: Kartlarınızın köşelerinin görünümünü değiştirir.
- Arka plan resmi: Arka plan rengi yerine kullanılacak özel resim. Yüzey cihazının yatay veya dikey modda olduğu durumlar için iki farklı resim sağlayın. Arka plan resmi kullanırsanız birincil renk beyaz olarak ayarlanır.
- Kaydet'i tıklayın.
