Aggiungere testo e immagini alle schede

Questa pagina spiega come aggiungere e formattare testo e immagini nelle schede.

Per saperne di più sulla creazione di schede, consulta Creare schede per le app di Google Chat.

Utilizza il generatore di schede per progettare e visualizzare in anteprima i messaggi e le interfacce utente per le app di Chat:

Apri il generatore di schede

Prerequisiti

Un'app di Google Chat configurata per ricevere e rispondere agli eventi di interazione. Per creare un' app di Chat interattiva, completa una delle seguenti guide rapide in base all'architettura dell'app che vuoi utilizzare:

Aggiungere immagini o icone

Questa sezione spiega come aggiungere elementi visivi alle schede, come immagini, componenti immagine e icone.

Aggiungere un'immagine

Image widget mostra un'immagine PNG o JPG ospitata su un URL HTTPS. La larghezza dell'immagine visualizzata riempie l'intera larghezza della scheda visualizzata e l'altezza si adatta per mantenere le proporzioni dell'immagine. Il Image widget supporta onclick azioni che si verificano quando gli utenti fanno clic sull'immagine. Esempi di azioni onclick:

  • Apri un link ipertestuale con OpenLink, ad esempio un link ipertestuale alla documentazione per sviluppatori di Google Chat, https://developers.google.com/chat.
  • Esegui un' azione che esegue una funzione personalizzata, ad esempio la chiamata di un'API.

Il widget Image presenta le seguenti limitazioni:

  • Sono supportate solo le immagini PNG e JPG.
  • L'URL host deve essere HTTPS.
  • Per garantire schede efficienti, le dimensioni massime consigliate per le immagini sono 2 MB.

Di seguito è riportata una scheda composta da un widget Image. Mostra l'immagine della pagina di destinazione della documentazione per sviluppatori di Google Chat. Quando gli utenti fanno clic sull'immagine, la documentazione per sviluppatori di Google Chat si apre in una nuova scheda.

Aggiungere un componente immagine

Il widget Image è un'immagine con uno stile limitato. Un imageCompent widget consente di applicare cropStyle e borderStyle a un'immagine.

L'esempio seguente mostra due immagini in una griglia in cui una delle immagini è ritagliata:

Puoi regolare la forma di un componente immagine applicando un cropStyle. Esistono diverse forme da applicare a un'immagine:

  • Utilizza SQUARE per applicare un ritaglio quadrato.
  • Utilizza CIRCLE per applicare un ritaglio circolare.
  • Utilizza RECTANGLE_CUSTOM per applicare un ritaglio rettangolare con proporzioni personalizzate. Ad esempio, puoi utilizzare RECTANGLE_4_3 per applicare un ritaglio rettangolare con proporzioni 4:3.

L'esempio seguente mostra cinque immagini in una griglia con un cropStyle diverso applicato a ogni immagine:

Aggiungere un'icona

Il Icon widget rappresenta un'icona integrata o un'icona personalizzata. Aggiungi icone alle schede per eseguire una delle seguenti operazioni:

  • Mostra un'icona autonoma.
  • Mostra un'icona davanti al testo correlato, come parte di un DecoratedText widget.
  • Mostra un'icona come pulsante interattivo, come parte di un ButtonList widget.

Di seguito è riportata una scheda composta da un componente Icon con un'icona integrata:

La tabella seguente elenca le icone integrate disponibili per i messaggi delle schede:

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Aggiungere testo a una scheda

Questa sezione spiega come aggiungere e formattare il testo in una scheda.

Aggiungere un paragrafo di testo formattato

Il widget TextParagraph mostra un paragrafo di testo con formattazione HTML facoltativa. Quando imposti il contenuto di testo di questi widget, includi solo i tag HTML corrispondenti. Per saperne di più sui tag HTML supportati, consulta Formattare il testo visualizzato nelle schede.

Ad esempio, per il testo del paragrafo è disponibile la seguente formattazione:

  • Visualizza testo in grassetto, sottolineato o in corsivo con i tag HTML <b>, <u>, <i> tags.
  • Inserisci link a siti web con i tag HTML <a href="https://www.google.com">hyperlinks</a>.
  • Aggiungi un po' di colore con HTML <font color="#ea9999">font tags</font>.

Ogni widget TextParagraph viene visualizzato come un nuovo paragrafo e può essere considerato simile a un tag HTML <p>.

Di seguito è riportata una scheda composta da due widget TextParagraph utilizzati per visualizzare due paragrafi con una semplice formattazione HTML:

Aggiungere un paragrafo di testo comprimibile

I paragrafi di testo comprimibili consentono agli utenti di visualizzare ulteriori informazioni su richiesta. Questo widget è perfetto per presentare contenuti lunghi o dettagli aggiuntivi che possono essere esplorati quando vengono selezionati, creando un'esperienza utente dinamica e interattiva.

Visualizzare il testo con elementi decorativi

Il widget DecoratedText mostra il testo con layout e funzionalità facoltativi. Ad esempio:

  • Mostra un'icona icon davanti al testo con startIcon.
  • Mostra un titolo prima del testo con topLabel.
  • Aggiungi un pulsante cliccabile con button o un pulsante di attivazione/disattivazione con switchControl.

Utilizza il widget DecoratedText quando devi presentare le informazioni in modo semplice da utilizzare e interattivo. Il widget è perfetto per casi d'uso come schede di contatto, aggiornamenti dello stato dell'ordine e notifiche dei ticket di lavoro.

Il widget DecoratedText supporta la formattazione HTML di testo semplice. Quando imposti il contenuto di testo di questi widget, includi solo i tag HTML corrispondenti. Per saperne di più sui tag HTML supportati, consulta Formattazione del testo delle schede.

Di seguito è riportata una scheda composta da un widget DecoratedText utilizzato per visualizzare i dettagli di contatto, come indirizzo email, stato online, numero di telefono e sito web:

Risoluzione dei problemi

Quando un'app o scheda di Google Chat restituisce un errore, l' interfaccia di Chat mostra un messaggio che indica "Si è verificato un problema" o "Impossibile elaborare la richiesta". A volte l'interfaccia utente di Chat non mostra alcun messaggio di errore, ma l'app o la scheda di Chat produce un risultato imprevisto; ad esempio, un messaggio della scheda potrebbe non essere visualizzato.

Anche se nell'interfaccia utente di Chat potrebbe non essere visualizzato un messaggio di errore, sono disponibili messaggi di errore descrittivi e dati di log per aiutarti a correggere gli errori quando la registrazione degli errori per le app di Chat è attivata. Per assistenza nella visualizzazione, nel debug e nella correzione degli errori, consulta Risolvere e correggere gli errori di Google Chat.