Bu sayfada, bir karta veya iletişim mesajına nasıl metin ve resim ekleneceği açıklanmaktadır. metnin ve resimlerin ileti içinde nasıl görüneceğini değiştirebilirsiniz.
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:
- Google Cloud Functions ile HTTP hizmeti
- Google Apps Komut Dosyası
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Resim ekleme
İlgili içeriği oluşturmak için kullanılan
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ı gibihttps://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ı:
Resim kırpma
Resmin şeklini değiştirmek için
cropStyle
.
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 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çinRECTANGLE_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. Icon
ürününü şurada kullanabilirsiniz:
kart mesajları
ve
iletişim kutuları
aşağıdaki şekillerde kullanabilirsiniz:
- 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 | ||
INVITE | MAP_PIN | ||
ÜYELİK | MULTIPLE_PEOPLE | ||
KİŞİ | TELEFON | ||
RESTAURANT_ICON | SHOPPING_CART | ||
YILDIZ | MAĞAZA | ||
BİLET | TREN | ||
VIDEO_CAMERA | VIDEO_PLAY |
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.
Kart metin biçimlendirmesi.
Ö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ı sahip olacaksınız.
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
ileicon
gösterin. topLabel
ile metinden önce bir başlık gösterin.button
düğmesiyle tıklanabilir bir düğme veyaswitchControl
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, tablodaki verileri görüntülemek 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
İlgili konular
- Kart ve iletişim kutusu kullanılan Chat uygulaması örneklerini görüntüleyin.
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText