Aggiungere testo e immagini alle schede

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

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

Utilizza lo strumento per la creazione di schede per progettare e visualizzare l'anteprima di interfacce utente e messaggistica per le app di chat:

Apri lo strumento per la creazione di schede

Prerequisiti

Un'app Google Chat per cui sono abilitate le funzionalità interattive. Per creare un'app Chat interattiva, completa una delle seguenti guide introduttive 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 visualizza 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 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 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, le dimensioni massime consigliate per le immagini sono 2 MB.

Di seguito è riportata una scheda composta da un widget Image. Viene visualizzata 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 widget imageCompent ti consente di applicare cropStyle e borderStyle a un'immagine.

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

Puoi regolare la forma di un componente immagine applicando un 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 un formato personalizzato. 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 distinto applicato a ogni immagine:

Aggiungi un'icona

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

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

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 della scheda:

AIRPLANE BOOKMARK
BUS AUTO
OROLOGIO CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
ABBONAMENTO MULTIPLE_PEOPLE
PERSON TELEFONO
RESTAURANT_ICON SHOPPING_CART
STAR NEGOZIO
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 semplicemente i tag HTML corrispondenti. Per ulteriori informazioni sui tag HTML supportati, consulta Formattare il testo visualizzato nelle schede.

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

  • Mostra il testo in grassetto, sottolineato o in corsivo con i tag HTML <b>, <u>, <i>.
  • Inserisci 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 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.

Mostrare 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 facile da consumare e interattivo. Il widget è perfetto per casi d'uso come schede contatto, aggiornamenti dello stato degli ordini 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 semplicemente i tag HTML corrispondenti. Per maggiori informazioni sui tag HTML supportati, consulta Formattazione del testo della scheda.

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 una scheda di Google Chat 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 Chat o la scheda produce un risultato imprevisto; ad esempio, un messaggio della scheda potrebbe non essere visualizzato.

Sebbene un messaggio di errore potrebbe non essere visualizzato nell'interfaccia utente di Chat, sono disponibili messaggi di errore descrittivi e dati di log per aiutarti a correggere gli errori quando la registrazione degli errori per le app Chat è attivata. Per assistenza su come visualizzare, eseguire il debug e correggere gli errori, consulta la sezione Risolvere gli errori di Google Chat.