Kartlara metin ve resim ekleme

Bu sayfada, kartlara nasıl metin ve resim ekleyip bunları nasıl biçimlendireceğiniz açıklanmaktadır.

Kart oluşturma hakkında daha fazla bilgi edinmek için Google Chat uygulamaları için kart oluşturma başlıklı makaleyi inceleyin.

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

Kart Oluşturucu'yu açın

Ön koşullar

Etkileşim etkinliklerini alıp bunlara yanıt verecek şekilde yapılandırılmış bir Google Chat uygulaması. Etkileşimli bir Chat uygulaması oluşturmak için kullanmak istediğiniz uygulama mimarisine göre aşağıdaki hızlı başlangıçlardan birini tamamlayın:

Resim veya simge ekleme

Bu bölümde, kartlara resimler, resim bileşenleri ve simgeler gibi görsel öğelerin nasıl ekleneceği açıklanmaktadır.

Resim ekleme

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

  • OpenLink ile bir köprü açın. Örneğin, Google Chat geliştirici dokümanlarının köprüsü, https://developers.google.com/chat.
  • API çağırma gibi özel bir işlevi çalıştıran bir işlem yürütün.

Image widget'ında aşağıdaki sınırlamalar vardır:

  • Yalnızca PNG ve JPG resimleri desteklenir.
  • Ana makine URL'si HTTPS olmalıdır.
  • Performanslı kartlar için önerilen maksimum resim boyutu 2 MB'tır.

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

Resim bileşeni ekleme

Image widget'ı, sınırlı stil içeren bir resimdir. imageCompent widget'ı, bir resme cropStyle ve borderStyle uygulamanıza olanak tanır.

Aşağıdaki örnekte, ızgara düzeninde iki resim gösterilmektedir. Resimlerden biri kırpılmıştır:

cropStyle uygulayarak bir resim bileşeninin şeklini ayarlayabilirsiniz. Resme uygulanabilecek çeşitli şekiller vardır:

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

Aşağıdaki örnekte, her birine farklı bir cropStyle uygulanmış beş resim içeren bir ızgara gösterilmektedir:

Simge ekle

Icon widget'ı, yerleşik bir simgeyi veya özel bir simgeyi temsil eder. Kartlara simge ekleyerek aşağıdakileri yapabilirsiniz:

  • Bağımsız bir simge gösterin.
  • DecoratedText widget'ının bir parçası olarak ilgili metnin önünde bir simge gösterin.
  • ButtonList widget'ının bir parçası olarak etkileşimli düğme şeklinde bir simge gösterin.

Aşağıda, yerleşik simgeye sahip bir Icon bileşeninden oluşan bir kart gösterilmektedir:

Aşağıdaki tabloda, kart mesajlarında kullanılabilen yerleşik simgeler listelenmiştir:

AIRPLANE YER İŞARETİ
BUS CAR
SAAT CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
E-POSTA EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
DAVET ET MAP_PIN
ÜYELİK MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
BİLET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Karta metin ekleme

Bu bölümde, karta nasıl metin ekleneceği ve metnin nasıl biçimlendirileceği açıklanmaktadır.

Biçimlendirilmiş metin içeren bir paragraf ekleme

TextParagraph widget'ı, isteğe bağlı HTML biçimlendirmesiyle bir metin paragrafı gösterir. Bu widget'ların metin içeriğini ayarlarken yalnızca ilgili HTML etiketlerini ekleyin. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kartlarda görünen metni biçimlendirme başlıklı makaleyi inceleyin.

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

  • HTML <b>, <u>, <i> etiketleriyle metni kalın, altı çizili veya italik olarak görüntüleyin.
  • HTML <a href="https://www.google.com">hyperlinks</a> ile web sitelerine bağlantı verme.
  • HTML <font color="#ea9999">font tags</font> ile biraz renk katın.

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

Aşağıda, basit HTML biçimlendirmesiyle iki paragrafı görüntülemek için kullanılan iki TextParagraph widget'tan oluşan bir kart yer almaktadır:

Daraltılabilir metin paragrafı ekleme

Daraltılabilir metin paragrafları, kullanıcıların istedikleri zaman daha fazla bilgi görmelerini sağlar. Bu widget, uzun içerikleri veya seçildiğinde keşfedilebilecek ek ayrıntıları sunmak için idealdir. Dinamik ve etkileşimli bir kullanıcı deneyimi oluşturur.

Metni dekoratif öğelerle gösterme

DecoratedText widget'ı, isteğe bağlı düzen ve özelliklerle metin gösterir. Örneğin:

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

Bilgileri kolayca tüketilebilecek ve etkileşimli bir şekilde sunmanız gerektiğinde DecoratedText widget'ını kullanın. Bu widget; iletişim kartları, sipariş durumu güncellemeleri ve iş bileti bildirimleri gibi kullanım alanları için idealdir.

DecoratedText widget'ı, basit metin HTML biçimlendirmesini destekler. Bu widget'ların metin içeriğini ayarlarken yalnızca ilgili HTML etiketlerini ekleyin. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kart metni biçimlendirmesi başlıklı makaleyi inceleyin.

Aşağıda, e-posta adresi, online durum, telefon numarası ve web sitesi gibi iletişim bilgilerini göstermek için kullanılan DecoratedText widget'ından oluşan bir kart yer almaktadır:

Sorun giderme

Bir Google Chat uygulaması veya kartı hata döndürdüğünde Chat arayüzünde "Bir hata oluştu" mesajı gösterilir. veya "İsteğiniz işlenemiyor." Bazen Chat kullanıcı arayüzünde hata mesajı gösterilmez ancak Chat uygulaması veya kartı beklenmedik bir sonuç üretir. Örneğin, kart mesajı görünmeyebilir.

Chat kullanıcı arayüzünde hata mesajı gösterilmese de Chat uygulamaları için hata günlüğü kaydı etkinleştirildiğinde hataları düzeltmenize yardımcı olacak açıklayıcı hata mesajları ve günlük verileri kullanılabilir. Hataları görüntüleme, hataları ayıklama ve düzeltme konusunda yardım için Google Chat hatalarını giderme ve düzeltme başlıklı makaleyi inceleyin.