Tindakan Percakapan tidak akan digunakan lagi pada 13 Juni 2023. Untuk mengetahui informasi selengkapnya, lihat Penghentian Action Percakapan.

Respons lengkap

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

  • Kartu dasar
  • Kartu gambar
  • Kartu tabel

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

Kartu dasar

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

Gunakan kartu dasar terutama untuk tujuan tampilan, karena 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 Type Persyaratan Deskripsi
title string Opsional Judul teks biasa kartu. Judul menggunakan font dan ukuran yang tetap, dan karakter yang melewati baris pertama akan terpotong. Tinggi kartu diciutkan jika tidak ada judul yang ditentukan.
subtitle string Opsional Subtitel teks biasa pada kartu. Judul memiliki fon dan ukuran tetap, dan karakter yang melewati baris pertama akan terpotong. Tinggi kartu diciutkan jika tidak ada subtitel yang ditentukan.
text string Kondisional

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

Properti ini memiliki batasan berikut:

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

Subkumpulan Markdown terbatas 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 jika rasio lebar tinggi gambar tidak cocok dengan rasio lebar tinggi 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 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 didesain sebagai alternatif yang lebih sederhana dari kartu dasar yang juga berisi gambar. Gunakan kartu gambar saat Anda ingin menampilkan gambar, dan tidak memerlukan dukungan teks atau komponen interaktif.

Properti

Jenis respons kartu gambar memiliki properti berikut:

Properti Type 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 tabulasi 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 juga dapat menentukan kolom dan baris tambahan, beserta prioritasnya.

Contoh kartu tabel 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 Type Persyaratan Deskripsi
title string Kondisional 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 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 permukaan tertentu.

Setiap objek TableRow menjelaskan sel dari berbagai baris di tabel yang sama.

image Image Opsional Gambar yang terkait dengan tabel.
button Link Opsional Tombol yang menautkan pengguna ke URL saat diketuk. Tombol ini harus memiliki properti name yang berisi teks tombol, dan properti url yang berisi URL link. Teks tombol tidak boleh 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 yang kaya dengan membuat tema kustom untuk project Action Anda. Penyesuaian ini dapat berguna untuk menentukan tampilan dan nuansa unik pada percakapan saat pengguna memanggil Action Anda di platform dengan layar.

Untuk menetapkan tema respons kustom, lakukan hal berikut:

  1. Di konsol Actions, buka Mengembangkan > Penyesuaian tema.
  2. Tetapkan salah satu atau semua nilai berikut:
    • Warna latar belakang: Digunakan sebagai latar belakang kartu. Secara umum, gunakan warna terang untuk latar belakang agar konten kartu lebih mudah dibaca.
    • Warna utama: Warna utama untuk teks header dan elemen antarmuka kartu Anda. Secara umum, gunakan warna primer yang lebih gelap untuk lebih kontras dengan warna latar belakang.
    • Jenis font: Menjelaskan jenis font yang digunakan untuk judul dan elemen teks yang jelas lainnya.
    • Gaya sudut gambar: Mengubah tampilan sudut kartu Anda.
    • Gambar latar: Gambar kustom yang akan digunakan sebagai pengganti warna latar belakang. Berikan dua gambar yang berbeda saat perangkat platform berada dalam mode lanskap atau potret. Jika Anda menggunakan gambar latar, warna utama akan disetel ke putih.
  3. Klik Simpan.
Menyesuaikan tema di konsol Actions