Google Chat uygulamaları için kartlar oluşturma

Bu sayfada, bir reklamverenin bileşenlerinin ve yapısının nasıl card. Kartlar kullanıcıdır Google Chat uygulamalarının sunum yapmak ve bilgi toplamak için kullanabileceği arayüzler Chat kullanıcılarından gelen bilgiler de dahildir. Chat uygulamaları oluşturabilir ve kartları aşağıdaki arayüzlerde görüntüler:

  • Mesajlar içeren bir e-posta alırsınız.
  • Ana sayfalar Bu, doğrudan Ana Sayfa sekmesinde görünen bir karttır. sohbet mesajı gönderebilir.
  • İletişim kutuları, yani iletişim kutusunda yeni bir pencerede açılır.

Bu sayfada, bir kartın aşağıdaki bileşenleri hakkında bilgi edineceksiniz:

  • Başlıklar: Genellikle bir kartın veya kartın başlığını içerir. bölümüne bakın.
  • Ana gövdeyi oluşturan Bölümler widget'ları ve diğer etkileşimli öğeleri içeren kartı gösterir. Kartta bölümünde, sütunlar ve ızgaralar da dahil olmak üzere karta daha fazla yapı ekleyebilirsiniz.
  • Sayfanın alt kısmında görünen Sabit altbilgiler iletişim kutularını kullanarak, düğmeler gibi kalıcı kullanıcı arayüzü öğelerini görüntüleyin.

Ön koşullar

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir aşağıdaki hızlı başlangıç kılavuzlarından birini kullanarak oluşturmak istediğiniz uygulama mimarisinde:

Chat uygulamaları için mesajlaşma ve kullanıcı arayüzleri tasarlayıp önizlemek üzere Kart Oluşturucu'yu kullanın:

Kart Oluşturucu'yu açın

Başlık ekleme

CardHeader widget'ı bir kartın başlığını temsil eder. Başlıklar bir kartınız için başlık, alt başlık ve avatar resmi.

Aşağıda bir CardHeader örneği verilmiştir:

Bir veya daha fazla kart bölümü ekleyin

CardSection widget'ı bir kart içinde üst düzey bir kapsayıcıdır. Kartı kullanıyorsunuz çeşitli bölümler'i tıklayın. Her kart bölümü için bir başlık ve bir veya daha fazla widget.

Aşağıda, iki textParagraph içeren bir CardSection örneği verilmiştir widget'lar:

Widget'lar arasına yatay ayırıcı ekleyin

İlgili içeriği oluşturmak için kullanılan divider widget'ı Bir kartın genişliğini kapsayan yatay bir çizgi görüntüler widget'ların dikey olarak yığılmasına olanak tanır. Çizgi, birbirinden farklı şekillerde Kullanıcılar widget'ları birbirinden ayırt ederek kartları kolayca tarayabilirler anlıyoruz.

Aşağıda, diğer reklam öğesi türleri arasında divider widget'ından oluşan bir kart widget'lar:

Sütun ekleyin

İlgili içeriği oluşturmak için kullanılan columns widget'ı Bir kartta en fazla 2 sütun gösterir. Ekleyebileceğiniz: ekleyebilirsiniz. widget'lar ilk sıraya alındıklarında belirtiliyor. 2'den fazla sütun eklemek veya satırları kullanmak için grid widget'ını kullanın.

Her bir sütunun yüksekliği, uzun sütuna göre belirlenir. Örneğin, ilk sütun ikinci sütundan daha uzunsa, her iki sütunda da yüksekliğini görebilirsiniz. Her sütun farklı bir sayı içerebileceği için durumda satır tanımlayamaz veya widget'ları sütunlar arasında hizalayamazsınız.

Aşağıdaki örnekte, şu özelliklere sahip bir columns widget'ı içeren bir kart gösterilmektedir: 2 metin sütunu. Yalnızca sütun düzenini görüntülemek ve kodu daraltmak için Daralt'ı tıklayın. Aşağıdaki örnekte olduğu gibi alan kısıtlı olduğunda ikinci sütun ilk sütunun altında sarmalanır.

Sütun genişliğini tanımlama

Sütunlar yan yana görüntülenir. Her sütunun genişliğini özelleştirebilirsiniz. her bir arama terimi için horizontalSizeStyle alanı. Kullanıcının ekran genişliği çok darsa ikinci sütun, ad:

  • Web'de, ekran genişliği şundan küçük veya bu değere eşitse ikinci sütun sarmalanır: 480 piksel.
  • iOS cihazlarda, ekran genişliği 300 nk'e eşittir.
  • Android cihazlarda, ekran genişliği şundan daha azsa ikinci sütun sarmalanır: veya 320 dp'ye eşit olmalıdır.

Aşağıdaki örnekte, şu özelliklere sahip bir columns widget'ı içeren bir kart gösterilmektedir: Sütunlarda 4 öğe bulunan 2 metin sütunu. Sütunlardaki her öğe Metnin ne kadar alanını işlemek için horizontalSizeStyle uygulandı her bir sütunu doldurur:

  • İlk metin paragrafında %30'dan fazla dolgu yapılmaması için FILL_MINIMUM_SPACE kullanılıyor genişliğine göre değişebilir.
  • İkinci metin paragrafı, mevcutFILL_AVAILABLE_SPACE boşluk ekleyin. Bu örnekte, müşterinin isteğine bağlı olarak dokunun.
  • Üçüncü metin paragrafı horizontalSizeStyle öğesini tanımlamaz, bu nedenle varsayılan olarak kullanabilirsiniz.
  • Dördüncü metin paragrafında %30'dan fazla doldurmamak için FILL_MINIMUM_SPACE kullanılıyor genişliğine göre değişebilir.

Bir sütunun yatay hizalamasını tanımlama

Widget'ları bir sütunun soluna, sağına veya ortasına yatay olarak hizalayabilirsiniz. tanımlamak horizontalAligment alanı. horizontalAlignment alanı tanımlanmamışsa widget'lar bir sütuna girelim.

Aşağıdaki örnekte, bir sütundaki metni yatay olarak sola hizalar:

Aşağıdaki örnekte, ortadaki bir sütun içindeki metni yatay olarak hizalar:

Aşağıdaki örnekte, bir sütundaki metni yatay olarak sağa hizalar:

Bir sütunun dikey hizalamasını tanımlama

Widget'ları bir sütunun üst, alt veya ortasına dikey olarak hizalayabilirsiniz. tanımlamak verticalAlignment alanı. verticalAlignment alanı tanımlanmamışsa bir sütundaki widget'lar hizalanır dokunun.

Aşağıdaki örnekte, bir sütundaki metin dikey olarak en üste hizalanır:

Aşağıdaki örnek, ortadaki bir sütun içindeki metni dikey olarak hizalar:

Aşağıdaki örnekte, en alttaki sütun içindeki metni dikey olarak hizalar:

Öğe koleksiyonunu görüntülemek için ızgara ekleyin

İlgili içeriği oluşturmak için kullanılan grid widget'ı öğe koleksiyonunu içeren bir ızgara görüntüler. Izgara, istenilen sayıda emin olmaktır. Satır sayısı, öğelerin sütunlara bölünmesiyle belirlenir. 10 öğe ve 2 sütun içeren bir ızgarada 5 satır vardır. 11 öğe ve 2 öğe içeren bir tablo sütununda 6 satır var.

Widget, kullanıcıların tek tip veri girmesine yardımcı olan önerileri destekler ve değişim üzerine yapılan işlemlerdir. Actions metin girişi alanında bir değişiklik gerçekleştiğinde (ör. kullanıcı ekleme işlemi veya metin siliniyor.

Aşağıdaki örnekte, tek bir öğe içeren 2 sütunlu bir ızgara gösterilmektedir:

Metnin tablo içinde resimle birlikte nerede görüneceğini tanımlamak için gridItemLayout alanı. Bu alan, metnin yukarıda mı yoksa aşağıda mı görüneceğini tanımlamanızı sağlar ızgarada görebilirsiniz. gridItemLayout tanımlanmazsa metin varsayılan olarak çizelgedeki öğenin altında görünür.

Aşağıdaki örnekte, metin ve resim içeren üç sütunlu bir ızgara tıklayın. İlk ızgara, resmin üzerinde görünecek metni tanımlar, ikinci ızgara ızgara, resmin altında görünecek metni tanımlar, üçüncü ızgara ise metnin konumu.

Izgaraya veya sütuna kenarlık ekleme

column veya grid widget'ında görünen öğeler için şunlara kenarlık ekleyebilirsiniz: tanımlayarak bu kullanıcı arayüzü öğelerini borderType alanı ve borderStyle alanına dokunun. Herhangi bir borderStyle alanı tanımlanmamışsa varsayılan olarak kenarlık gösterilmez. Şunları yapabilirsiniz: bir widget'taki tüm öğelere uygulanacak bir borderType tanımlayın veya stili uygulayın otomatik olarak ekler.

Aşağıdaki örnekte, her ızgarada bir resim içeren 2 sütunlu bir ızgara verilmiştir. kenarlık türü, stil ve renk, kapsamdaki tüm öğelere uygulanacak şekilde ızgara.

Aşağıdaki örnekte, her ızgarada bir resim ve kenarlık stili ve türü ayrı ayrı tanımlanır. İlk resmin STROKE olarak tanımlanmış bir sınırı var. İkinci resmin kenarlığı NO_BORDER Üçüncü resimde tanımlı bir kenarlık yoktur.

CardFixedFooter widget'ı, bu e-posta adresi tarafından gönderilen Chat uygulaması Altbilgiler, birincil ve ikincil düğme içerebilir.

CardFixedFooter widget'ı yalnızca şunlar için kullanılabilir: iletişim kutuları.

Aşağıda, iki düğmeli bir CardFixedFooter widget'ı örneği verilmiştir:

Sorun giderme

Bir Google Chat uygulaması veya card bir hata döndürürse Chat arayüzünde "Bir sorun oluştu" mesajı gösteriliyor. veya "İsteğiniz işlenemiyor." Chat kullanıcı arayüzü herhangi bir hata mesajı görüntülenmiyor ancak Chat uygulaması veya kart beklenmeyen bir sonuç veriyorsa; Örneğin karttaki bir mesajda görünür.

Chat kullanıcı arayüzünde hata mesajı görüntülenmese de Hataları düzeltmenize yardımcı olmak için açıklayıcı hata mesajları ve günlük verileri sunulur Chat uygulamaları için hata günlük kaydı etkinleştirildiğinde. Görüntüleme konusunda yardım için ve hataları düzeltme ile ilgili daha fazla bilgi edinmek için Google Chat hatalarını giderme ve düzeltme