Respons lengkap

Respons yang lengkap menambahkan elemen visual untuk meningkatkan interaksi pengguna dengan Action Anda. Anda dapat menggunakan jenis respons multimedia berikut sebagai bagian dari prompt:

  • Kartu dasar
  • Kartu gambar
  • Kartu tabel

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

Kartu dasar

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

Gunakan kartu dasar terutama untuk tujuan tampilan, karena kartu tersebut tidak memiliki kemampuan interaksi tanpa tombol. Untuk menautkan tombol ke web, platform juga harus 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 menggunakan font dan ukuran tetap, dan karakter yang melewati baris pertama akan dipotong. Tinggi kartu diciutkan jika tidak ada judul yang ditentukan.
subtitle string Opsional Subtitel teks biasa pada kartu. Judul menggunakan font dan ukuran tetap, dan karakter yang melewati baris pertama akan dipotong. Tinggi kartu diciutkan jika tidak ada subtitel yang ditentukan.
text string Conditional

Konten teks biasa pada kartu. Teks yang terlalu panjang akan dipotong di pemisah kata terakhir dengan elipsis. Properti ini wajib ada kecuali jika image ada.

Properti ini memiliki batasan berikut:

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

Mendukung subset terbatas dari Markdown:

  • Baris baru dengan spasi ganda diikuti dengan \n
  • **bold**
  • *italics*
image Image Opsional Gambar yang 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 jika rasio aspek gambar tidak cocok dengan rasio aspek penampung gambar.
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 tidak boleh 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 yang juga berisi gambar. Gunakan kartu gambar jika Anda ingin menampilkan gambar, dan tidak perlu mendukung teks 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 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 baris (masing-masing hingga 3) yang ditampilkan Asisten di kartu tabel Anda. Anda juga dapat menentukan kolom dan baris tambahan, beserta prioritasnya.

Contoh kartu meja di layar smart

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

Properti

Jenis respons kartu tabel memiliki properti berikut:

Properti Jenis Persyaratan Deskripsi
title string Conditional Judul teks biasa pada tabel. Properti ini bersifat wajib jika subtitle ditetapkan.
subtitle string Opsional Subjudul teks biasa pada tabel. Subtitel dalam kartu tabel tidak terpengaruh oleh penyesuaian tema.
columns array TableColumn Wajib Header dan perataan kolom. Setiap objek TableColumn menjelaskan header dan perataan kolom yang berbeda dalam tabel yang sama.
rows array TableRow Wajib

Data baris dalam tabel. Tiga baris pertama dijamin akan ditampilkan, tetapi baris lainnya mungkin tidak muncul di platform tertentu. Anda dapat melakukan pengujian dengan simulator untuk melihat baris mana yang ditampilkan untuk platform tertentu.

Setiap objek TableRow mendeskripsikan sel dari baris yang berbeda 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 tidak boleh menyesatkan dan akan 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 menentukan tampilan dan nuansa unik pada percakapan saat pengguna memanggil Action di platform dengan layar.

Untuk menetapkan tema respons kustom, lakukan hal berikut:

  1. Di Actions console, buka Develop > Theme biasanya.
  2. Tetapkan salah satu atau semua hal berikut:
    • Warna latar belakang: Digunakan sebagai latar belakang kartu Anda. Secara umum, gunakan warna terang untuk latar belakang agar konten kartu lebih mudah dibaca.
    • Warna primer: Warna utama untuk teks header dan elemen antarmuka kartu Anda. 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 elemen teks penting lainnya.
    • Gaya sudut gambar: Mengubah tampilan sudut kartu.
    • Gambar latar belakang: Gambar kustom untuk digunakan sebagai pengganti warna latar belakang. Berikan dua gambar yang berbeda saat perangkat platform dalam mode lanskap atau potret. Jika Anda menggunakan gambar latar, warna utama disetel ke putih.
  3. Klik Simpan.
Menyesuaikan tema di konsol Actions