In questa pagina viene spiegato come aggiungere testo e immagini a una scheda o in un messaggio di dialogo e come modificare l'aspetto del testo e delle immagini all'interno del messaggio.
Progetta e visualizza l'anteprima delle schede con Card Builder.
Apri Card BuilderPrerequisiti
Aggiungi 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 le azioni onclick 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 gli sviluppatori di Google Chathttps://developers.google.com/chat. - Esegui un'azione che esegua una funzione personalizzata, ad esempio una chiamata a un'API.
Il widget Image presenta le seguenti limitazioni:
- Sono supportate solo immagini PNG e JPG.
- L'URL dell'host deve essere
HTTPS. - Per garantire schede ad alte prestazioni, la dimensione massima consigliata delle immagini è 2 MB.
Quella che segue è una scheda costituita 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 stili limitati. Un
widget imageCompent
consente di applicare cropStyle e borderStyle a un'immagine.
L'esempio seguente mostra due immagini in una griglia in cui viene ritagliata una delle immagini:
Ritagliare un'immagine
Puoi regolare la forma di un'immagine applicando una
cropStyle.
Puoi applicare diverse forme a un'immagine:
- Usa
SQUAREper applicare un ritaglio quadrato. - Usa
CIRCLEper applicare un ritaglio circolare. - Usa
RECTANGLE_CUSTOMper applicare un ritaglio rettangolare con proporzioni personalizzate. Ad esempio, puoi utilizzareRECTANGLE_4_3per applicare un ritaglio rettangolare con proporzioni 4:3.
L'esempio seguente mostra cinque immagini in una griglia con un valore cropStyle diverso applicato a ogni immagine:
Aggiungi un'icona
Il widget Icon rappresenta un'icona integrata o un'icona
personalizzata. Puoi utilizzare Icon nei
messaggi delle schede
e nelle
finestre di dialogo
nei seguenti modi:
- Mostra un'icona autonoma.
- Mostra un'icona davanti al testo correlato, all'interno di un widget
DecoratedText. - Mostrare un'icona sotto forma di pulsante interattivo, all'interno di un widget
ButtonList.
Di seguito è riportata una scheda costituita da un componente Icon con un'icona integrata:
Nella tabella seguente sono elencate le icone integrate disponibili per i messaggi delle schede:
| AEREO | BOOKMARK | ||
| BUS | AUTO | ||
| OROLOGIO | CONFIRMATION_NUMBER_ICON | ||
| DESCRIPTION | VALUTA | ||
| EVENT_SEAT | |||
| FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
| HOTEL | HOTEL_ROOM_TYPE | ||
| INVITA | MAP_PIN | ||
| ABBONAMENTO | MULTIPLE_PEOPLE | ||
| PERSONA | TELEFONO | ||
| RESTAURANT_ICON | SHOPPING_CART | ||
| AGGIUNGI A SPECIALI | NEGOZIO | ||
| BIGLIETTO | TRAIN | ||
| VIDEO_CAMERA | VIDEO_PLAY |
Aggiungi un paragrafo di testo formattato
Il widget TextParagraph mostra un paragrafo di testo con formattazione HTML facoltativa. Quando imposti i contenuti testuali di questi widget, includi solo i tag HTML corrispondenti.
Per ulteriori informazioni sui tag HTML supportati, consulta la sezione Formattazione del testo delle schede.
Ad esempio, per il testo di un paragrafo è disponibile la seguente formattazione:
- Visualizza il testo in grassetto, sottolineato o in corsivo con i tag HTML
<b>,<u>e<i>. - Link a siti web con HTML
<a href="https://www.google.com">hyperlinks</a>. - Aggiungi del 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 semplice formattazione HTML:
Testo visualizzato con elementi decorativi
Il widget DecoratedText mostra del testo con funzionalità e layout facoltativi. Ad esempio:
- Mostra
icondavanti al testo constartIcon. - Mostra un titolo prima del testo con
topLabel. - Aggiungi un pulsante cliccabile con
buttono un pulsante di attivazione/disattivazione commutabile conswitchControl.
Utilizza il widget DecoratedText quando devi presentare informazioni in modo
facile da fruire e interattivo. Il widget è perfetto per casi d'uso come
schede contatti, aggiornamenti sullo stato degli ordini e notifiche sui ticket di lavoro.
Il widget DecoratedText supporta la formattazione HTML di testo semplice. Quando imposti i contenuti testuali di questi widget, includi solo i tag HTML corrispondenti. Per ulteriori informazioni sui tag HTML supportati, consulta la sezione Formattazione del testo delle schede.
Di seguito è riportata una scheda costituita da un widget DecoratedText utilizzato per visualizzare
dettagli di contatto, come indirizzo email, stato online, numero di telefono e
sito web:
Risolvi il problema
Quando un'app o una scheda Google Chat restituisce un errore, nell'interfaccia di Chat viene visualizzato il messaggio "Si è verificato un problema" o "Impossibile elaborare la richiesta". A volte nell'interfaccia utente di Chat non vengono visualizzati messaggi di errore, ma l'app o la scheda Chat produce un risultato imprevisto; ad esempio, è possibile che non venga visualizzato un messaggio di scheda.
Anche se 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 di Chat è attivata. Per informazioni su visualizzazione, debug e correzione degli errori, consulta l'articolo Risolvere gli errori di Google Chat.