Aggiungere testo e immagini alle schede

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

Per scoprire di più sulla creazione di schede, consulta Crea schede per le app Google Chat.

Utilizza lo Strumento per la creazione di schede per progettare e visualizzare in anteprima i messaggi e le interfacce utente per le app di Chat:

Apri Card Builder

Prerequisiti

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

Aggiungi immagini o icone

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

Aggiungere un'immagine

Il widget Image 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 viene regolata per mantenere le proporzioni dell'immagine. Il widget Image supporta le azioni onclick che si verificano quando gli utenti fanno clic sull'immagine. Ecco alcuni esempi di azioni onclick:

  • Apri un link ipertestuale con OpenLink, ad esempio un link ipertestuale alla documentazione per lo sviluppo 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 il rendimento delle schede, la dimensione massima consigliata dell'immagine è di 2 MB.

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

Aggiungi un componente immagine

Il widget Image è un'immagine con uno stile limitato. Un widget ImageComponent ti 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 una 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:

Aggiungi un'icona

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

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

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

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

AIRPLANE BOOKMARK
BUS CAR
OROLOGIO 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

Aggiungi testo a una scheda

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

Aggiungi un paragrafo di testo formattato

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

Ad esempio, per il testo dei paragrafi è disponibile la seguente formattazione:

  • Visualizza il testo in grassetto, sottolineato o in corsivo con i tag HTML <b>, <u>, <i>.
  • Link a siti web con HTML <a href="https://www.google.com">hyperlinks</a>.
  • Aggiungi un po' di colore con l'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 formattazione HTML semplice:

Aggiungi un paragrafo di testo comprimibile

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

Mostra il testo con elementi decorativi

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

  • Mostra un 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 interattivo e di facile comprensione. Il widget è perfetto per casi d'uso come schede di contatto, aggiornamenti dello stato degli ordini e notifiche dei ticket di lavoro.

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

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

Risoluzione dei problemi

Quando un'app Google Chat o una scheda restituisce un errore, l'interfaccia di Chat mostra il messaggio "Si è verificato un problema". o "Impossibile elaborare la richiesta." A volte la UI di Chat non mostra alcun messaggio di errore, ma l'app di Chat o la scheda 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 il logging degli errori per le app di Chat è attivo. Per assistenza sulla visualizzazione, il debug e la correzione degli errori, consulta Risolvi i problemi e correggi gli errori di Google Chat.