Zengin yanıtlar (Dialogflow)

Dialogflow'da keşfet

Yanıtlar örneğimizi Dialogflow'a aktarmak için Devam'ı tıklayın. Ardından, adımları uygulayın:

  1. Bir aracı adı girin ve örnek için yeni bir Dialogflow aracısı oluşturun.
  2. Temsilcinin 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çi düzenleyici'yi etkinleştirin ve ardından Dağıt'ı tıklayın. Düzenleyici, örneği içeriyor girin.
  5. Ana gezinme menüsünden Integrations'a (Entegrasyonlar) gidin, ardından Google Asistan'a dokunun.
  6. Görünen kalıcı pencerede Otomatik önizleme değişiklikleri'ni etkinleştirin ve Test et'i tıklayın. Eylem simülatörünü açın.
  7. Simülatörde Talk to my test app komutunu girerek örneği test edebilirsiniz.
Devam

Kullanıcı deneyimini zenginleştirmek amacıyla görsel öğeler görüntülemek istiyorsanız zengin bir yanıt kullanın. İşleminizle etkileşimleri. Bu görsel unsurlar, ekibinizin devam edebilir.

Zengin yanıtlar, yalnızca ekran modunda veya ses ve ekran deneyimlerinde görünebilir. Onlar şu bileşenleri içerebilir:

Ayrıca, aşağıdaki konularda bilgi edinmek için görüşme tasarımı yönergelerimizi de bunları İşleminize nasıl dahil edeceğinizi.

Özellikler

Zengin yanıtlar aşağıdaki koşullara sahiptir ve isteğe bağlıdır şu özellikleri yapılandırabilirsiniz:

  • 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.
  • FinalResponse içinde öneri çiplerine 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

ziyaret edin.
Şekil 1. Temel kart örneği (akıllı telefon)
'nı inceleyin.

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
  • Kenarlık

Temel kartları, genel olarak görüntüleme amacıyla kullanın. Kısa ve öz, kullanıcılara önemli (veya özet) bilgiler sunmak ve kullanıcıların daha fazla bilgi edinebilirsiniz (web bağlantısı kullanarak).

Çoğu durumda aşağıya öneri çipleri eklemeniz gerekir kartlara dokunarak konuşmayı sürdürün veya başlatın.

Sohbet balonundaki kartta sunulan bilgileri tekrarlamaktan kaçının gösterir.

Özellikler

Temel kart yanıt türü aşağıdaki şartlara sahiptir ve isteğe bağlıdır şu özellikleri yapılandırabilirsiniz:

  • actions.capability.SCREEN_OUTPUT özelliğine sahip yüzeylerde desteklenir.
  • Biçimlendirilmiş metin (resim yoksa gereklidir)
    • Varsayılan olarak düz metin kullanılır.
    • Bağlantı içermemelidir.
    • Resimle birlikte 10 satır, resim olmadan 15 satır sınırı. Konu: 500 (resimli) veya 750 (resimsiz) karakter. Daha küçük ekranlı telefonlar Ayrıca, büyük ekranlı telefonlardan daha önceki metinleri de kırparsınız. Metin de içeriyorsa çok satır halinde, son kelime sonunda üç nokta ile kısaltılır.
    • Markdown'ın sınırlı bir alt kümesi desteklenir:
      • Arkasında \n karakteri bulunan çift boşluklu yeni satır
      • **bold**
      • *italics*
  • Resim (biçimlendirilmiş metin yoksa gereklidir)
    • Tüm resimlerin yüksekliği 192 dp olmalıdır.
    • Resmin en boy oranı ekrandan farklıysa resim yatay veya dikey kenarlarda gri çubuklarla ortalanır.
    • Resim kaynağı bir URL.
    • Hareketli GIF'lere izin verilir.

İsteğe bağlı

  • Ünvan
    • Düz metin.
    • Yazı tipi ve boyut düzeltildi.
    • En fazla bir satır; ekstra 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; ekstra karakterler kısaltılır.
    • Altyazı belirtilmezse kart yüksekliği daraltılır.
  • Bağlantı düğmesi
    • Bağlantı başlığı gereklidir
    • 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 kartlarda, bağlantı olmadan etkileşim özelliği bulunmaz. Dokunuyor Bağlantı, kullanıcıyı bağlantıya yönlendirirken kartın ana gövdesi hâlâ etkin değil.
  • Kenarlık
    • Kart ve görüntü kapsayıcısı arasındaki kenarlık temel kartınızın sunumunu özelleştirebilirsiniz.
    • JSON dizesi özelliği ayarlanarak yapılandırılır imageDisplayOptions
ziyaret edin.
Şekil 2. Temel kart örneği (akıllı ekran)
'nı inceleyin.

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

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

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

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();

JSON

Aşağıdaki JSON dosyasının 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 dosyasının 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?"
              }
            }
          ]
        }
      }
    }
  ]
}
ziyaret edin.
Şekil 3. Göz atma bandı örneği (akıllı telefon)
'nı inceleyin.

Göz atma bandı, kullanıcıların dikey olarak kaydırmasına olanak tanıyan zengin bir yanıttır ve koleksiyondan bir karo seçin. Göz atma bantları özel olarak tasarlanmıştır seçilen kutuyu bir web tarayıcısında (veya AMP tarayıcısında) açarak web içeriği için çalışır. (tüm öğeler AMP özellikliyse). Ayrıca, göz atma bandı daha sonra göz atmak için kullanıcının Asistan yüzeyi.

Özellikler

Göz atma bandı yanıt türü aşağıdaki koşullara sahiptir ve isteğe bağlıdır şu özellikleri yapılandırabilirsiniz:

  • Hem actions.capability.SCREEN_OUTPUT hem de ve actions.capability.WEB_BROWSER özellikleri. Bu yanıt türü şu anda akıllı ekranlarda kullanılamıyor.
  • Banda göz atılıyor
    • En fazla on karo.
    • En az iki karo.
    • Banttaki karoların tümü web içeriğine (AMP içeriği) bağlanmalıdır önerilir).
      • Kullanıcının bir AMP görüntüleyiciye yönlendirilmesi için urlHintType, AMP içerik bloklarındaki öğeler "AMP_CONTENT" olarak ayarlanmalıdır.
  • Bant karolarına göz atılıyor
    • Parça 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 diğer karolar resim alanları da içermelidir.
      • Tarama bandındaki tüm kutular AMP özellikli içeriğe bağlanıyorsa Kullanıcı, ek işlevlerin bulunduğu bir AMP tarayıcıya yönlendirilir. Herhangi bir parça, AMP olmayan içeriğe bağlantı veriyorsa tüm karolar kullanıcıları yönlendiriyorsa kopyalayıp yapıştırın.
    • Resim (isteğe bağlı)
      • Resim 128 dp yükseklik x 232 dp genişlikte olmaya zorlandı.
      • Görüntü en boy oranı görüntü sınırlama kutusuyla eşleşmiyorsa resim her iki yanındaki çubuklarla ortalanır. Akıllı telefonlarda Resim, köşeleri yuvarlanmış bir kare içinde ortalanır.
      • Resim bağlantısı bozuksa bunun yerine bir yer tutucu resim kullanılır.
      • Resimlerde alternatif metin bulunması gerekir.
    • Başlık (zorunlu)
      • Temel metin kartıyla aynı biçimlendirme seçenekleri.
      • Başlıklar, ses seçimini desteklemek için benzersiz olmalıdır.
      • En fazla iki satır 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ırlık metin.
      • Üç noktayla kısaltılır (...)
      • Yazı tipi boyutu 14 sp, gri renkli.
    • Altbilgi (isteğe bağlı)
      • Yazı tipi ve yazı tipi boyutu düzeltildi.
      • En fazla bir metin satırı.
      • Üç noktayla kısaltılır (...)
      • En alta sabitlendiği için daha az gövde metni satırı içeren karolar alt metnin üzerinde boşluk bulunur.
      • Yazı tipi boyutu 14 sp, gri renkli.
  • Etkileşim
    • Kullanıcı öğeleri görüntülemek için ekranı dikey olarak kaydırabilir.
    • Dokunma kartı: Bir öğeye dokunulduğunda kullanıcı bir tarayıcıya yönlendirilir ve bağlantı verilen sayfadır.
  • 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 dokunabilir veya Asistan'ı çağırabilir ("Ok Google") mikrofonu yeniden açın.

Yönerge

Varsayılan olarak, göz atma bandı gönderildikten sonra mikrofon kapalı kalır. Şunu istiyorsanız: Görüşmeye daha sonra devam edebilmek için öneri çipleri eklemenizi önemle tavsiye ederiz. tıklayın.

Listede sunulan seçenekleri hiçbir zaman öneri çipi olarak tekrarlamayın. Cips bu bağlam ileti dizisini özetlemek için kullanılır (seçim seçimi için kullanılmaz).

Listelerde olduğu gibi rulo resim kartına eşlik eden sohbet balonu alt kümesidir (TTS/SSML). Buradaki ses (TTS/SSML) ilk karoya yerleştireceğim. Ayrıca, tüm öğelerin okunmasını da kaldıracağım. İlk öğeyi ve bu önerinin nedenini oradadır (örneğin, en popüler, en son satın alınan, en çok bahsedeceğim).

Ö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',
      }),
    ],
  }));
});
@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();
}
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',
    }),
  ],
}));
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();

Aşağıdaki JSON dosyasının 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 dosyasının 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

Göz atma bandıyla kullanıcı etkileşimleri için takip karşılamaya gerek yoktur. inceleyebilirsiniz. Mikrofonun kullanıcı bir göz atma bandı öğesiyle etkileşimde bulunduktan sonra tekrar açılmadığından, konuşmayı sonlandırmalı ya da öneri çiplerini kullanabilirsiniz.

Öneri çipleri

ziyaret edin.
Şekil 4. Öneri çipleri örneği (akıllı telefon)
'nı inceleyin.

Sohbeti devam ettirmek veya özetlemek için önerilere dair ipucu vermek için öneri çiplerini kullanın. Görüşme sırasında birincil bir harekete geçirici mesaj varsa, bunu ilk öneri çipi olarak ekleyebilirsiniz.

Mümkün olduğunda sohbette temel bir öneriye yer vermelisiniz. ama bunu yalnızca yanıtın veya sohbetin doğal gelmesi durumunda yapın.

Özellikler

Öneri çipleri, aşağıdaki koşullara tabidir ve isteğe bağlıdır. şu özellikleri yapılandırabilirsiniz:

  • actions.capability.SCREEN_OUTPUT özelliğine sahip yüzeylerde desteklenir.
  • Öneri çiplerini web'e bağlamak için yüzeylerde ayrıca actions.capability.WEB_BROWSER özelliği. Bu özellik şu anda kullanılamıyor akıllı ekranlarda kullanılabilir.
  • En fazla sekiz çip.
  • Maksimum 25 karakter uzunluğunda metin.
  • Yalnızca düz metni destekler.

ziyaret edin.
Şekil 5. Öneri çipleri örneği (akıllı ekran)
'nı inceleyin.

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

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

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

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();

JSON

Aşağıdaki JSON dosyasının 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 dosyasının 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ı

ziyaret edin.
Şekil 6. Medya yanıtı örneği (akıllı telefon)
'nı inceleyin.

Medya yanıtları, İşlemlerinizin bir oynatma süresi olan sesli içeriği oynatmasına olanak tanır 240 saniyelik SSML sınırından daha uzundur. Medyanın birincil bileşeni yanıt, tek parça kartıdır. Kart, kullanıcının bunları yapmasına olanak tanır işlemler:

  • Son 10 saniyeyi tekrar oynat.
  • 30 saniye ileri atla.
  • Medya içeriğinin toplam uzunluğunu görüntüleyin.
  • Sesli çalma için bir ilerleme göstergesi 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 ayrıca "Ok Google, şunu aç: sesi artır." veya "Ok Google, sesi yüzde 50'ye ayarla." Benzer eğitim ifadelerini işliyorlarsa işlem önceliklidir. Asistan'a izin ver İşleminizin özel bir nedeni olmadığı sürece bu kullanıcı isteklerini ele alabilir.

Özellikler

Medya yanıtları aşağıdaki şartlara ve isteğe bağlı özelliklere sahiptir: yapılandırabilir:

  • actions.capability.MEDIA_RESPONSE_AUDIO özellikli yüzeylerde desteklenir olanağı sunar.
  • Oynatma için ses, doğru biçimlendirilmiş bir .mp3 dosyası olmalıdır. Mevcut akış desteklenmiyor.
  • Oynatma için medya dosyası, HTTPS URL'si olarak belirtilmelidir.
  • Resim (isteğe bağlı)
    • İsteğe bağlı olarak bir simge veya resim ekleyebilirsiniz.
    • Simge
      • Simgeniz, medya içeriğinin sağında kenarlıksız küçük resim olarak görünür oynatıcı kartı.
      • 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ısı 192 dp yüksekliğinde olur.
      • Resminiz medya oynatıcı kartının üst kısmında görünür ve görüntüleyebilirsiniz. Çoğu resim, kenar boyunca çubuklarla bir üst veya yan taraftır.
      • Hareketli GIF'lere izin verilir.
    • Resim kaynağını URL olarak belirtmelisiniz.
    • Tüm resimlerde alternatif metin zorunludur.

Platformlardaki davranış

Medya yanıtları, Android telefonlarda ve Google Home'da desteklenir. İlgili içeriği oluşturmak için kullanılan medya yanıtlarının davranışı, kullanıcıların etkileşime girdiği yüzeye bağlıdır. ve İşlemleriniz ile uyumlu hale getirin.

Android telefonlarda, kullanıcılar bu koşullardan herhangi biri geçerli olduğunda medya yanıtlarını görebilir karşılanıyor:

  • Google Asistan ön planda, telefon ekranı açık.
  • Kullanıcı, ses çalarken Google Asistan'dan ayrılır ve Google Asistan, oynatma tamamlandıktan sonra 10 dakika içinde gösterilir. Şuraya döndüğünde: Google Asistan, kullanıcı medya kartını ve öneri çiplerini görür.
  • Asistan, kullanıcıların diyalog: "sesi aç" veya "şunu ayarla" gibi şeyler söyleyerek: ses seviyesini yüzde 50'ye getir". Benzer eğitim ifadelerini işleyen amaçlarınız varsa amaçlarınıza öncelik vereceğinizi düşünebilirsiniz. Asistan'ın bunları yapmasına izin vermenizi öneririz. Kullanıcı istekleri için (İşleminizin belirli bir nedeni yoksa)

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

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

Örnek kod

Aşağıdaki kod örneğinde, zengin yanıtlarınızı bazı işaretler bulabilirsiniz.

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

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

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

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();

JSON

Aşağıdaki JSON dosyasının 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 dosyasının 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 ile AUDIO arasında bir mediaResponse ve zengin yanıtın item dizisi içinde bir mediaObject içeren. Medya yanıtı tek bir medya nesnesini destekler. Medya nesnesi, içerik içermelidir Ses dosyasının URL'si. Bir medya nesnesi isteğe bağlı olarak bir ad, alt metin (açıklama) ve simge ya da resim URL'si ekleyin.

Telefonlarda ve Google Home'da işleminiz ses çalmayı tamamladığında Google Asistan, medya yanıtının FinalResponse olup olmadığını kontrol eder. Aksi takdirde, müşteri memnuniyetine bir geri arama göndererek belirtir.

yanıt FinalResponse değil.

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

İşleminiz, actions.intent.MEDIA_STATUS istemini işlemelidir (örneğin, başka bir şarkıyı çalmak için) bir kullanıcı. İşleminizin aldığı medya oynatma tamamlandıktan sonra bu geri çağırmayı içerir. Geri çağırmada, MEDIA_STATUS bağımsız değişkeni, mevcut medya hakkında durum bilgilerini içeriyor. İlgili içeriği oluşturmak için kullanılan durum değeri FINISHED veya STATUS_UNSPECIFIED olur.

Dialogflow'u Kullanma

Dialogflow'da konuşma dallarına ayırmak istiyorsanız şu bağlamda actions_capability_media_response_audio giriş bağlamını ayarla: yalnızca bir medya yanıtını destekleyen yüzeylerde tetiklenmesini sağlayın.

İstek karşılama sürecinizi geliştirme

Aşağıdaki kod snippet'i, işletmeniz için sipariş karşılama kodunu nasıl yazabileceğinizi gösterir. İşlem. Dialogflow kullanıyorsanız actions.intent.MEDIA_STATUS actions_intent_MEDIA_STATUS etkinliği (ö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?');
});

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

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

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

JSON

Aşağıdaki JSON dosyasının 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 dosyasının 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ı

Tablo kartları, yanıtınızda tablo şeklinde veriler (örneğin, puan durumu, seçim sonuçları ve uçuşlar). Sütunları tanımlayabilir ve Asistan'ın tablo kartınızda gösterilmesi gereken satırlar (her biri en fazla 3 satır). Ayrıca, öncelik sırasına göre ek sütunlar ve satırlar da tanımlayabilirsiniz.

Tablolar dikey listelerden farklıdır çünkü tablolarda statik veriler ve liste öğeleri gibi birbiriyle etkileşime geçilemez.

ziyaret edin.
Şekil 8. Tablo kartı örneği (akıllı ekran)
'nı inceleyin.

Özellikler

Tablo kartları, aşağıdaki şartlara ve isteğe bağlı özelliklere sahiptir: yapılandır:

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

Aşağıdaki bölümde, tablodaki öğeleri nasıl özelleştirebileceğiniz özetlenmiştir kartını inceleyebilirsiniz.

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

Tablonun satır verileri. Cell dizisinden oluşur nesneleri ve bir divider_after özelliği ile sonra bir ayırıcı olmalıdır.

İlk 3 satırın gösterileceği garanti edilir ancak diğer satırlar gösterilmeyebilir belirli yüzeylerde görünür.

Bir etkinlik için hangi satırların gösterildiğini öğrenmek amacıyla belirir. WEB_BROWSER destekleyen yüzeylerde özelliği ile, kullanıcıyı daha fazla verinin bulunduğu bir web sayfasına yönlendirebilirsiniz. Bağlantı oluşturma web'e ekleme özelliği şu anda akıllı ekranlarda kullanılamaz.

ColumnProperties Evet Evet Bir sütunun başlığı ve hizalaması. header içerir özelliği (bir sütunun başlık metnini temsil eder) ve bir horizontal_alignment özelliği (tür) HorizontalAlignment).
Cell Hayır Evet Bir satırdaki bir hücreyi açıklar. Her hücrede, tablodaki bir metin değeri. Hücredeki metni özelleştirebilirsiniz.
Button Evet Evet Genellikle kartın alt kısmında görünen bir düğme nesnesi. Tablo kartta yalnızca 1 düğme olabilir. Düğme rengini özelleştirebilirsiniz.
HorizontalAlignment Evet Evet Hücredeki içeriğin yatay olarak hizalanması. Değerler LEADING, CENTER veya TRAILING. Eğer değeri 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?');
});

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

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

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();

JSON

Aşağıdaki JSON dosyasının 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 dosyasının 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?');
});

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

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

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();

JSON

Aşağıdaki JSON dosyasının 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 dosyasının 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 Eylemleri temanıza göre belirlenecektir. Bu özel markalama kullanıcılar dönüşüm gerçekleştirdiğinde görüşmede benzersiz bir görünüm İşlemlerinizi ekranı olan bir yüzeyde çağırın.

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

  1. İşlemler konsolunda Geliştir > Tema özelleştirme.
  2. Aşağıdakilerden birini veya tümünü ayarlayın:
    • Kartlarınızın arka planı olarak kullanılacak arka plan rengi. İçinde Genel olarak, kartın arka planında açık renk kullanmanız gerekir. ve okuması kolay olmalıdır.
    • Birincil renk, kartlarınızın ana rengidir başlık metinleri ve kullanıcı arayüzü öğeler. Genel olarak, kontrast için daha koyu bir birincil renk kullanmalısınız. görebilirsiniz.
    • Yazı tipi ailesi, başlıklar ve diğer yazı tiplerinde kullanılan yazı tipi türünü açıklar belirgin metin öğeleri için de geçerlidir.
    • Resim köşe stili, kartlarınızın görünümünü değiştirebilir köşeleri.
    • Arka plan resmi, arka plan yerine özel bir resim kullanır rengi. yüzey cihazın yatay veya dikey modda olduğundan emin olun. Lütfen arka plan resmi kullanırsanız birincil renk beyaz olarak ayarlanır.
  3. Kaydet'i tıklayın.
ziyaret edin.
Şekil 9. Actions konsolunda temayı özelleştirme
'nı inceleyin.