Appearance

Card Messages ​

Pre-release Version

These documentation pages are for the pre-release v2 of this package.

Google Chat Cards provide visually rich, interactive message cards containing headers, formatted text sections, images, button lists, and sticky footers.

Card Architecture ​

A card message follows a structured component tree:

text
GoogleChatMessage
└── cardsV2 (Array)
    └── Card (cardId: "card-1")
        ├── Header (title, subtitle, imageUrl, imageType)
        ├── Sections (Array)
        │   └── Section (header, collapsible)
        │       └── Widgets (DecoratedText, ButtonList, Columns, Divider, Image, etc.)
        └── FixedFooter (sticky bottom actions)

Building Cards ​

You can add cards to a message using object instances or fluent builder closures:

1. Fluent Closure Builder Syntax (Recommended) ​

php
use NotificationChannels\GoogleChat\Card;
use NotificationChannels\GoogleChat\Section;
use NotificationChannels\GoogleChat\Enums\Icon;
use NotificationChannels\GoogleChat\Enums\ImageType;
use NotificationChannels\GoogleChat\GoogleChatMessage;

public function toGoogleChat(object $notifiable): GoogleChatMessage
{
    return GoogleChatMessage::create()
        ->text('New Customer Order')
        ->card(function (Card $card) {
            $card->id('order-card-1048')
                ->header(
                    title: 'Order #1048',
                    subtitle: 'Placed by Acme Corporation',
                    imageUrl: 'https://cdn.example.com/icons/order.png',
                    imageType: ImageType::CIRCLE
                )
                ->section(function (Section $section) {
                    $section->header('Order Details')
                        ->decoratedText(
                            text: 'GBP 1,450.00',
                            topLabel: 'Total Value',
                            startIcon: Icon::DOLLAR
                        )
                        ->divider()
                        ->decoratedText(
                            text: 'Express Delivery (Next Day)',
                            topLabel: 'Shipping Method',
                            startIcon: Icon::BUS
                        );
                });
        });
}

2. Direct Object Instantiation ​

php
use NotificationChannels\GoogleChat\Card;
use NotificationChannels\GoogleChat\Section;
use NotificationChannels\GoogleChat\Widgets\DecoratedText;
use NotificationChannels\GoogleChat\Widgets\Divider;

public function toGoogleChat(object $notifiable): GoogleChatMessage
{
    $card = Card::create([
        Section::create([
            DecoratedText::create('GBP 1,450.00')
                ->topLabel('Total Value')
                ->startIcon('DOLLAR'),
            Divider::create(),
        ]),
    ])->header('Order #1048', 'Placed by Acme Corp');

    return GoogleChatMessage::create()->card($card);
}

Card Headers ​

Card headers display a prominent title, optional subtitle, and an avatar icon:

php
$card->header(
    title: 'Deployment Successful',
    subtitle: 'Environment: Production',
    imageUrl: 'https://cdn.example.com/avatar.png',
    imageType: ImageType::CIRCLE, // ImageType::CIRCLE or ImageType::SQUARE
    altText: 'Production Avatar'
);

Image Types (ImageType) ​

The NotificationChannels\GoogleChat\Enums\ImageType enum specifies avatar cropping:

  • ImageType::SQUARE (default): Square avatar with slightly rounded corners.
  • ImageType::CIRCLE: Circular avatar crop.

Collapsible Sections ​

Sections within a card can be made collapsible, enabling users to expand or collapse long technical logs or details:

php
$card->section(function (Section $section) {
    $section->header('Stack Trace Details')
        ->collapsible(uncollapsibleWidgetsCount: 1) // Show 1 widget by default when collapsed
        ->decoratedText('ErrorException: Undefined variable $user')
        ->textParagraph('Detailed trace information...')
        ->textParagraph('File: App/Http/Controllers/OrderController.php:42');
});

Attaching Multiple Cards ​

A single Google Chat message can contain multiple card objects in its cardsV2 array:

php
GoogleChatMessage::create()
    ->text('Daily Executive Summary')
    ->card($salesCard)
    ->card($supportCard);

Google API Reference ​

For detailed specifications on Cards v2 JSON schema and layout limits, consult Google's official documentation:

Copyright © 2025 eighteen73