In questa pagina viene spiegato come aggiungere e formattare testo e immagini nelle schede.
Per ulteriori informazioni sulla creazione di schede, consulta Creare schede per le app Google Chat
Utilizza Card Builder per progettare e visualizzare l'anteprima di messaggi delle schede JSON per le app di chat:
Apri il generatore di schedePrerequisiti
Un'app di Google Chat abilitata per le funzionalità interattive. Per creare un interattiva di Chat, completa una delle seguenti guide rapide basate nell'architettura dell'app che vuoi utilizzare:
- Servizio HTTP con Google Cloud Functions
- Script di Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Aggiungere immagini o icone
Questa sezione spiega come aggiungere elementi visivi a schede quali immagini, componenti e icone dell'immagine.
Aggiungere un'immagine
Widget Image
mostra un'immagine PNG o JPG ospitata su un URL HTTPS.
L'immagine visualizzata occupa l'intera larghezza della scheda visualizzata; e
l'altezza viene regolata per mantenere le proporzioni dell'immagine. Widget Image
supporta
onclick
azioni
che si verificano quando gli utenti fanno clic sull'immagine. Esempio di azioni di tipo onclick
includono:
- Apri un link ipertestuale con
OpenLink
, ad esempio un link ipertestuale alla documentazione per gli sviluppatori di Google Chat,https://developers.google.com/chat
. - Esegui un azione che esegue una funzione personalizzata, ad esempio la chiamata a un'API.
Il widget Image
ha le seguenti limitazioni:
- Sono supportate solo immagini PNG e JPG.
- L'URL dell'host deve essere
HTTPS
. - Per garantire il rendimento ottimale delle schede, la dimensione massima consigliata per le immagini è 2 MB.
Di seguito è riportata una scheda composta da un widget Image
. Vengono visualizzate le
Immagine della pagina di destinazione della documentazione per gli sviluppatori di Google Chat. Quando gli utenti fanno clic sul
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
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 di immagine applicando una
cropStyle
È possibile applicare diverse forme a un'immagine:
- Utilizza
SQUARE
per applicare un ritaglio quadrato. - Usa
CIRCLE
per applicare un ritaglio circolare. - Utilizza
RECTANGLE_CUSTOM
per applicare un ritaglio rettangolare con un aspetto personalizzato rapporto. Ad esempio, puoi utilizzareRECTANGLE_4_3
per applicare un ritaglio rettangolare con proporzioni 4:3.
L'esempio seguente mostra cinque immagini in una griglia con un cropStyle
diverso
applicati a ciascuna immagine:
Aggiungi un'icona
La
Widget Icon
rappresenta un
integrato
icona o
personalizzato
. Puoi aggiungere icone alle schede per eseguire una delle seguenti operazioni:
- Mostrare un'icona indipendente.
- Visualizza un'icona davanti al testo correlato, come parte di una
Widget
DecoratedText
. - Visualizza un'icona come pulsante interattivo, all'interno di una
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 delle schede:
AEREO | SEGNAPOSTO | ||
BUS | AUTO | ||
OROLOGIO | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | VALORE | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
INVITA | MAP_PIN | ||
ABBONAMENTO | MULTIPLE_PEOPLE | ||
PERSONA | TELEFONO | ||
RESTAURANT_ICON | SHOPPING_CART | ||
STAR | NEGOZIO | ||
BIGLIETTO | ADDESTRAMENTO | ||
VIDEO_CAMERA | VIDEO_PLAY |
Aggiungere testo a una scheda
Questa sezione spiega come aggiungere e formattare il testo in una scheda.
Aggiungi un paragrafo di testo formattato
La
Widget TextParagraph
mostra un paragrafo di testo con formattazione HTML facoltativa. Durante l'impostazione
i contenuti testuali di questi widget, includi solo i tag HTML corrispondenti.
Per ulteriori informazioni sui tag HTML supportati, consulta
Formattare il testo visualizzato nelle schede.
Ad esempio, la seguente formattazione è disponibile per il testo dei paragrafi:
- Mostra il testo in grassetto, sottolineato o corsivo con HTML
<b>
,<u>
,<i>
i tag. - Link a siti web con HTML
<a href="https://www.google.com">hyperlinks</a>
. - Aggiungi dei colori con l'HTML
<font color="#ea9999">font tags</font>
.
Ogni widget TextParagraph
viene visualizzato come un nuovo paragrafo e può essere pensato
simili a un tag HTML <p>
.
Di seguito è riportata una scheda composta da due widget TextParagraph
usati per
visualizza due paragrafi con formattazione HTML semplice:
Aggiungere un paragrafo di testo comprimibile
I paragrafi di testo comprimibili consentono agli utenti di rivelare maggiori informazioni on demand. Questo widget è perfetto per presentare contenuti lunghi o dettagli aggiuntivi che possono essere esplorate quando si selezionano, creando così un utente dinamico e interattivo un'esperienza senza intervento manuale.
Testo visualizzato con elementi decorativi
La
Widget DecoratedText
mostra testo con funzionalità e layout facoltativi. Ad esempio:
- Visualizza un
icon
davanti al testo constartIcon
. - Mostra un titolo prima del testo con
topLabel
. - Aggiungi un pulsante cliccabile con
button
o un pulsante di attivazione/disattivazione commutabile conswitchControl
.
Usa il widget DecoratedText
quando devi presentare informazioni in una
facile da usare e interattivo. Il widget è perfetto per casi d'uso come
schede contatti, aggiornamenti sullo stato degli ordini e notifiche relative ai ticket di lavoro.
Il widget DecoratedText
supporta la formattazione HTML di testo semplice. Durante l'impostazione
i contenuti testuali di questi widget, includi solo i tag HTML corrispondenti. Per
per ulteriori informazioni sui tag HTML supportati, consulta
Formattazione del testo della scheda.
Di seguito è riportata una scheda composta da un widget DecoratedText
usato per visualizzare
informazioni di contatto, quali indirizzo email, stato online, numero di telefono e
sito web:
Risoluzione dei problemi
Quando un'app Google Chat o card restituisce un errore, L'interfaccia di Chat mostra il messaggio "Si è verificato un problema". o "Impossibile elaborare la richiesta". A volte, l'UI di Chat non mostra alcun messaggio di errore, ma l'app Chat o la scheda restituisce un risultato inaspettato; Ad esempio, il messaggio di una scheda potrebbe non vengono visualizzate.
Anche se un messaggio di errore potrebbe non essere visualizzato nella UI di Chat, messaggi di errore descrittivi e dati di log che ti aiuteranno a correggere gli errori quando il logging degli errori per le app di chat è attivo. Per assistenza con la visualizzazione, il debug e la correzione degli errori, consulta Risolvere i problemi e correggere gli errori di Google Chat.
Argomenti correlati
- Visualizza esempi di app di Chat che utilizzano le schede.
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText