پاسخ های غنی

پاسخ‌های غنی عناصر بصری را برای افزایش تعامل کاربر با 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 ظاهر پاسخ های غنی خود را تغییر دهید. این سفارشی‌سازی می‌تواند برای تعریف ظاهر و احساس منحصربه‌فرد به مکالمه مفید باشد، زمانی که کاربران اقدامات شما را روی سطحی با صفحه نمایش فراخوانی می‌کنند.

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

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

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