Karta veya iletişim kutusuna metin ve resim ekleme

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

Kart Oluşturucu ile kartları tasarlayın ve önizleyin.

Card Builder'ı açın

Ön koşullar

  • Google Chat'e erişimi olan bir Google Workspace hesabı.
  • Yayınlanmış 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şlemi destekler. onclick işleme örnek olarak şunlar verilebilir:

    • OpenLink ile bir köprü (ör. Google Chat geliştirici dokümanlarına bağlantı) https://developers.google.com/chat açın.
    • API çağırma gibi özel bir işlevi çalıştıran işlem çalıştırın.

    Image widget'ı aşağıdaki sınırlamalara sahiptir:

    • Yalnızca PNG ve JPG resimler desteklenir.
    • Ana makine URL'si HTTPS olmalıdır.
    • Yüksek performanslı kartlar bulunduğundan emin olmak 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 belgeleri açılış sayfası resmi görüntülenir. 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 resimdir. imageCompent widget'ı, bir resme cropStyle ve borderStyle uygulamanızı sağlar.

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

    Resmi kırpma

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

    • Kare kırpma uygulamak için SQUARE simgesini kullanın.
    • Dairesel kırpma uygulamak için CIRCLE simgesini kullanın.
    • Özel en boy oranına sahip 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 kullanabilirsiniz.

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

    Simge ekle

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

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

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

    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ş metinden bir paragraf ekleyin

    TextParagraph widget'ı isteğe bağlı HTML biçimlendirmesine sahip bir metin paragrafı gösterir. Bu widget'ların metin içeriğini ayarlarken ilgili HTML etiketlerini eklemeniz yeterlidir. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kart metnini biçimlendirme bölümüne bakın.

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

    • HTML <b>, <u>, <i> etiketleriyle kalın, altı çizili veya italik metin 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 renk katın.

    Her TextParagraph widget'ı yeni bir paragraf olarak oluşturulur ve HTML <p> etiketine benzer 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 bulunmaktadır:

    Metni süslemeli öğelerle gösterin

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

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

    Bilgileri kullanımı kolay ve etkileşimli bir şekilde sunmanız gerektiğinde DecoratedText widget'ını kullanın. 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 ilgili HTML etiketlerini eklemeniz yeterlidir. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kart metnini biçimlendirme 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

    Bir Google Chat uygulaması veya kart hata döndürdüğünde Chat arayüzünde "Bir sorun oluştu." veya "İsteğiniz işleme alınamıyor" mesajı gösterilir. 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ük kaydı etkinken hataları düzeltmenize yardımcı olacak açıklayıcı hata mesajları ve günlük verileri mevcuttur. Hataları görüntüleme, hata ayıklama ve düzeltme konusunda yardım için Google Chat hatalarını giderme ve düzeltme başlıklı makaleyi inceleyin.