Karta veya iletişim kutusuna metin ve resim ekleme

Bu sayfada, bir karta veya iletişim mesajına nasıl metin ve resim ekleneceği ve metnin ve resimlerin ileti içinde nasıl görüneceğinin değiştirileceği açıklanmaktadır.

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

  • Google Chat'e erişimi olan bir Google Workspace hesabı.
  • Yayınlanan bir Chat uygulamasıdır. Chat uygulaması oluşturmak için bu quickstart takip edin.

    • Resim ekleyin

    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'ı, 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 (ör. Google Chat geliştirici belgeleri için bir köprü) https://developers.google.com/chat.
    • API çağırma gibi özel bir işlev çalıştıran bir işlem çalıştırın.

    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. Burada, Google Chat geliştirici belgelerinin açılış sayfası resmi gösteriliyor. Kullanıcılar resmi tıkladığında yeni bir sekmede Google Chat geliştirici dokümanları 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 kırpıldığı bir ızgarada iki resim gösterilmektedir:

    Resim kırpma

    cropStyle uygulayarak resmin şeklini ayarlayabilirsiniz. Bir resme uygulanacak çeşitli şekiller vardır:

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

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

    Simge ekle

    Icon widget, yerleşik simgeyi veya özel simgesini temsil eder. Icon özelliğini kart mesajlarında ve iletişim kutularında aşağıdaki şekillerde kullanabilirsiniz:

    • Bağımsız bir simge görüntüleyin.
    • Bir DecoratedText widget'ının parçası olarak, ilgili metnin önünde bir simge görüntüleyin.
    • Simgeyi, ButtonList widget'ının parçası olarak etkileşimli bir düğme olarak görüntüleyin.

    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 BOOKMARK
    BUS 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
    YILDIZ MAĞAZA
    BİLET TRAIN
    VIDEO_CAMERA VIDEO_PLAY

    Biçimlendirilmiş metin paragrafı ekleyin

    TextParagraph widget'ı, isteğe bağlı HTML biçimlendirmesiyle birlikte bir metin paragrafı gösterir. Bu widget'ların metin içeriğini ayarlarken karşılık gelen HTML etiketlerini eklemeniz yeterlidir. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kart metni biçimlendirmesi bölümüne bakın.

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

    • Kalın, altı çizili veya italik metinleri HTML <b>, <u>, <i> etiketleriyle görüntüleyin.
    • 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 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'ından oluşan bir kart gösterilmektedir:

    Metni dekoratif öğelerle gösterin

    DecoratedText widget'ı, metinleri isteğe bağlı düzen ve özelliklerle gösterir. Ö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.

    Bilgileri kullanımı kolay ve etkileşimli bir şekilde sunmanız gerektiğinde DecoratedText widget'ını kullanın. Bu widget; kişi 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 karşılık gelen HTML etiketlerini eklemeniz yeterlidir. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kart metni biçimlendirmesi bölümüne bakın.

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

    Sorun giderme

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

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