การตอบกลับแบบสมบูรณ์

การตอบสนองที่สมบูรณ์จะเพิ่มองค์ประกอบภาพเพื่อปรับปรุงการโต้ตอบของผู้ใช้กับการดำเนินการของคุณ คุณใช้ประเภทการตอบกลับริชมีเดียต่อไปนี้เป็นส่วนหนึ่งของข้อความแจ้งได้

• บัตรพื้นฐาน
• การ์ดรูปภาพ
• การ์ดตาราง

เมื่อกำหนดการตอบกลับริชมีเดีย ให้ใช้ตัวเลือกที่มีความสามารถแพลตฟอร์ม RICH_RESPONSE เพื่อให้ Google Assistant แสดงการตอบกลับริชมีเดียในอุปกรณ์ที่รองรับเท่านั้น คุณจะใช้การตอบกลับริชมีเดียได้เพียง 1 รายการต่อออบเจ็กต์ content ในข้อความแจ้ง

บัตรพื้นฐาน

การ์ดพื้นฐานได้รับการออกแบบมาให้กระชับ เพื่อนำเสนอข้อมูลสำคัญ (หรือสรุป) แก่ผู้ใช้ และเพื่อให้ผู้ใช้ดูข้อมูลเพิ่มเติมได้หากต้องการ (โดยใช้ลิงก์เว็บ)

ใช้การ์ดพื้นฐานเพื่อวัตถุประสงค์ในการแสดงผลเป็นหลัก เนื่องจากการ์ดไม่มีความสามารถในการโต้ตอบ ที่ไม่มีปุ่ม หากต้องการลิงก์ปุ่มกับเว็บ แพลตฟอร์มนั้นต้องมีฟังก์ชัน WEB_LINK ด้วย

พร็อพเพอร์ตี้

ประเภทการตอบสนองของการ์ดพื้นฐานมีพร็อพเพอร์ตี้ต่อไปนี้

รหัสตัวอย่าง

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

{
  "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"
          }
        }
      }
    }
  ]
}

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'
    })
  }));
});

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

การ์ดรูปภาพ

การ์ดรูปภาพออกแบบมาให้เป็นทางเลือกที่เรียบง่ายกว่าการ์ดพื้นฐานที่มีรูปภาพด้วย ใช้การ์ดรูปภาพเมื่อต้องการนำเสนอรูปภาพ และไม่จำเป็นต้องมีข้อความสนับสนุนหรือคอมโพเนนต์แบบอินเทอร์แอกทีฟ

พร็อพเพอร์ตี้

ประเภทการตอบสนองของการ์ดรูปภาพมีคุณสมบัติดังต่อไปนี้

รหัสตัวอย่าง

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'

{
  "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"
        }
      }
    }
  ]
}

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'
  }));
});

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

การ์ดตาราง

การ์ดตารางช่วยให้คุณแสดงข้อมูลตารางในการตอบกลับ (เช่น ผลคะแนนกีฬา ผลการเลือกตั้ง และเที่ยวบิน) คุณกำหนดคอลัมน์และแถว (สูงสุด 3 แถว) ที่ Assistant จะแสดงในการ์ดตารางได้ นอกจากนี้คุณยังสามารถกำหนดคอลัมน์และแถวเพิ่มเติม รวมถึงการจัดลำดับความสำคัญได้

ตารางแสดงข้อมูลคงที่และไม่สามารถโต้ตอบได้ สำหรับการตอบกลับการเลือกแบบอินเทอร์แอกทีฟ ให้ใช้การตอบกลับการเลือกภาพแทน

พร็อพเพอร์ตี้

ประเภทการตอบสนองของการ์ดตารางมีพร็อพเพอร์ตี้ต่อไปนี้

รหัสตัวอย่าง

ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีใช้การ์ดตาราง

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'

{
  "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"
          }
        }
      }
    }
  ]
}

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"
      }]
    }]
  }));
});

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

การปรับแต่งการตอบกลับ

คุณเปลี่ยนลักษณะของการตอบกลับที่มีริชมีเดียได้โดยสร้างธีมที่กำหนดเองสำหรับโปรเจ็กต์การดำเนินการของคุณ การปรับแต่งนี้มีประโยชน์สำหรับการกำหนดรูปลักษณ์และความรู้สึกที่เป็นเอกลักษณ์ของการสนทนาเมื่อผู้ใช้เรียกใช้การดำเนินการของคุณบนพื้นผิวด้วยหน้าจอ

หากต้องการตั้งค่าธีมการตอบกลับที่กำหนดเอง ให้ทำดังนี้

1. ในคอนโซลการดำเนินการ ให้ไปที่พัฒนา > การปรับแต่งธีม
2. ตั้งค่ารายการใดรายการหนึ่งหรือทั้งหมดต่อไปนี้
   • สีพื้นหลัง: ใช้เป็นพื้นหลังของการ์ด โดยทั่วไปจะใช้สีอ่อนสำหรับพื้นหลังเพื่อให้อ่านเนื้อหาของการ์ดได้ง่ายขึ้น
   • สีหลัก: สีหลักสำหรับข้อความส่วนหัวของการ์ดและองค์ประกอบอินเทอร์เฟซ โดยทั่วไป ให้ใช้สีหลักที่เข้มขึ้นเพื่อให้คอนทราสต์กับสีพื้นหลังได้ดียิ่งขึ้น
   • ชุดแบบอักษร: อธิบายประเภทแบบอักษรที่ใช้สำหรับชื่อและองค์ประกอบข้อความอื่นๆ ที่โดดเด่น
   • รูปแบบมุมของรูปภาพ: เปลี่ยนลักษณะของมุมการ์ด
   • ภาพพื้นหลัง: รูปภาพที่กำหนดเองเพื่อใช้แทนสีพื้นหลัง ใส่รูปภาพ 2 รูปที่ต่างกันสำหรับอุปกรณ์ที่วางพื้นผิวในโหมดแนวนอนหรือแนวตั้ง หากคุณใช้ภาพพื้นหลัง สีหลักจะตั้งค่าเป็นสีขาว
3. คลิกบันทึก