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, vedi Creare schede per le app Google Chat.

Utilizza Card Builder per progettare e visualizzare in anteprima le interfacce utente e di messaggistica per le app di chat:

Apri il generatore di schede

Prerequisiti

Un'app 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, ad esempio 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 la sua altezza si adatta per mantenere le proporzioni dell'immagine. Il widget Image supporta onclick azioni che si verificano quando gli utenti fanno clic sull'immagine. Esempi di azioni onclick includono:

  • 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 performanti, la dimensione massima consigliata per le immagini è 2 MB.

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

Aggiungere un componente immagine

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

  • Usa SQUARE per applicare un ritaglio quadrato.
  • Usa 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 ciascuna immagine:

Aggiungi un'icona

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

  • Visualizza un'icona autonoma.
  • Mostra un'icona davanti al testo correlato, nell'ambito di un widget DecoratedText.
  • Visualizza un'icona come pulsante interattivo all'interno 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 delle schede:

AIRPLANE BOOKMARK
BUS CAR
OROLOGIO CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITA MAP_PIN
ABBONAMENTO MULTIPLE_PEOPLE
PERSON TELEFONO
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 ulteriori informazioni sui tag HTML supportati, vedi Formattare il testo visualizzato nelle schede.

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

  • Visualizza il testo in grassetto, sottolineato o 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 HTML <font color="#ea9999">font tags</font>.

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

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 maggiori 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 testo con elementi decorativi

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

  • Visualizza un icon davanti al testo con startIcon.
  • Mostra un titolo prima del testo con topLabel.
  • Aggiungi un pulsante su cui è possibile fare clic con button o un pulsante di attivazione/disattivazione con switchControl.

Utilizza il widget DecoratedText quando devi presentare le informazioni in modo interattivo e facile da consumare. Il widget è perfetto per casi d'uso come schede di contatto, aggiornamenti sullo 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 maggiori informazioni 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 tua richiesta". A volte l'interfaccia utente di Chat non mostra alcun messaggio di errore, ma l'app o la scheda 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 i problemi e correggere gli errori di Google Chat.