Kartlara metin ve resim ekleme

Bu sayfada, kartlara metin ve resimlerin nasıl ekleneceği ve biçimlendirileceği açıklanmaktadır.

Kart oluşturma hakkında daha fazla bilgi edinmek için bkz. Google Chat uygulamaları için kartlar oluşturun.

Chat uygulamaları için JSON kart mesajları tasarlayıp önizlemek üzere Kart Oluşturucu'yu kullanın:

Kart Oluşturucu'yu açın

Ö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:

Resim veya simge ekleme

Bu bölümde, kartlara resim, resim ve renk gibi görsel öğelerin nasıl ekleneceği açıklanmaktadır. resim bileşenlerini ve simgeleri kullanabilirsiniz.

Resim ekleme

Image widget'ı HTTPS URL'sinde barındırılan bir PNG veya JPG resmi gösterir. Görüntülenen resmin genişliği, görüntülenen kartın tüm genişliğini kaplar ve yüksekliği resmin en boy oranını koruyacak şekilde ayarlanır. Image widget'ı destekler onclick işlem kullanıcılar resmi tıkladığında oluşan etiketler. onclick işlemlerine örnek olarak şunlar verilebilir:

  • Şununla bir köprü açın: OpenLink Örneğin, Google Chat geliştirici belgelerine bağlantı veren bir bağlantı gibi https://developers.google.com/chat.
  • Bir işlem API çağırmak gibi özel bir işlev çalıştıran.

Image widget'ında aşağıdaki sınırlamalar söz konusudur:

  • Yalnızca PNG ve JPG resimler desteklenir.
  • Ana makine URL'si HTTPS olmalıdır.
  • Yüksek performans gösteren kartlar için önerilen maksimum resim boyutu 2 MB'tır.

Aşağıda, Image widget'ından oluşan bir kart gösterilmektedir. Bu sayfa Google Chat geliştirici belgeleri açılış sayfası resmi. Kullanıcılar resmi, Google Chat geliştirici dokümanları yeni sekmede açılır.

Resim bileşeni ekleme

Image widget'ı, sınırlı stile sahip bir resim. imageCompent widget'ı bir resme cropStyle ve borderStyle uygulamanıza olanak tanır.

Aşağıdaki örnekte, resimlerden birinin bulunduğu bir ızgarada iki resim gösterilmektedir kırpıldı:

Bir resim bileşeninin şeklini ayarlamak için cropStyle. Bir resme uygulanacak birkaç şekil vardır:

  • Kare kırpma uygulamak için SQUARE hareketini kullanın.
  • Dairesel kırpma uygulamak için CIRCLE kullanın.
  • Özel bir en boy oranına sahip dikdörtgen kırpma uygulamak için RECTANGLE_CUSTOM kullanın oranı. Örneğin, dikdörtgen kırpma uygulamak için RECTANGLE_4_3 kullanabilirsiniz en boy oranıyla gösterilir.

Aşağıdaki örnekte, bir ızgarada farklı cropStyle değerine sahip beş resim gösterilmektedir her resme uygulanır:

Simge ekle

İlgili içeriği oluşturmak için kullanılan Icon widget'ı şunlardan birini temsil eder: yerleşik veya özel simgesini tıklayın. Aşağıdakilerden herhangi birini yapmak için kartlara simge ekleyebilirsiniz:

  • Bağımsız bir simge görüntüleyin.
  • Bir simgenin parçası olarak, alakalı metnin önünde DecoratedText widget'ı.
  • Bir simgeyi ButtonList widget'ı.

Aşağıda, yerleşik simge bulunan bir Icon bileşeninden oluşan bir kart verilmiştir:

Aşağıdaki tabloda kart mesajları için kullanılabilen yerleşik simgeler listelenmiştir:

UÇAK YER İŞARETİ
OTOBÜS ARABA
SAAT CONFIRMATION_NUMBER_ICON
AÇIKLAMA LİRA
E-POSTA EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
OTEL HOTEL_ROOM_TYPE
DAVET ET MAP_PIN
ÜYELİK MULTIPLE_PEOPLE
KİŞİ TELEFON
RESTAURANT_ICON SHOPPING_CART
STAR MAĞAZA
BİLET TREN
VIDEO_CAMERA VIDEO_PLAY

Karta metin ekleme

Bu bölümde, kartlara metin ekleme ve metin biçimlendirme işlemleri açıklanmaktadır.

Biçimlendirilmiş metin paragrafı ekleyin

İlgili içeriği oluşturmak için kullanılan TextParagraph widget'ı isteğe bağlı HTML biçimlendirmesine sahip bir metin paragrafı gösterir. Ayarlanırken karşılık gelen HTML etiketlerini eklemeniz yeterlidir. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için bkz. Kartlarda gösterilen metni biçimlendirin.

Örneğin, paragraf metni için aşağıdaki biçimlendirme kullanılabilir:

  • HTML <b>, <u>, <i> ile kalın, altı çizili veya italik metni göster etiketleri arasında yer alır.
  • HTML <a href="https://www.google.com">hyperlinks</a> ile web sitelerine bağlantı oluşturun.
  • HTML <font color="#ea9999">font tags</font> ile biraz renk ekleyin.

Her TextParagraph widget'ı yeni bir paragraf olarak oluşturulur ve bir HTML <p> etiketine benzer.

Aşağıda, aşağıdaki işlemler için kullanılan iki TextParagraph widget'ından oluşan bir kart verilmiştir: basit HTML biçimlendirmesiyle iki paragraf görüntüleme:

Daraltılabilir metin paragrafı ekleme

Daraltılabilir metin paragrafları, kullanıcıların istek üzerine daha fazla bilgi vermesini sağlar. Bu widget, uzun içerikleri veya başka ayrıntıları seçildiğinde keşfedilebilir, dinamik ve etkileşimli bir kullanıcı sunmaktır.

Metni dekoratif öğelerle gösterin

İlgili içeriği oluşturmak için kullanılan DecoratedText widget'ı Metni isteğe bağlı düzen ve özelliklerle görüntüler. Örneğin:

  • Metnin önünde startIcon ile icon gösterin.
  • topLabel ile metinden önce bir başlık gösterin.
  • button düğmesiyle tıklanabilir bir düğme veya switchControl düğmesiyle değiştirilebilir bir açma/kapatma düğmesi ekleyin.

Şurada bilgi sunmanız gerektiğinde DecoratedText widget'ını kullanın: etkileşimli bir şekilde kullanabilirsiniz. Widget, resim ve metin gibi kullanım alanları için idealdir. iletişim kartları, sipariş durumu güncellemeleri ve iş bileti bildirimleri.

DecoratedText widget'ı, basit metin HTML biçimlendirmesini destekler. Ayarlanırken karşılık gelen HTML etiketlerini eklemeniz yeterlidir. Örneğin, Desteklenen HTML etiketleri hakkında daha fazla bilgi için bkz. Kart metin biçimlendirmesi.

Aşağıda, kampanya performansını izlemek için kullanılan DecoratedText widget'ından oluşan bir kart e-posta adresi, çevrimiçi durum, telefon numarası gibi iletişim bilgileri web sitesi:

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