Aggiungere testo e immagini a una scheda o una finestra di dialogo

In questa pagina viene spiegato come aggiungere testo e immagini a un messaggio di una scheda o di una finestra di dialogo e come modificare l'aspetto del testo e delle immagini all'interno del messaggio.

Utilizza Card Builder per progettare e visualizzare l'anteprima di messaggi delle schede JSON per le app di chat:

Apri Card Builder

Prerequisiti

  • Un account Google Workspace con accesso a Google Chat.
  • Un'app di Chat pubblicata. Per creare un'app di Chat, segui questa quickstart.

    • Aggiungi un'immagine

    Il widget Image mostra un'immagine PNG o JPG ospitata su un URL HTTPS. La larghezza dell'immagine visualizzata occupa tutta la larghezza della scheda visualizzata e l'altezza si regola per mantenere le proporzioni dell'immagine. Il 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 esegua 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 delle schede, la dimensione massima consigliata per le immagini è 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 è tagliata:

    Ritagliare un'immagine

    Puoi regolare la forma di un'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 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 un'icona personalizzata. Puoi utilizzare Icon nei messaggi nelle schede e nelle finestre di dialogo nei seguenti modi:

    • Mostrare un'icona indipendente.
    • Visualizza un'icona davanti al testo correlato, come parte di un widget DecoratedText.
    • Visualizza 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 delle schede:

    AEREO BOOKMARK
    BUS AUTO
    OROLOGIO CONFIRMATION_NUMBER_ICON
    DESCRIPTION VALORE
    EMAIL 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, la seguente formattazione è disponibile per il testo dei paragrafi:

    • Mostra il testo in grassetto, sottolineato o corsivo con tag HTML <b>, <u> e <i>.
    • 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 considerato simile a un tag <p> HTML.

    Di seguito è riportata una scheda composta da due widget TextParagraph utilizzati per visualizzare due paragrafi con formattazione HTML semplice:

    Testo visualizzato con elementi decorativi

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

    • Visualizza 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 commutabile con switchControl.

    Utilizza il widget DecoratedText quando devi presentare le informazioni in modo facile da utilizzare e interattivo. Il widget è perfetto per casi d'uso come schede contatti, aggiornamenti sullo stato degli ordini e notifiche per i 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 composta da un widget DecoratedText utilizzato per visualizzare dati 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, l'interfaccia di Chat mostra il messaggio "Si è verificato un problema". o "Impossibile elaborare la richiesta". A volte nella UI di Chat non viene visualizzato alcun messaggio di errore, ma l'app o la scheda Chat produce un risultato imprevisto. Ad esempio, il messaggio di una scheda potrebbe non essere visualizzato.

    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 il logging degli errori per le app di Chat è attivato. Per informazioni su visualizzazione, debug e correzione degli errori, vedi Risolvere i problemi e correggere gli errori di Google Chat.