Respons lengkap

Respons yang kaya menambahkan elemen visual untuk meningkatkan interaksi pengguna dengan {i>Action<i}. Anda dapat menggunakan jenis respons lengkap berikut sebagai bagian dari perintah:

  • Kartu dasar
  • Kartu gambar
  • Kartu tabel

Saat menentukan respons lengkap, gunakan kandidat dengan RICH_RESPONSE kemampuan permukaan sehingga Asisten Google hanya menampilkan respons lengkap pada perangkat yang didukung. Anda hanya dapat menggunakan satu respons lengkap per objek content dalam .

Kartu dasar

Kartu dasar dirancang agar ringkas, untuk menyajikan informasi kunci (atau ringkasan) kepada pengguna, dan memungkinkan pengguna mempelajari lebih lanjut jika Anda mau (menggunakan link web).

Gunakan kartu dasar terutama untuk tujuan tampilan, karena kartu tidak memiliki interaksi kemampuan tanpa tombol. Untuk menautkan tombol ke web, platform harus juga memiliki kemampuan WEB_LINK.

Contoh kartu dasar di layar smart

Properti

Jenis respons kartu dasar memiliki properti berikut:

Properti Jenis Persyaratan Deskripsi
title string Opsional Judul teks biasa kartu. Judul memiliki {i>font<i} dan ukuran yang tetap, dan karakter yang melewati baris pertama akan terpotong. Tinggi kartu diciutkan jika tidak judul ditentukan.
subtitle string Opsional Subtitel teks biasa pada kartu. Judul memiliki {i>font<i} dan ukuran yang tetap, dan karakter yang melewati baris pertama akan terpotong. Tinggi kartu diciutkan jika tidak ada subjudul yang ditentukan.
text string Kondisional

Konten teks biasa kartu. Teks yang terlalu panjang terpotong pada kata terakhir yang terputus dengan elipsis. Properti ini wajib ada kecuali image ada.

Properti ini memiliki batasan berikut:

  • Maksimum 15 baris tanpa gambar, atau 10 dengan image. Ini adalah sekitar 750 (tanpa gambar) atau 500 (dengan gambar). Perhatikan bahwa perangkat seluler memotong teks lebih awal daripada platform dengan layar yang lebih besar.
  • Teks tidak boleh berisi link.

Sebagian terbatas dari Markdown didukung:

  • Baris baru dengan spasi ganda diikuti dengan \n
  • **bold**
  • *italics*
image Image Opsional Gambar ditampilkan di kartu. Gambar dapat berupa JPG, PNG, dan GIF (animasi dan non-animasi).
image_fill ImageFill Opsional Batas antara kartu dan penampung gambar yang akan digunakan saat rasio aspek gambar tidak cocok dengan aspek penampung gambar rasio.
button Link Opsional Tombol yang menautkan pengguna ke URL saat diketuk. Tombol harus memiliki properti name yang berisi teks tombol, dan Properti url yang berisi URL link. Teks tombol mungkin tidak menyesatkan, dan akan diperiksa selama proses peninjauan.

Kode contoh

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."
      }
    }
  }
}

Kartu gambar

Kartu gambar dirancang untuk menjadi alternatif yang lebih sederhana daripada kartu dasar berisi gambar. Gunakan kartu gambar jika Anda ingin mempresentasikan gambar, dan minta tidak perlu teks pendukung atau komponen interaktif.

Properti

Jenis respons kartu gambar memiliki properti berikut:

Properti Jenis Persyaratan Deskripsi
url string Wajib URL sumber gambar. Gambar dapat berupa JPG, PNG, atau GIF (animasi dan non-animasi).
alt string Wajib Deskripsi teks dari gambar yang akan digunakan untuk aksesibilitas.
height int32 Opsional Tinggi gambar dalam piksel.
width int32 Opsional Lebar gambar dalam piksel.

Kode contoh

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."
      }
    }
  }
}

Kartu tabel

Kartu tabel memungkinkan Anda menampilkan data tabel dalam respons (misalnya, klasemen olahraga, hasil pemilu, dan penerbangan). Anda dapat menentukan kolom dan (masing-masing hingga 3 baris) yang ditampilkan Asisten di kartu tabel Anda. Anda juga bisa menentukan kolom dan baris tambahan, beserta prioritasnya.

Contoh kartu tabel di layar smart

Tabel menampilkan data statis dan tidak dapat berinteraksi. Untuk pemilihan interaktif gunakan respons pemilihan visual.

Properti

Jenis respons kartu tabel memiliki properti berikut:

Properti Jenis Persyaratan Deskripsi
title string Kondisional Judul teks polos pada tabel. Properti ini diperlukan jika subtitle disetel.
subtitle string Opsional Subtitel teks biasa pada tabel. Subtitel di kartu tabel tidak terpengaruh oleh penyesuaian tema.
columns array TableColumn Wajib Header dan perataan kolom. Setiap objek TableColumn menjelaskan {i>header<i} dan {i>alignment<i} kolom yang berbeda dalam tabel sementara.
rows array TableRow Wajib

Data baris pada tabel. Tiga baris pertama dijamin akan ditampilkan, tetapi yang lain mungkin tidak muncul di platform tertentu. Anda dapat mengujinya dengan simulator guna melihat baris mana yang ditampilkan untuk platform tertentu.

Setiap objek TableRow mendeskripsikan sel baris dalam tabel yang sama.
image Image Opsional Gambar yang terkait dengan tabel.
button Link Opsional Tombol yang menautkan pengguna ke URL saat diketuk. Tombol harus memiliki Properti name yang berisi teks tombol, dan Properti url yang berisi URL link. Teks tombol mungkin tidak menyesatkan, dan diperiksa selama proses peninjauan.

Kode contoh

Cuplikan berikut menunjukkan cara menerapkan kartu tabel:

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."
      }
    }
  }
}

Menyesuaikan respons Anda

Anda dapat mengubah tampilan respons lengkap dengan membuat tema kustom untuk project Action Anda. Penyesuaian ini dapat berguna untuk mendefinisikan tampilan dan nuansa percakapan saat pengguna memanggil Action Anda di permukaan dengan layar.

Untuk menetapkan tema respons kustom, lakukan hal berikut:

  1. Di Konsol Actions, buka Kembangkan > Penyesuaian tema.
  2. Tetapkan salah satu atau semua hal berikut:
    • Warna latar belakang: Digunakan sebagai latar belakang kartu. Secara umum, gunakan warna terang sebagai latar belakang agar konten kartu lebih mudah dibaca.
    • Warna utama: Warna utama untuk kartu Anda teks header dan antarmuka yang kurang penting. Secara umum, gunakan warna primer yang lebih gelap agar lebih kontras dengan warna latar belakang.
    • Jenis font: Menjelaskan jenis font yang digunakan untuk judul dan jenis font lainnya elemen teks yang menonjol.
    • Gaya sudut gambar: Mengubah tampilan kartu Anda sudut.
    • Gambar latar: Gambar kustom yang akan digunakan sebagai pengganti latar belakang {i>color<i}. Sediakan dua gambar berbeda saat perangkat permukaan berada mode lanskap atau potret. Jika Anda menggunakan gambar latar, warna diatur ke putih.
  3. Klik Simpan.
Menyesuaikan tema di Konsol Actions