Zengin yanıtlar (Dialogflow)

Dialogflow'da keşfet

Yanıt örneğimizi Dialogflow'a aktarmak için Devam'ı tıklayın. Ardından örneği dağıtmak ve test etmek için aşağıdaki adımları uygulayın:

  1. Bir temsilci adı girin ve örnek için yeni bir Dialogflow aracısı oluşturun.
  2. Temsilci içe aktarma işlemini tamamladıktan sonra Temsilciye git'i tıklayın.
  3. Ana gezinme menüsünden Karşılama'ya gidin.
  4. Satır İçi Düzenleyici'yi etkinleştirin ve ardından Dağıt'ı tıklayın. Düzenleyici, örnek kodu içerir.
  5. Ana gezinme menüsünden Entegrasyonlar'a gidin ve Google Asistan'ı tıklayın.
  6. Görüntülenen kalıcı pencerede, Değişiklikleri otomatik önizleme'yi etkinleştirin ve İşlem simülatörünü açmak için Test et'i tıklayın.
  7. Örneği test etmek için simülasyon aracında Talk to my test app ifadesini girin.
Devam

İşleminizle kullanıcı etkileşimlerini iyileştirmek için görsel öğeler görüntülemek istiyorsanız zengin yanıt kullanın. Bu görsel öğeler bir iletişimin nasıl devam edileceğine dair ipuçları sağlayabilir.

Zengin yanıtlar, yalnızca ekran veya sesli ve ekran deneyimlerinde görünebilir. Aşağıdaki bileşenleri içerebilirler:

Bu görsel öğeleri İşleminize nasıl ekleyeceğinizi öğrenmek için görüşme tasarımı yönergelerimizi de inceleyebilirsiniz.

Özellikler

Zengin yanıtlar, aşağıdaki gereksinimlere ve yapılandırabileceğiniz isteğe bağlı özelliklere sahiptir:

  • actions.capability.SCREEN_OUTPUT özelliğine sahip yüzeylerde desteklenir.
  • Zengin yanıttaki ilk öğe basit bir yanıt olmalıdır.
  • En fazla iki basit yanıt.
  • En fazla bir temel kart veya StructuredResponse.
  • En fazla 8 öneri çipi.
  • Öneri çiplerine FinalResponse içinde izin verilmez
  • Akıllı ekranlardan web'e bağlantı oluşturma şu anda desteklenmiyor.

Aşağıdaki bölümlerde, çeşitli zengin yanıt türlerinin nasıl oluşturulacağı gösterilmektedir.

Temel kart

Şekil 1. Temel kart örneği (akıllı telefon)

Temel kart, aşağıdakileri içerebilecek bilgileri gösterir:

  • Resim
  • Başlık
  • Alt başlık
  • Metin gövdesi
  • Bağlan Düğmesi
  • Sınır

Temel kartları genellikle görüntüleme amacıyla kullanmak. Kısa ve öz olacak şekilde, kullanıcılara önemli (veya özet) bilgiler sunmak ve seçerseniz (bir web bağlantısı kullanarak) kullanıcıların daha fazla bilgi edinmesini sağlamak için tasarlanmıştır.

Çoğu durumda, sohbeti devam ettirmek veya özetlemek için kartların altına öneri çipleri eklemeniz gerekir.

Kartta gösterilen bilgileri ne pahasına olursa olsun, sohbet balonunda tekrar etmekten kaçının.

Özellikler

Temel kart yanıt türü, aşağıdaki gereksinimlere ve yapılandırabileceğiniz isteğe bağlı özelliklere sahiptir:

  • actions.capability.SCREEN_OUTPUT özelliğine sahip yüzeylerde desteklenir.
  • Biçimlendirilmiş metin (resim yoksa gereklidir)
    • Varsayılan olarak düz metin.
    • Bağlantı içermemelidir.
    • Resimle 10 satır, resim olmadan en fazla 15 satır. Bu, yaklaşık 500 (resimli) veya 750 (resimsiz) karakterdir. Daha küçük ekranlı telefonlar da metinleri büyük ekranlı telefonlardan önce kısaltır. Metin çok fazla satır içeriyorsa son kelime sonunda üç noktayla kesilir.
    • Sınırlı bir Markdown alt kümesi desteklenir:
      • Çift boşluk içeren yeni satır ve ardından \n
      • **bold**
      • *italics*
  • Resim (biçimlendirilmiş metin yoksa gereklidir)
    • Tüm resimler 192 dp yüksekliğinde olmaya zorlandı.
    • Resmin en boy oranı ekrandan farklıysa yatay veya dikey kenarlarında gri çubuklarla ortalanır.
    • Resim kaynağı bir URL.
    • Hareketli GIF'lere izin verilir.

İsteğe bağlı

  • Başlık
    • Düz metin.
    • Yazı tipi ve boyutu sabitlendi.
    • En fazla bir satır; fazladan karakterler kısaltılır.
    • Başlık belirtilmezse kart yüksekliği daraltılır.
  • Alt başlık
    • Düz metin.
    • Yazı tipi ve yazı tipi boyutu düzeltildi.
    • En fazla bir satır; fazladan karakterler kısaltılır.
    • Alt başlık belirtilmezse kart yüksekliği daraltılır.
  • Bağlantı düğmesi
    • Bağlantı başlığı zorunludur
    • En fazla bir bağlantı
    • Geliştiricinin alanı dışındaki sitelere yönlendiren bağlantılara izin verilir.
    • Bağlantı metni yanıltıcı olamaz. Bu bilgi, onay sürecinde kontrol edilir.
    • Temel kart, bağlantı olmadan etkileşim özelliklerine sahip değildir. Bağlantıya dokunulduğunda kullanıcı bağlantıya yönlendirilir ancak kartın ana gövdesi devre dışı kalır.
  • Kenarlık
    • Kart ile resim kapsayıcısı arasındaki kenarlık, temel kartınızın sunumunu özelleştirmek için ayarlanabilir.
    • JSON dizesi özelliği ayarlanarak yapılandırılır imageDisplayOptions
Şekil 2. Temel kart örneği (akıllı ekran)

Örnek kod

Node.js

app.intent('Basic Card', (conv) => {
  if (!conv.screen) {
    conv.ask('Sorry, try this on a screen device or select the ' +
      'phone surface in the simulator.');
    conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask(`Here's an example of a basic card.`);
  conv.ask(new BasicCard({
    text: `This is a basic card.  Text in a basic card can include "quotes" and
    most other unicode characters including emojis.  Basic cards also support
    some markdown formatting like *emphasis* or _italics_, **strong** or
    __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
    things like line  \nbreaks`, // Note the two spaces before '\n' required for
                                 // a line break to be rendered in the card.
    subtitle: 'This is a subtitle',
    title: 'Title: this is a title',
    buttons: new Button({
      title: 'This is a button',
      url: 'https://assistant.google.com/',
    }),
    image: new Image({
      url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
      alt: 'Image alternate text',
    }),
    display: 'CROPPED',
  }));
  conv.ask('Which response would you like to see next?');
});
index.js

Java

@ForIntent("Basic Card")
public ActionResponse basicCard(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
    return responseBuilder
        .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  // Prepare formatted text for card
  String text =
      "This is a basic card.  Text in a basic card can include \"quotes\" and\n"
          + "  most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n"
          + "  some markdown formatting like *emphasis* or _italics_, **strong** or\n"
          + "  __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n"
          + "  things like line  \\nbreaks"; // Note the two spaces before '\n' required for
  // a line break to be rendered in the card.
  responseBuilder
      .add("Here's an example of a basic card.")
      .add(
          new BasicCard()
              .setTitle("Title: this is a title")
              .setSubtitle("This is a subtitle")
              .setFormattedText(text)
              .setImage(
                  new Image()
                      .setUrl(
                          "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                      .setAccessibilityText("Image alternate text"))
              .setImageDisplayOptions("CROPPED")
              .setButtons(
                  new ArrayList<Button>(
                      Arrays.asList(
                          new Button()
                              .setTitle("This is a Button")
                              .setOpenUrlAction(
                                  new OpenUrlAction().setUrl("https://assistant.google.com"))))))
      .add("Which response would you like to see next?");

  return responseBuilder.build();
}
MyActionsApp.java

Node.js

if (!conv.screen) {
  conv.ask('Sorry, try this on a screen device or select the ' +
    'phone surface in the simulator.');
  conv.ask('Which response would you like to see next?');
  return;
}

conv.ask(`Here's an example of a basic card.`);
conv.ask(new BasicCard({
  text: `This is a basic card.  Text in a basic card can include "quotes" and
  most other unicode characters including emojis.  Basic cards also support
  some markdown formatting like *emphasis* or _italics_, **strong** or
  __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
  things like line  \nbreaks`, // Note the two spaces before '\n' required for
                               // a line break to be rendered in the card.
  subtitle: 'This is a subtitle',
  title: 'Title: this is a title',
  buttons: new Button({
    title: 'This is a button',
    url: 'https://assistant.google.com/',
  }),
  image: new Image({
    url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
    alt: 'Image alternate text',
  }),
  display: 'CROPPED',
}));
conv.ask('Which response would you like to see next?');
index.js

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
  return responseBuilder
      .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

// Prepare formatted text for card
String text =
    "This is a basic card.  Text in a basic card can include \"quotes\" and\n"
        + "  most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n"
        + "  some markdown formatting like *emphasis* or _italics_, **strong** or\n"
        + "  __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n"
        + "  things like line  \\nbreaks"; // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
responseBuilder
    .add("Here's an example of a basic card.")
    .add(
        new BasicCard()
            .setTitle("Title: this is a title")
            .setSubtitle("This is a subtitle")
            .setFormattedText(text)
            .setImage(
                new Image()
                    .setUrl(
                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                    .setAccessibilityText("Image alternate text"))
            .setImageDisplayOptions("CROPPED")
            .setButtons(
                new ArrayList<Button>(
                    Arrays.asList(
                        new Button()
                            .setTitle("This is a Button")
                            .setOpenUrlAction(
                                new OpenUrlAction().setUrl("https://assistant.google.com"))))))
    .add("Which response would you like to see next?");

return responseBuilder.build();
MyActionsApp.java

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "Here's an example of a basic card."
            }
          },
          {
            "basicCard": {
              "title": "Title: this is a title",
              "subtitle": "This is a subtitle",
              "formattedText": "This is a basic card.  Text in a basic card can include \"quotes\" and\n    most other unicode characters including emojis.  Basic cards also support\n    some markdown formatting like *emphasis* or _italics_, **strong** or\n    __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n    things like line  \nbreaks",
              "image": {
                "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                "accessibilityText": "Image alternate text"
              },
              "buttons": [
                {
                  "title": "This is a button",
                  "openUrlAction": {
                    "url": "https://assistant.google.com/"
                  }
                }
              ],
              "imageDisplayOptions": "CROPPED"
            }
          },
          {
            "simpleResponse": {
              "textToSpeech": "Which response would you like to see next?"
            }
          }
        ]
      }
    }
  }
}

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "Here's an example of a basic card."
              }
            },
            {
              "basicCard": {
                "title": "Title: this is a title",
                "subtitle": "This is a subtitle",
                "formattedText": "This is a basic card.  Text in a basic card can include \"quotes\" and\n    most other unicode characters including emojis.  Basic cards also support\n    some markdown formatting like *emphasis* or _italics_, **strong** or\n    __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n    things like line  \nbreaks",
                "image": {
                  "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                  "accessibilityText": "Image alternate text"
                },
                "buttons": [
                  {
                    "title": "This is a button",
                    "openUrlAction": {
                      "url": "https://assistant.google.com/"
                    }
                  }
                ],
                "imageDisplayOptions": "CROPPED"
              }
            },
            {
              "simpleResponse": {
                "textToSpeech": "Which response would you like to see next?"
              }
            }
          ]
        }
      }
    }
  ]
}
Şekil 3. Tarama bandı örneği (akıllı telefon)

Göz atma bandı, kullanıcıların dikey olarak kaydırmalarına ve koleksiyondaki bir parçayı seçmelerine olanak tanıyan zengin bir yanıttır. Tarama bantları, seçilen parçanın bir web tarayıcısında (veya tüm bölümler AMP özellikliyse bir AMP tarayıcısında) açılarak web içeriği için özel olarak tasarlanmıştır. Göz atma bandı, daha sonra göz atmak için kullanıcının Asistan yüzeyinde de kalır.

Özellikler

Göz atma bandı yanıt türü, yapılandırabileceğiniz aşağıdaki gereksinimlere ve isteğe bağlı özelliklere sahiptir:

  • Hem actions.capability.SCREEN_OUTPUT hem de actions.capability.WEB_BROWSER özelliklerine sahip yüzeylerde desteklenir. Bu yanıt türü, şu anda akıllı ekranlarda kullanılamamaktadır.
  • Banda göz atma
    • En fazla on karo.
    • En az iki karo.
    • Banttaki karoların tümü web içeriğine bağlantı vermelidir (AMP içeriği önerilir).
      • Kullanıcının bir AMP görüntüleyiciye yönlendirilmesi için AMP içerik karolarındaki urlHintType, "AMP_CONTENT" olarak ayarlanmalıdır.
  • Bant karolara göz atma
    • Karo tutarlılığı (gerekli):
      • Göz atma bandındaki tüm karolar aynı bileşenlere sahip olmalıdır. Örneğin, bir karoda resim alanı varsa banttaki geri kalan karoların da resim alanları olmalıdır.
      • Tarama bandındaki tüm karolar AMP özellikli içeriğe bağlantı veriyorsa kullanıcı, ek işlevleri olan bir AMP tarayıcısına yönlendirilir. Herhangi bir karo AMP olmayan içeriğe bağlantı veriyorsa tüm kutular kullanıcıları bir web tarayıcısına yönlendirir.
    • Resim (isteğe bağlı)
      • Resmin 128 dp yüksekliği x 232 dp genişliğinde olması zorunlu kılındı.
      • Resmin en boy oranı resim sınırlayıcı kutuyla eşleşmiyorsa resim her iki tarafta çubuklarla ortalanır. Akıllı telefonlarda, resim köşeleri yuvarlatılmış bir karenin merkezindedir.
      • Resim bağlantısı bozuksa bunun yerine yer tutucu resim kullanılır.
      • Bir resimde alternatif metin kullanılması gerekiyor.
    • Başlık (zorunlu)
      • Temel metin kartıyla aynı biçimlendirme seçenekleri.
      • Başlıklar benzersiz olmalıdır (ses seçimini desteklemek için).
      • Maksimum iki satırlık metin.
      • Yazı tipi boyutu 16 sp.
    • Açıklama (isteğe bağlı)
      • Temel metin kartıyla aynı biçimlendirme seçenekleri.
      • En fazla dört satır metin.
      • Üç nokta (...) ile kısaltılır
      • Yazı tipi boyutu 14 sp, gri renk.
    • Altbilgi (isteğe bağlı)
      • Yazı tipi ve yazı tipi boyutu düzeltildi.
      • En fazla bir satır metin.
      • Üç nokta (...) ile kısaltılır
      • En alta sabitlendiğinden, daha az gövde metni satırı içeren karolarda alt metnin üzerinde beyaz alan olabilir.
      • Yazı tipi boyutu 14 sp, gri renk.
  • Etkileşim
    • Kullanıcı, ekranı dikey olarak kaydırarak öğeleri görüntüleyebilir.
    • Karta dokunma: Bir öğeye dokunulduğunda, kullanıcı bir tarayıcıya yönlendirilir ve bağlı sayfa görüntülenir.
  • Ses girişi
    • Mikrofon davranışı
      • Kullanıcıya göz atma bandı gönderildiğinde mikrofon yeniden açılmıyor.
      • Kullanıcı yine de mikrofona dokunarak veya Asistan'ı ("Ok Google") çağırarak mikrofonu yeniden açabilir.

Yönerge

Varsayılan olarak, bir göz atma bandı gönderildikten sonra mikrofon kapalı kalır. Görüşmeye daha sonra devam etmek istiyorsanız bandın altına öneri çipleri eklemenizi önemle tavsiye ederiz.

Listede sunulan seçenekleri hiçbir zaman öneri çipi olarak tekrarlamayın. Bu bağlamdaki çipler, konuşmanın yönünü değiştirmek için kullanılır (seçim seçimi için değil).

Listelerde olduğu gibi, bant kartına eşlik eden sohbet balonu, sesin bir alt kümesidir (TTS/SSML). Buradaki ses (TTS/SSML), banttaki ilk karoyu entegre eder. Ayrıca banttaki tüm öğelerin okunmasını kesinlikle önermeyiz. İlk öğeyi ve orada bulunma nedenini (örneğin, en popüler, en son satın alınan, en çok konuşulan) bahsetmek en iyisidir.

Örnek kod

app.intent('Browsing Carousel', (conv) => {
  if (!conv.screen
    || !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) {
    conv.ask('Sorry, try this on a phone or select the ' +
      'phone surface in the simulator.');
      conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask(`Here's an example of a browsing carousel.`);
  conv.ask(new BrowseCarousel({
    items: [
      new BrowseCarouselItem({
        title: 'Title of item 1',
        url: 'https://example.com',
        description: 'Description of item 1',
        image: new Image({
          url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
          alt: 'Image alternate text',
        }),
        footer: 'Item 1 footer',
      }),
      new BrowseCarouselItem({
        title: 'Title of item 2',
        url: 'https://example.com',
        description: 'Description of item 2',
        image: new Image({
          url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
          alt: 'Image alternate text',
        }),
        footer: 'Item 2 footer',
      }),
    ],
  }));
});
index.js
@ForIntent("Browsing Carousel")
public ActionResponse browseCarousel(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())
      || !request.hasCapability(Capability.WEB_BROWSER.getValue())) {
    return responseBuilder
        .add("Sorry, try this on a phone or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("Here's an example of a browsing carousel.")
      .add(
          new CarouselBrowse()
              .setItems(
                  new ArrayList<CarouselBrowseItem>(
                      Arrays.asList(
                          new CarouselBrowseItem()
                              .setTitle("Title of item 1")
                              .setDescription("Description of item 1")
                              .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
                              .setImage(
                                  new Image()
                                      .setUrl(
                                          "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                      .setAccessibilityText("Image alternate text"))
                              .setFooter("Item 1 footer"),
                          new CarouselBrowseItem()
                              .setTitle("Title of item 2")
                              .setDescription("Description of item 2")
                              .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
                              .setImage(
                                  new Image()
                                      .setUrl(
                                          "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                      .setAccessibilityText("Image alternate text"))
                              .setFooter("Item 2 footer")))));

  return responseBuilder.build();
}
MyActionsApp.java
if (!conv.screen
  || !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) {
  conv.ask('Sorry, try this on a phone or select the ' +
    'phone surface in the simulator.');
    conv.ask('Which response would you like to see next?');
  return;
}

conv.ask(`Here's an example of a browsing carousel.`);
conv.ask(new BrowseCarousel({
  items: [
    new BrowseCarouselItem({
      title: 'Title of item 1',
      url: 'https://example.com',
      description: 'Description of item 1',
      image: new Image({
        url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
        alt: 'Image alternate text',
      }),
      footer: 'Item 1 footer',
    }),
    new BrowseCarouselItem({
      title: 'Title of item 2',
      url: 'https://example.com',
      description: 'Description of item 2',
      image: new Image({
        url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
        alt: 'Image alternate text',
      }),
      footer: 'Item 2 footer',
    }),
  ],
}));
index.js
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())
    || !request.hasCapability(Capability.WEB_BROWSER.getValue())) {
  return responseBuilder
      .add("Sorry, try this on a phone or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("Here's an example of a browsing carousel.")
    .add(
        new CarouselBrowse()
            .setItems(
                new ArrayList<CarouselBrowseItem>(
                    Arrays.asList(
                        new CarouselBrowseItem()
                            .setTitle("Title of item 1")
                            .setDescription("Description of item 1")
                            .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Image alternate text"))
                            .setFooter("Item 1 footer"),
                        new CarouselBrowseItem()
                            .setTitle("Title of item 2")
                            .setDescription("Description of item 2")
                            .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Image alternate text"))
                            .setFooter("Item 2 footer")))));

return responseBuilder.build();
MyActionsApp.java

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "Here's an example of a browsing carousel."
            }
          },
          {
            "carouselBrowse": {
              "items": [
                {
                  "title": "Title of item 1",
                  "openUrlAction": {
                    "url": "https://example.com"
                  },
                  "description": "Description of item 1",
                  "footer": "Item 1 footer",
                  "image": {
                    "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                    "accessibilityText": "Image alternate text"
                  }
                },
                {
                  "title": "Title of item 2",
                  "openUrlAction": {
                    "url": "https://example.com"
                  },
                  "description": "Description of item 2",
                  "footer": "Item 2 footer",
                  "image": {
                    "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                    "accessibilityText": "Image alternate text"
                  }
                }
              ]
            }
          }
        ]
      }
    }
  }
}

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "Here's an example of a browsing carousel."
              }
            },
            {
              "carouselBrowse": {
                "items": [
                  {
                    "description": "Description of item 1",
                    "footer": "Item 1 footer",
                    "image": {
                      "accessibilityText": "Image alternate text",
                      "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png"
                    },
                    "openUrlAction": {
                      "url": "https://example.com"
                    },
                    "title": "Title of item 1"
                  },
                  {
                    "description": "Description of item 2",
                    "footer": "Item 2 footer",
                    "image": {
                      "accessibilityText": "Image alternate text",
                      "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png"
                    },
                    "openUrlAction": {
                      "url": "https://example.com"
                    },
                    "title": "Title of item 2"
                  }
                ]
              }
            }
          ]
        }
      },
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ]
    }
  ]
}

Seçili öğe işleniyor

Bant tarayıcı aktarımını gerçekleştirdiğinden, göz atma bandı öğeleriyle kullanıcı etkileşimleri için takip karşılama gerekli değildir. Kullanıcı, göz atma bandı öğesiyle etkileşimde bulunduktan sonra mikrofonun yeniden açılmayacağını unutmayın. Bu nedenle, görüşmeyi sonlandırmanız veya yukarıdaki talimatlara göre yanıtınıza öneri çipleri eklemeniz gerekir.

Öneri çipleri

Şekil 4. Öneri çipleri örneği (akıllı telefon)

Yanıtlarla ilgili ipucu vermek için öneri çiplerini kullanarak konuşmayı sürdürün veya değiştirin. Görüşme sırasında birincil bir harekete geçirici mesaj varsa bunu ilk öneri çipi olarak listelemeyi düşünün.

Mümkünse sohbet balonunun bir parçası olarak tek bir temel öneriyi dahil etmelisiniz. Ancak bunu yalnızca yanıtın ya da sohbet görüşmesinin doğal karşılandığı durumlarda yapın.

Özellikler

Öneri çipleri aşağıdaki gereksinimlere ve yapılandırabileceğiniz isteğe bağlı özelliklere sahiptir:

  • actions.capability.SCREEN_OUTPUT özelliğine sahip yüzeylerde desteklenir.
  • Öneri çiplerini web'e bağlamak için yüzeylerde actions.capability.WEB_BROWSER özelliği de bulunmalıdır. Bu özellik şu anda akıllı ekranlarda kullanılamıyor.
  • En fazla sekiz çip.
  • Maksimum metin uzunluğu 25 karakterdir.

  • Yalnızca düz metni destekler.

Şekil 5. Öneri çipleri örneği (akıllı ekran)

Örnek kod

Node.js

app.intent('Suggestion Chips', (conv) => {
  if (!conv.screen) {
    conv.ask('Chips can be demonstrated on screen devices.');
    conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask('These are suggestion chips.');
  conv.ask(new Suggestions('Suggestion 1'));
  conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3']));
  conv.ask(new LinkOutSuggestion({
    name: 'Suggestion Link',
    url: 'https://assistant.google.com/',
  }));
  conv.ask('Which type of response would you like to see next?'); ;
});
index.js

Java

@ForIntent("Suggestion Chips")
public ActionResponse suggestionChips(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
    return responseBuilder
        .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("These are suggestion chips.")
      .addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"})
      .add(
          new LinkOutSuggestion()
              .setDestinationName("Suggestion Link")
              .setUrl("https://assistant.google.com/"))
      .add("Which type of response would you like to see next?");
  return responseBuilder.build();
}
MyActionsApp.java

Node.js

if (!conv.screen) {
  conv.ask('Chips can be demonstrated on screen devices.');
  conv.ask('Which response would you like to see next?');
  return;
}

conv.ask('These are suggestion chips.');
conv.ask(new Suggestions('Suggestion 1'));
conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3']));
conv.ask(new LinkOutSuggestion({
  name: 'Suggestion Link',
  url: 'https://assistant.google.com/',
}));
conv.ask('Which type of response would you like to see next?');
index.js

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
  return responseBuilder
      .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("These are suggestion chips.")
    .addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"})
    .add(
        new LinkOutSuggestion()
            .setDestinationName("Suggestion Link")
            .setUrl("https://assistant.google.com/"))
    .add("Which type of response would you like to see next?");
return responseBuilder.build();
MyActionsApp.java

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "These are suggestion chips."
            }
          },
          {
            "simpleResponse": {
              "textToSpeech": "Which type of response would you like to see next?"
            }
          }
        ],
        "suggestions": [
          {
            "title": "Suggestion 1"
          },
          {
            "title": "Suggestion 2"
          },
          {
            "title": "Suggestion 3"
          }
        ],
        "linkOutSuggestion": {
          "destinationName": "Suggestion Link",
          "url": "https://assistant.google.com/"
        }
      }
    }
  }
}

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "These are suggestion chips."
              }
            },
            {
              "simpleResponse": {
                "textToSpeech": "Which type of response would you like to see next?"
              }
            }
          ],
          "suggestions": [
            {
              "title": "Suggestion 1"
            },
            {
              "title": "Suggestion 2"
            },
            {
              "title": "Suggestion 3"
            }
          ],
          "linkOutSuggestion": {
            "destinationName": "Suggestion Link",
            "url": "https://assistant.google.com/"
          }
        }
      }
    }
  ]
}

Medya yanıtları

Şekil 6. Medya yanıtı örneği (akıllı telefon)

Medya yanıtları, İşlemlerinizin SSML'nin 240 saniyelik sınırından uzun oynatma süresi olan ses içeriklerini oynatmasına olanak tanır. Medya yanıtının birincil bileşeni tek müzikli karttır. Kart, kullanıcının şu işlemleri yapmasına olanak tanır:

  • Son 10 saniyeyi tekrar oynatın.
  • 30 saniye ileri atla.
  • Medya içeriğinin toplam uzunluğunu görüntüleyin.
  • Ses çalma için ilerleme durumu göstergesini görüntüleyin.
  • Geçen oynatma süresini görüntüleyin.

Medya yanıtları, sesli etkileşim için aşağıdaki ses kontrollerini destekler:

  • "Ok Google, oynat."
  • "Ok Google, duraklat."
  • "Ok Google, durdur."
  • "Ok Google, baştan başla."

Kullanıcılar "Ok Google, sesi aç." veya "Ok Google, sesi yüzde 50'ye ayarla" gibi ifadeler kullanarak da ses seviyesini kontrol edebilirler. İşleminizdeki amaçlar benzer eğitim ifadeleri kullanıyorsa önceliklidir. İşleminizin özel bir nedeni yoksa Asistan'ın bu kullanıcı isteklerini yerine getirmesine izin verin.

Özellikler

Medya yanıtları, aşağıdaki gereksinimlere ve yapılandırabileceğiniz isteğe bağlı özelliklere sahiptir:

  • actions.capability.MEDIA_RESPONSE_AUDIO özelliğine sahip yüzeylerde desteklenir.
  • Çalınacak ses, doğru biçimlendirilmiş bir .mp3 dosyasında olmalıdır. Canlı yayın desteklenmez.
  • Oynatmaya ilişkin medya dosyası HTTPS URL'si olarak belirtilmelidir.
  • Resim (isteğe bağlı)
    • İsterseniz bir simge veya resim de ekleyebilirsiniz.
    • Simge
      • Simgeniz, medya oynatıcı kartının sağında kenarlıksız küçük resim olarak görünür.
      • Boyut 36 x 36 dp olmalıdır. Daha büyük boyutlu resimler sığacak şekilde yeniden boyutlandırılır.
    • Resim
      • Görüntü kapsayıcının yüksekliği 192 dp olur.
      • Resminiz, medya oynatıcı kartının üstünde görünür ve kartın tüm genişliğini kaplar. Çoğu resmin üstünde veya yanlarında çubuklar görünür.
      • Hareketli GIF'lere izin verilir.
    • Resim kaynağını URL olarak belirtmelisiniz.
    • Tüm resimlerde alternatif metin kullanılması gerekir.

Yüzeylerdeki davranış

Medya yanıtları Android telefonlarda ve Google Home'da desteklenir. Medya yanıtlarının davranışı, kullanıcıların İşlemlerinizle etkileşimde bulunduğu yüzeye bağlıdır.

Android telefonlarda, aşağıdaki koşullardan herhangi biri karşılandığında kullanıcılar medya yanıtlarını görebilir:

  • Google Asistan ön planda ve telefon ekranı açık.
  • Kullanıcı, ses çalarken Google Asistan'dan ayrılır ve çalma işlemi tamamlandıktan sonra 10 dakika içinde Google Asistan'a geri döner. Kullanıcı, Google Asistan'a döndüğünde medya kartını ve öneri çiplerini görür.
  • Asistan, kullanıcıların "sesi aç" veya "sesi yüzde 50'ye ayarla" gibi komutlar vererek görüşme İşleminiz sırasında cihaz ses düzeyini kontrol etmelerine olanak tanır. Benzer eğitim ifadelerini işleyen amaçlarınız varsa amaçlarınız önceliklidir. İşleminiz özel bir nedeni yoksa Asistan'ın bu kullanıcı istekleriyle ilgilenmesine izin vermenizi öneririz.

Medya denetimleri, telefon kilitliyken kullanılabilir. Kontroller, Android'de bildirim alanında da görünür.

Şekil 7. Medya yanıtı örneği (akıllı ekran)

Örnek kod

Aşağıdaki kod örneğinde, zengin yanıtlarınızı medyayı içerecek şekilde nasıl güncelleyebileceğiniz gösterilmektedir.

Node.js

app.intent('Media Response', (conv) => {
  if (!conv.surface.capabilities
    .has('actions.capability.MEDIA_RESPONSE_AUDIO')) {
      conv.ask('Sorry, this device does not support audio playback.');
      conv.ask('Which response would you like to see next?');
      return;
  }

  conv.ask('This is a media response example.');
  conv.ask(new MediaObject({
    name: 'Jazz in Paris',
    url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3',
    description: 'A funky Jazz tune',
    icon: new Image({
      url: 'https://storage.googleapis.com/automotive-media/album_art.jpg',
      alt: 'Album cover of an ocean view',
    }),
  }));
  conv.ask(new Suggestions(['Basic Card', 'List',
    'Carousel', 'Browsing Carousel']));
});
index.js

Java

@ForIntent("Media Response")
public ActionResponse mediaResponse(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) {
    return responseBuilder
        .add("Sorry, this device does not support audio playback.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("This is a media response example.")
      .add(
          new MediaResponse()
              .setMediaObjects(
                  new ArrayList<MediaObject>(
                      Arrays.asList(
                          new MediaObject()
                              .setName("Jazz in Paris")
                              .setDescription("A funky Jazz tune")
                              .setContentUrl(
                                  "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3")
                              .setIcon(
                                  new Image()
                                      .setUrl(
                                          "https://storage.googleapis.com/automotive-media/album_art.jpg")
                                      .setAccessibilityText("Album cover of an ocean view")))))
              .setMediaType("AUDIO"))
      .addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"});
  return responseBuilder.build();
}
MyActionsApp.java

Node.js

if (!conv.surface.capabilities
  .has('actions.capability.MEDIA_RESPONSE_AUDIO')) {
    conv.ask('Sorry, this device does not support audio playback.');
    conv.ask('Which response would you like to see next?');
    return;
}

conv.ask('This is a media response example.');
conv.ask(new MediaObject({
  name: 'Jazz in Paris',
  url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3',
  description: 'A funky Jazz tune',
  icon: new Image({
    url: 'https://storage.googleapis.com/automotive-media/album_art.jpg',
    alt: 'Album cover of an ocean view',
  }),
}));
conv.ask(new Suggestions(['Basic Card', 'List',
  'Carousel', 'Browsing Carousel']));
index.js

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) {
  return responseBuilder
      .add("Sorry, this device does not support audio playback.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("This is a media response example.")
    .add(
        new MediaResponse()
            .setMediaObjects(
                new ArrayList<MediaObject>(
                    Arrays.asList(
                        new MediaObject()
                            .setName("Jazz in Paris")
                            .setDescription("A funky Jazz tune")
                            .setContentUrl(
                                "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3")
                            .setIcon(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/automotive-media/album_art.jpg")
                                    .setAccessibilityText("Album cover of an ocean view")))))
            .setMediaType("AUDIO"))
    .addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"});
return responseBuilder.build();
MyActionsApp.java

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "This is a media response example."
            }
          },
          {
            "mediaResponse": {
              "mediaType": "AUDIO",
              "mediaObjects": [
                {
                  "contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3",
                  "description": "A funky Jazz tune",
                  "icon": {
                    "url": "https://storage.googleapis.com/automotive-media/album_art.jpg",
                    "accessibilityText": "Album cover of an ocean view"
                  },
                  "name": "Jazz in Paris"
                }
              ]
            }
          }
        ],
        "suggestions": [
          {
            "title": "Basic Card"
          },
          {
            "title": "List"
          },
          {
            "title": "Carousel"
          },
          {
            "title": "Browsing Carousel"
          }
        ]
      }
    }
  }
}

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "This is a media response example."
              }
            },
            {
              "mediaResponse": {
                "mediaType": "AUDIO",
                "mediaObjects": [
                  {
                    "contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3",
                    "description": "A funky Jazz tune",
                    "icon": {
                      "url": "https://storage.googleapis.com/automotive-media/album_art.jpg",
                      "accessibilityText": "Album cover of an ocean view"
                    },
                    "name": "Jazz in Paris"
                  }
                ]
              }
            }
          ],
          "suggestions": [
            {
              "title": "Basic Card"
            },
            {
              "title": "List"
            },
            {
              "title": "Carousel"
            },
            {
              "title": "Browsing Carousel"
            }
          ]
        }
      }
    }
  ]
}

Yönerge

Yanıtınız, mediaType değeri AUDIO olan bir mediaResponse ve zengin yanıtın öğe dizisinde bir mediaObject içermelidir. Bir medya yanıtı tek bir medya nesnesini destekler. Bir medya nesnesi, ses dosyasının içerik URL'sini içermelidir. Bir medya nesnesi, isteğe bağlı olarak bir ad, alt metin (açıklama) ve bir simge ya da resim URL'si içerebilir.

Telefonlarda ve Google Home'da İşleminiz ses çalmayı tamamladığında Google Asistan, medya yanıtının FinalResponse olup olmadığını kontrol eder. Aksi takdirde, karşılamanıza bir geri arama göndererek kullanıcıya yanıt verebilirsiniz.

Yanıt bir FinalResponse değilse İşleminiz öneri çipleri içermelidir.

Oynatma tamamlandıktan sonra geri çağırmayı işleme

İşleminiz kullanıcıdan takip istemek (örneğin, başka bir şarkı çalmak) için actions.intent.MEDIA_STATUS amacını işlemelidir. İşleminiz medya oynatma tamamlandığında bu geri çağırmayı alır. Geri çağırmada, MEDIA_STATUS bağımsız değişkeni mevcut medya hakkındaki durum bilgilerini içerir. Durum değeri FINISHED veya STATUS_UNSPECIFIED olur.

Dialogflow'u Kullanma

Dialogflow'da konuşma kollarına ayırma işlemi gerçekleştirmek istiyorsanız yalnızca bir medya yanıtını destekleyen yüzeylerde tetiklendiğinden emin olmak için amaca göre actions_capability_media_response_audio giriş bağlamı oluşturmanız gerekir.

İsteklerinizi karşılamanız

Aşağıdaki kod snippet'i, İşleminiz için istek karşılama kodunu nasıl yazabileceğinizi gösterir. Dialogflow kullanıyorsanız actions.intent.MEDIA_STATUS yerine actions_intent_MEDIA_STATUS etkinliğini alan amaçta belirtilen işlem adını girin (örneğin, "media.status.update").

Node.js

app.intent('Media Status', (conv) => {
  const mediaStatus = conv.arguments.get('MEDIA_STATUS');
  let response = 'Unknown media status received.';
  if (mediaStatus && mediaStatus.status === 'FINISHED') {
    response = 'Hope you enjoyed the tune!';
  }
  conv.ask(response);
  conv.ask('Which response would you like to see next?');
});
index.js

Java

@ForIntent("Media Status")
public ActionResponse mediaStatus(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  String mediaStatus = request.getMediaStatus();
  String response = "Unknown media status received.";
  if (mediaStatus != null && mediaStatus.equals("FINISHED")) {
    response = "Hope you enjoyed the tune!";
  }
  responseBuilder.add(response);
  responseBuilder.add("Which response would you like to see next?");
  return responseBuilder.build();
}
MyActionsApp.java

Node.js

app.intent('actions.intent.MEDIA_STATUS', (conv) => {
  const mediaStatus = conv.arguments.get('MEDIA_STATUS');
  let response = 'Unknown media status received.';
  if (mediaStatus && mediaStatus.status === 'FINISHED') {
    response = 'Hope you enjoyed the tune!';
  }
  conv.ask(response);
  conv.ask('Which response would you like to see next?');
});
index.js

Java

@ForIntent("actions.intent.MEDIA_STATUS")
public ActionResponse mediaStatus(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  String mediaStatus = request.getMediaStatus();
  String response = "Unknown media status received.";
  if (mediaStatus != null && mediaStatus.equals("FINISHED")) {
    response = "Hope you enjoyed the tune!";
  }
  responseBuilder.add(response);
  responseBuilder.add("Which response would you like to see next?");
  return responseBuilder.build();
}
MyActionsApp.java

JSON

Aşağıdaki JSON'un bir webhook isteğini açıkladığını unutmayın.

{
  "responseId": "151b68df-98de-41fb-94b5-caeace90a7e9-21947381",
  "queryResult": {
    "queryText": "actions_intent_MEDIA_STATUS",
    "parameters": {},
    "allRequiredParamsPresent": true,
    "fulfillmentText": "Webhook failed for intent: Media Status",
    "fulfillmentMessages": [
      {
        "text": {
          "text": [
            "Webhook failed for intent: Media Status"
          ]
        }
      }
    ],
    "outputContexts": [
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_media_response_audio"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_account_linking"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_web_browser"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_screen_output"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_audio_output"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/google_assistant_input_type_voice"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_intent_media_status",
        "parameters": {
          "MEDIA_STATUS": {
            "@type": "type.googleapis.com/google.actions.v2.MediaStatus",
            "status": "FINISHED"
          }
        }
      }
    ],
    "intent": {
      "name": "projects/df-responses-kohler/agent/intents/068b27d3-c148-4044-bfab-dfa37eebd90d",
      "displayName": "Media Status"
    },
    "intentDetectionConfidence": 1,
    "languageCode": "en"
  },
  "originalDetectIntentRequest": {
    "source": "google",
    "version": "2",
    "payload": {
      "user": {
        "locale": "en-US",
        "lastSeen": "2019-08-04T23:57:15Z",
        "userVerificationStatus": "VERIFIED"
      },
      "conversation": {
        "conversationId": "ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA",
        "type": "ACTIVE",
        "conversationToken": "[]"
      },
      "inputs": [
        {
          "intent": "actions.intent.MEDIA_STATUS",
          "rawInputs": [
            {
              "inputType": "VOICE"
            }
          ],
          "arguments": [
            {
              "name": "MEDIA_STATUS",
              "extension": {
                "@type": "type.googleapis.com/google.actions.v2.MediaStatus",
                "status": "FINISHED"
              }
            }
          ]
        }
      ],
      "surface": {
        "capabilities": [
          {
            "name": "actions.capability.MEDIA_RESPONSE_AUDIO"
          },
          {
            "name": "actions.capability.ACCOUNT_LINKING"
          },
          {
            "name": "actions.capability.WEB_BROWSER"
          },
          {
            "name": "actions.capability.SCREEN_OUTPUT"
          },
          {
            "name": "actions.capability.AUDIO_OUTPUT"
          }
        ]
      },
      "isInSandbox": true,
      "availableSurfaces": [
        {
          "capabilities": [
            {
              "name": "actions.capability.WEB_BROWSER"
            },
            {
              "name": "actions.capability.AUDIO_OUTPUT"
            },
            {
              "name": "actions.capability.SCREEN_OUTPUT"
            }
          ]
        }
      ],
      "requestType": "SIMULATOR"
    }
  },
  "session": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA"
}

JSON

Aşağıdaki JSON'un bir webhook isteğini açıkladığını unutmayın.

{
  "user": {
    "locale": "en-US",
    "lastSeen": "2019-08-06T07:38:40Z",
    "userVerificationStatus": "VERIFIED"
  },
  "conversation": {
    "conversationId": "ABwppHGcqunXh1M6IE0lu2sVqXdpJfdpC5FWMkMSXQskK1nzb4IkSUSRqQzoEr0Ly0z_G3mwyZlk5rFtd1w",
    "type": "NEW"
  },
  "inputs": [
    {
      "intent": "actions.intent.MEDIA_STATUS",
      "rawInputs": [
        {
          "inputType": "VOICE"
        }
      ],
      "arguments": [
        {
          "name": "MEDIA_STATUS",
          "extension": {
            "@type": "type.googleapis.com/google.actions.v2.MediaStatus",
            "status": "FINISHED"
          }
        }
      ]
    }
  ],
  "surface": {
    "capabilities": [
      {
        "name": "actions.capability.SCREEN_OUTPUT"
      },
      {
        "name": "actions.capability.WEB_BROWSER"
      },
      {
        "name": "actions.capability.AUDIO_OUTPUT"
      },
      {
        "name": "actions.capability.MEDIA_RESPONSE_AUDIO"
      },
      {
        "name": "actions.capability.ACCOUNT_LINKING"
      }
    ]
  },
  "isInSandbox": true,
  "availableSurfaces": [
    {
      "capabilities": [
        {
          "name": "actions.capability.WEB_BROWSER"
        },
        {
          "name": "actions.capability.AUDIO_OUTPUT"
        },
        {
          "name": "actions.capability.SCREEN_OUTPUT"
        }
      ]
    }
  ],
  "requestType": "SIMULATOR"
}

Tablo kartları

Masa kartları, yanıtınızda tablo verileri (örneğin, spor puan durumu, seçim sonuçları ve uçuşlar) göstermenize olanak tanır. Asistan'ın tablo kartınızda göstermesi gereken sütunları ve satırları (her biri en fazla 3 adet) tanımlayabilirsiniz. Ayrıca, ek sütunlar ve satırlar tanımlayıp bu sütunların önceliklerini belirleyebilirsiniz.

Tablolar dikey listelerden farklıdır, çünkü tablolarda statik veriler görüntülenir ve liste öğeleri gibi etkileşim kurulamaz.

Şekil 8. Tablo kartı örneği (akıllı ekran)

Özellikler

Tablo kartlarında, yapılandırabileceğiniz aşağıdaki gereksinimler ve isteğe bağlı özellikler bulunur:

  • actions.capability.SCREEN_OUTPUT özelliğine sahip yüzeylerde desteklenir.

Aşağıdaki bölümde, bir tablo kartındaki öğeleri nasıl özelleştirebileceğiniz özetlenmektedir.

Ad İsteğe Bağlı Özelleştirilebilir Özelleştirme Notları
title Evet Evet Tablonun genel başlığı. Altyazı ayarlanmışsa ayarlanmalıdır. Yazı tipi ailesini ve rengini özelleştirebilirsiniz.
subtitle Evet Hayır Tablonun alt başlığı.
image Evet Evet Tabloyla ilişkilendirilen resim.
Row Hayır Evet

Tablonun satır verileri. Bir Cell nesne dizisinden ve satırdan sonra ayırıcı olup olmadığını belirten bir divider_after özelliğinden oluşur.

İlk 3 satırın gösterilmesi garanti edilir ancak diğerleri belirli yüzeylerde görünmeyebilir.

Belirli bir yüzeyde hangi satırların gösterildiğini görmek için lütfen simülatörü kullanarak test yapın. WEB_BROWSER özelliğini destekleyen yüzeylerde kullanıcıyı daha fazla veri içeren bir web sayfasına yönlendirebilirsiniz. Web'e bağlantı oluşturma özelliği şu anda akıllı ekranlarda kullanılamıyor.
ColumnProperties Evet Evet Bir sütunun başlığı ve hizalaması. Bir header özelliği (bir sütunun başlık metnini temsil eder) ve bir horizontal_alignment özelliğinden (HorizontalAlignment türünde) oluşur.
Cell Hayır Evet Bir satırdaki hücreyi açıklar. Her hücre, metin değerini temsil eden bir dize içerir. Hücredeki metni özelleştirebilirsiniz.
Button Evet Evet Genellikle kartın alt kısmında görünen bir düğme nesnesi. Tablo kartında yalnızca 1 düğme olabilir. Düğme rengini özelleştirebilirsiniz.
HorizontalAlignment Evet Evet Hücre içindeki içeriğin yatay hizalaması. Değerler LEADING, CENTER veya TRAILING olabilir. Belirtilmemişse içerik, hücrenin ön kenarına hizalanır.

Örnek kod

Aşağıdaki snippet'lerde basit bir tablo kartının nasıl uygulanacağı gösterilmektedir:

Node.js

app.intent('Simple Table Card', (conv) => {
  if (!conv.screen) {
    conv.ask('Sorry, try this on a screen device or select the ' +
      'phone surface in the simulator.');
    conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask('This is a simple table example.');
  conv.ask(new Table({
    dividers: true,
    columns: ['header 1', 'header 2', 'header 3'],
    rows: [
      ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
      ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
    ],
  }));
  conv.ask('Which response would you like to see next?');
});
index.js

Java

@ForIntent("Simple Table Card")
public ActionResponse simpleTable(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
    return responseBuilder
        .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("This is a simple table example.")
      .add(
          new TableCard()
              .setColumnProperties(
                  Arrays.asList(
                      new TableCardColumnProperties().setHeader("header 1"),
                      new TableCardColumnProperties().setHeader("header 2"),
                      new TableCardColumnProperties().setHeader("header 3")))
              .setRows(
                  Arrays.asList(
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 1 item 1"),
                                  new TableCardCell().setText("row 1 item 2"),
                                  new TableCardCell().setText("row 1 item 3"))),
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 2 item 1"),
                                  new TableCardCell().setText("row 2 item 2"),
                                  new TableCardCell().setText("row 2 item 3"))))));
  return responseBuilder.build();
}
MyActionsApp.java

Node.js

if (!conv.screen) {
  conv.ask('Sorry, try this on a screen device or select the ' +
    'phone surface in the simulator.');
  conv.ask('Which response would you like to see next?');
  return;
}

conv.ask('This is a simple table example.');
conv.ask(new Table({
  dividers: true,
  columns: ['header 1', 'header 2', 'header 3'],
  rows: [
    ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
    ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
  ],
}));
conv.ask('Which response would you like to see next?');
index.js

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
  return responseBuilder
      .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("This is a simple table example.")
    .add(
        new TableCard()
            .setColumnProperties(
                Arrays.asList(
                    new TableCardColumnProperties().setHeader("header 1"),
                    new TableCardColumnProperties().setHeader("header 2"),
                    new TableCardColumnProperties().setHeader("header 3")))
            .setRows(
                Arrays.asList(
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 1 item 1"),
                                new TableCardCell().setText("row 1 item 2"),
                                new TableCardCell().setText("row 1 item 3"))),
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 2 item 1"),
                                new TableCardCell().setText("row 2 item 2"),
                                new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
MyActionsApp.java

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "This is a simple table example."
            }
          },
          {
            "tableCard": {
              "rows": [
                {
                  "cells": [
                    {
                      "text": "row 1 item 1"
                    },
                    {
                      "text": "row 1 item 2"
                    },
                    {
                      "text": "row 1 item 3"
                    }
                  ],
                  "dividerAfter": true
                },
                {
                  "cells": [
                    {
                      "text": "row 2 item 1"
                    },
                    {
                      "text": "row 2 item 2"
                    },
                    {
                      "text": "row 2 item 3"
                    }
                  ],
                  "dividerAfter": true
                }
              ],
              "columnProperties": [
                {
                  "header": "header 1"
                },
                {
                  "header": "header 2"
                },
                {
                  "header": "header 3"
                }
              ]
            }
          },
          {
            "simpleResponse": {
              "textToSpeech": "Which response would you like to see next?"
            }
          }
        ]
      }
    }
  }
}

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "This is a simple table example."
              }
            },
            {
              "tableCard": {
                "columnProperties": [
                  {
                    "header": "header 1"
                  },
                  {
                    "header": "header 2"
                  },
                  {
                    "header": "header 3"
                  }
                ],
                "rows": [
                  {
                    "cells": [
                      {
                        "text": "row 1 item 1"
                      },
                      {
                        "text": "row 1 item 2"
                      },
                      {
                        "text": "row 1 item 3"
                      }
                    ],
                    "dividerAfter": true
                  },
                  {
                    "cells": [
                      {
                        "text": "row 2 item 1"
                      },
                      {
                        "text": "row 2 item 2"
                      },
                      {
                        "text": "row 2 item 3"
                      }
                    ],
                    "dividerAfter": true
                  }
                ]
              }
            },
            {
              "simpleResponse": {
                "textToSpeech": "Which response would you like to see next?"
              }
            }
          ]
        }
      },
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ]
    }
  ]
}

Aşağıdaki snippet'lerde karmaşık bir tablo kartının nasıl uygulanacağı gösterilmektedir:

Node.js

app.intent('Advanced Table Card', (conv) => {
  if (!conv.screen) {
    conv.ask('Sorry, try this on a screen device or select the ' +
      'phone surface in the simulator.');
    conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask('This is a table with all the possible fields.');
  conv.ask(new Table({
    title: 'Table Title',
    subtitle: 'Table Subtitle',
    image: new Image({
      url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
      alt: 'Alt Text',
    }),
    columns: [
      {
        header: 'header 1',
        align: 'CENTER',
      },
      {
        header: 'header 2',
        align: 'LEADING',
      },
      {
        header: 'header 3',
        align: 'TRAILING',
      },
    ],
    rows: [
      {
        cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
        dividerAfter: false,
      },
      {
        cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
        dividerAfter: true,
      },
      {
        cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'],
      },
    ],
    buttons: new Button({
      title: 'Button Text',
      url: 'https://assistant.google.com',
    }),
  }));
  conv.ask('Which response would you like to see next?');
});
index.js

Java

@ForIntent("Advanced Table Card")
public ActionResponse advancedTable(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
    return responseBuilder
        .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("This is a table with all the possible fields.")
      .add(
          new TableCard()
              .setTitle("Table Title")
              .setSubtitle("Table Subtitle")
              .setImage(
                  new Image()
                      .setUrl(
                          "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                      .setAccessibilityText("Alt text"))
              .setButtons(
                  Arrays.asList(
                      new Button()
                          .setTitle("Button Text")
                          .setOpenUrlAction(
                              new OpenUrlAction().setUrl("https://assistant.google.com"))))
              .setColumnProperties(
                  Arrays.asList(
                      new TableCardColumnProperties()
                          .setHeader("header 1")
                          .setHorizontalAlignment("CENTER"),
                      new TableCardColumnProperties()
                          .setHeader("header 2")
                          .setHorizontalAlignment("LEADING"),
                      new TableCardColumnProperties()
                          .setHeader("header 3")
                          .setHorizontalAlignment("TRAILING")))
              .setRows(
                  Arrays.asList(
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 1 item 1"),
                                  new TableCardCell().setText("row 1 item 2"),
                                  new TableCardCell().setText("row 1 item 3")))
                          .setDividerAfter(false),
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 2 item 1"),
                                  new TableCardCell().setText("row 2 item 2"),
                                  new TableCardCell().setText("row 2 item 3")))
                          .setDividerAfter(true),
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 2 item 1"),
                                  new TableCardCell().setText("row 2 item 2"),
                                  new TableCardCell().setText("row 2 item 3"))))));
  return responseBuilder.build();
}
MyActionsApp.java

Node.js

if (!conv.screen) {
  conv.ask('Sorry, try this on a screen device or select the ' +
    'phone surface in the simulator.');
  conv.ask('Which response would you like to see next?');
  return;
}

conv.ask('This is a table with all the possible fields.');
conv.ask(new Table({
  title: 'Table Title',
  subtitle: 'Table Subtitle',
  image: new Image({
    url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
    alt: 'Alt Text',
  }),
  columns: [
    {
      header: 'header 1',
      align: 'CENTER',
    },
    {
      header: 'header 2',
      align: 'LEADING',
    },
    {
      header: 'header 3',
      align: 'TRAILING',
    },
  ],
  rows: [
    {
      cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
      dividerAfter: false,
    },
    {
      cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
      dividerAfter: true,
    },
    {
      cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'],
    },
  ],
  buttons: new Button({
    title: 'Button Text',
    url: 'https://assistant.google.com',
  }),
}));
conv.ask('Which response would you like to see next?');
index.js

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
  return responseBuilder
      .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("This is a table with all the possible fields.")
    .add(
        new TableCard()
            .setTitle("Table Title")
            .setSubtitle("Table Subtitle")
            .setImage(
                new Image()
                    .setUrl(
                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                    .setAccessibilityText("Alt text"))
            .setButtons(
                Arrays.asList(
                    new Button()
                        .setTitle("Button Text")
                        .setOpenUrlAction(
                            new OpenUrlAction().setUrl("https://assistant.google.com"))))
            .setColumnProperties(
                Arrays.asList(
                    new TableCardColumnProperties()
                        .setHeader("header 1")
                        .setHorizontalAlignment("CENTER"),
                    new TableCardColumnProperties()
                        .setHeader("header 2")
                        .setHorizontalAlignment("LEADING"),
                    new TableCardColumnProperties()
                        .setHeader("header 3")
                        .setHorizontalAlignment("TRAILING")))
            .setRows(
                Arrays.asList(
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 1 item 1"),
                                new TableCardCell().setText("row 1 item 2"),
                                new TableCardCell().setText("row 1 item 3")))
                        .setDividerAfter(false),
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 2 item 1"),
                                new TableCardCell().setText("row 2 item 2"),
                                new TableCardCell().setText("row 2 item 3")))
                        .setDividerAfter(true),
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 2 item 1"),
                                new TableCardCell().setText("row 2 item 2"),
                                new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
MyActionsApp.java

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "This is a table with all the possible fields."
            }
          },
          {
            "tableCard": {
              "title": "Table Title",
              "subtitle": "Table Subtitle",
              "image": {
                "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                "accessibilityText": "Alt Text"
              },
              "rows": [
                {
                  "cells": [
                    {
                      "text": "row 1 item 1"
                    },
                    {
                      "text": "row 1 item 2"
                    },
                    {
                      "text": "row 1 item 3"
                    }
                  ],
                  "dividerAfter": false
                },
                {
                  "cells": [
                    {
                      "text": "row 2 item 1"
                    },
                    {
                      "text": "row 2 item 2"
                    },
                    {
                      "text": "row 2 item 3"
                    }
                  ],
                  "dividerAfter": true
                },
                {
                  "cells": [
                    {
                      "text": "row 3 item 1"
                    },
                    {
                      "text": "row 3 item 2"
                    },
                    {
                      "text": "row 3 item 3"
                    }
                  ]
                }
              ],
              "columnProperties": [
                {
                  "header": "header 1",
                  "horizontalAlignment": "CENTER"
                },
                {
                  "header": "header 2",
                  "horizontalAlignment": "LEADING"
                },
                {
                  "header": "header 3",
                  "horizontalAlignment": "TRAILING"
                }
              ],
              "buttons": [
                {
                  "title": "Button Text",
                  "openUrlAction": {
                    "url": "https://assistant.google.com"
                  }
                }
              ]
            }
          },
          {
            "simpleResponse": {
              "textToSpeech": "Which response would you like to see next?"
            }
          }
        ]
      }
    }
  }
}

JSON

Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "This is a table with all the possible fields."
              }
            },
            {
              "tableCard": {
                "title": "Table Title",
                "subtitle": "Table Subtitle",
                "image": {
                  "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                  "accessibilityText": "Alt Text"
                },
                "rows": [
                  {
                    "cells": [
                      {
                        "text": "row 1 item 1"
                      },
                      {
                        "text": "row 1 item 2"
                      },
                      {
                        "text": "row 1 item 3"
                      }
                    ],
                    "dividerAfter": false
                  },
                  {
                    "cells": [
                      {
                        "text": "row 2 item 1"
                      },
                      {
                        "text": "row 2 item 2"
                      },
                      {
                        "text": "row 2 item 3"
                      }
                    ],
                    "dividerAfter": true
                  },
                  {
                    "cells": [
                      {
                        "text": "row 3 item 1"
                      },
                      {
                        "text": "row 3 item 2"
                      },
                      {
                        "text": "row 3 item 3"
                      }
                    ]
                  }
                ],
                "columnProperties": [
                  {
                    "header": "header 1",
                    "horizontalAlignment": "CENTER"
                  },
                  {
                    "header": "header 2",
                    "horizontalAlignment": "LEADING"
                  },
                  {
                    "header": "header 3",
                    "horizontalAlignment": "TRAILING"
                  }
                ],
                "buttons": [
                  {
                    "title": "Button Text",
                    "openUrlAction": {
                      "url": "https://assistant.google.com"
                    }
                  }
                ]
              }
            },
            {
              "simpleResponse": {
                "textToSpeech": "Which response would you like to see next?"
              }
            }
          ]
        }
      }
    }
  ]
}

Yanıtlarınızı özelleştirme

Özel bir tema oluşturarak zengin yanıtlarınızın görünümünü değiştirebilirsiniz. Actions projeniz için bir tema tanımlarsanız projenizin İşlemler genelindeki zengin yanıtların stili, temanıza göre belirlenir. Bu özel markalama özelliği, kullanıcılar İşlemler ekranlı bir yüzeyde çağrıldığında iletişimin benzersiz bir görünümünü ve tarzını tanımlamak için yararlı olabilir.

Özel bir yanıt teması belirlemek için aşağıdakileri yapın:

  1. Actions Console'da Geliştirme > Tema özelleştirme'ye gidin.
  2. Aşağıdakilerden birini veya tümünü ayarlayın:
    • Kartlarınızın arka planı olarak kullanılacak arka plan rengi. Kartın içeriğinin kolay okunabilmesi için genellikle arka planda açık bir renk kullanmanız gerekir.
    • Birincil renk, kartlarınızın başlık metinlerinin ve kullanıcı arayüzü öğelerinin ana rengidir. Genel olarak, arka planla kontrast oluşturmak için daha koyu bir birincil renk kullanmanız gerekir.
    • Yazı tipi ailesi, başlıklar ve diğer belirgin metin öğeleri için kullanılan yazı tipi türünü açıklar.
    • Resim köşe stili, kartlarınızın köşelerinin görünümünü değiştirebilir.
    • Arka plan resmi, arka plan rengi yerine özel bir resim kullanır. Yüzey cihazı yatay veya dikey moddayken sırasıyla iki farklı resim sağlamanız gerekir. Arka plan resmi kullanırsanız birincil rengin beyaz olarak ayarlandığını unutmayın.
  3. Kaydet'i tıklayın.
Şekil 9. Actions Console'da temayı özelleştirme