پاسخ های غنی

پاسخ‌های غنی عناصر بصری را برای افزایش تعامل کاربر با Action شما اضافه می‌کنند. می توانید از انواع پاسخ غنی زیر به عنوان بخشی از یک درخواست استفاده کنید:

  • کارت پایه
  • کارت تصویر
  • کارت جدول

هنگام تعریف یک پاسخ غنی، از نامزدی با قابلیت سطح RICH_RESPONSE استفاده کنید تا «دستیار Google» فقط پاسخ غنی را در دستگاه‌های پشتیبانی شده برگرداند. شما فقط می توانید از یک پاسخ غنی برای هر شیء content در یک درخواست استفاده کنید.

کارت پایه

کارت‌های پایه به گونه‌ای طراحی شده‌اند که مختصر باشند، اطلاعات کلیدی (یا خلاصه) را به کاربران ارائه دهند و به کاربران اجازه دهند در صورت انتخاب (با استفاده از پیوند وب) بیشتر بیاموزند.

از کارت‌های اصلی عمدتاً برای نمایش استفاده کنید، زیرا بدون دکمه قابلیت تعامل ندارند. برای پیوند دادن یک دکمه به وب، یک سطح باید قابلیت WEB_LINK را نیز داشته باشد.

نمونه ای از یک کارت پایه در صفحه نمایش هوشمند

خواص

نوع پاسخ کارت پایه دارای ویژگی های زیر است:

ویژگی تایپ کنید مورد نیاز شرح
title رشته اختیاری عنوان متن ساده کارت عناوین دارای فونت و اندازه ثابت هستند و کاراکترهای گذشته از خط اول کوتاه شده اند. اگر عنوانی مشخص نشده باشد، ارتفاع کارت جمع می شود.
subtitle رشته اختیاری زیرنویس متنی ساده کارت. عناوین دارای فونت و اندازه ثابت هستند و کاراکترهای گذشته از خط اول کوتاه شده اند. اگر زیرنویسی مشخص نشده باشد، ارتفاع کارت جمع می‌شود.
text رشته مشروط

محتوای متن ساده کارت. متنی که خیلی طولانی است در شکستن آخرین کلمه با بیضی کوتاه می شود. این ویژگی مورد نیاز است مگر اینکه image وجود داشته باشد.

این ملک دارای محدودیت های زیر است:

  • حداکثر 15 خط بدون تصویر یا 10 خط با image . این تقریباً 750 (بدون تصویر) یا 500 (با تصویر) کاراکتر است. توجه داشته باشید که دستگاه های تلفن همراه زودتر از سطوح با صفحه نمایش بزرگتر، متن را کوتاه می کنند.
  • متن نباید حاوی پیوند باشد.

زیر مجموعه محدودی از Markdown پشتیبانی می شود:

  • خط جدید با فاصله دو برابر به دنبال \n
  • **bold**
  • *italics*
image Image اختیاری تصویر نمایش داده شده در کارت تصاویر می توانند JPG، PNG و GIF (متحرک و غیر متحرک) باشند.
image_fill ImageFill اختیاری مرز بین کارت و محفظه تصویر برای استفاده زمانی که نسبت تصویر با نسبت تصویر ظرف تصویر مطابقت ندارد.
button Link اختیاری دکمه ای که کاربر را با ضربه زدن به یک URL پیوند می دهد. دکمه باید دارای یک ویژگی name باشد که حاوی متن دکمه باشد و یک ویژگی url که حاوی URL پیوند باشد. متن دکمه ممکن است گمراه کننده نباشد و در طول فرآیند بررسی بررسی می شود.

کد نمونه

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

کارت های تصویری

کارت‌های تصویری به‌گونه‌ای طراحی شده‌اند که جایگزین ساده‌تری برای کارت‌های اصلی باشند که حاوی تصویر نیز هستند. هنگامی که می خواهید تصویری را ارائه دهید، از کارت تصویر استفاده کنید و نیازی به پشتیبانی از متن یا اجزای تعاملی ندارید.

خواص

نوع پاسخ کارت تصویر دارای ویژگی های زیر است:

ویژگی تایپ کنید مورد نیاز شرح
url رشته ضروری آدرس منبع تصویر تصاویر می توانند JPG، PNG یا GIF (متحرک و غیر متحرک) باشند.
alt رشته ضروری توضیح متنی تصویری که برای دسترسی استفاده می شود.
height int32 اختیاری ارتفاع تصویر بر حسب پیکسل
width int32 اختیاری عرض تصویر بر حسب پیکسل

کد نمونه

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

کارت های میز

کارت های جدول به شما این امکان را می دهند که داده های جدولی را در پاسخ خود نمایش دهید (به عنوان مثال، جدول رده بندی، نتایج انتخابات، و پروازها). می‌توانید ستون‌ها و ردیف‌هایی را (حداکثر ۳ تا) که Assistant در کارت جدول شما نشان می‌دهد تعریف کنید. همچنین می توانید ستون ها و ردیف های اضافی را به همراه اولویت بندی آنها تعریف کنید.

نمونه ای از کارت میز روی نمایشگر هوشمند

جداول داده های ثابت را نمایش می دهند و قابل تعامل نیستند. برای پاسخ های انتخاب تعاملی، به جای آن از یک پاسخ انتخاب بصری استفاده کنید.

خواص

نوع پاسخ کارت جدول دارای ویژگی های زیر است:

ویژگی تایپ کنید مورد نیاز شرح
title رشته مشروط عنوان متن ساده جدول. اگر subtitle تنظیم شده باشد، این ویژگی لازم است.
subtitle رشته اختیاری زیرنویس متن ساده جدول. زیرنویس‌های موجود در کارت‌های جدول تحت تأثیر سفارشی‌سازی موضوع قرار نمی‌گیرند.
columns آرایه TableColumn ضروری سرصفحه ها و تراز ستون ها. هر شی TableColumn سرصفحه و تراز ستون های مختلف را در همان جدول توصیف می کند.
rows آرایه TableRow ضروری

داده های ردیف جدول نمایش 3 ردیف اول تضمین شده است، اما سایر ردیف‌ها ممکن است روی سطوح خاصی ظاهر نشوند. می توانید با شبیه ساز تست کنید تا ببینید کدام ردیف برای یک سطح مشخص نشان داده شده است.

هر شی TableRow سلول های یک ردیف مختلف را در همان جدول توصیف می کند.

image Image اختیاری تصویر مرتبط با جدول
button Link اختیاری دکمه ای که کاربر را با ضربه زدن به یک URL پیوند می دهد. دکمه باید دارای یک ویژگی name باشد که حاوی متن دکمه باشد و یک ویژگی url که حاوی URL پیوند باشد. متن دکمه ممکن است گمراه کننده نباشد و در طول فرآیند بررسی بررسی می شود.

کد نمونه

تکه‌های زیر نحوه پیاده‌سازی کارت جدول را نشان می‌دهند:

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

سفارشی کردن پاسخ های خود

می توانید با ایجاد یک تم سفارشی برای پروژه Actions ظاهر پاسخ های غنی خود را تغییر دهید. این سفارشی‌سازی می‌تواند برای تعریف ظاهر و احساس منحصربه‌فرد به مکالمه مفید باشد، زمانی که کاربران اقدامات شما را روی سطحی با صفحه نمایش فراخوانی می‌کنند.

برای تنظیم یک تم پاسخ سفارشی، موارد زیر را انجام دهید:

  1. در کنسول Actions ، به Develop > Theme customization بروید.
  2. یک یا همه موارد زیر را تنظیم کنید:
    • رنگ پس زمینه : به عنوان پس زمینه کارت های شما استفاده می شود. به طور کلی، از رنگ روشن برای پس زمینه استفاده کنید تا محتوای کارت خوانا شود.
    • رنگ اصلی : رنگ اصلی برای متون هدر کارت و عناصر رابط. به طور کلی برای تضاد بهتر با رنگ پس زمینه از رنگ اصلی تیره استفاده کنید.
    • خانواده فونت : نوع فونت مورد استفاده برای عناوین و سایر عناصر متن برجسته را توصیف می کند.
    • سبک گوشه تصویر : ظاهر گوشه های کارت شما را تغییر می دهد.
    • تصویر پس زمینه : تصویر سفارشی برای استفاده به جای رنگ پس زمینه. برای زمانی که دستگاه سطح در حالت افقی یا عمودی است، دو تصویر متفاوت ارائه دهید. اگر از تصویر پس زمینه استفاده می کنید، رنگ اصلی روی سفید تنظیم می شود.
  3. روی ذخیره کلیک کنید.
سفارشی کردن تم در کنسول Actions