Appearance

Widgets & Components ​

Pre-release Version

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

Google Chat Cards feature a comprehensive set of layout widgets and interactive components.

DecoratedText (Replaces Legacy KeyValue) ​

DecoratedText displays structured data rows with optional top/bottom labels, start/end icons, click-through URLs, or inline action buttons.

php
use NotificationChannels\GoogleChat\Widgets\DecoratedText;
use NotificationChannels\GoogleChat\Components\Button;
use NotificationChannels\GoogleChat\Enums\Icon;

// Basic Decorated Text
DecoratedText::create('John Doe')
    ->topLabel('Assigned Engineer')
    ->startIcon(Icon::PERSON);

// Decorated Text with Click Action & Button
DecoratedText::create('https://github.com/eighteen73/laravel-google-chat')
    ->topLabel('Repository')
    ->bottomLabel('Open Source Package')
    ->startIcon(Icon::BOOKMARK)
    ->openUrl('https://github.com/eighteen73/laravel-google-chat')
    ->button(
        Button::text('View Code')->openUrl('https://github.com/eighteen73/laravel-google-chat')
    );

Icon Options (Icon Enum or Custom Image URL) ​

Icons can be assigned using the strict NotificationChannels\GoogleChat\Enums\Icon backed enum or a custom HTTPS image URL:

php
// Using Icon Enum
$decoratedText->startIcon(Icon::TRAIN);

// Using Custom HTTPS Image URL
$decoratedText->startIcon('https://cdn.example.com/custom-icon.png');

ButtonList & Button ​

ButtonList arranges one or more Button components horizontally inside a card section.

php
use NotificationChannels\GoogleChat\Widgets\ButtonList;
use NotificationChannels\GoogleChat\Components\Button;
use NotificationChannels\GoogleChat\Enums\Icon;

ButtonList::create([
    Button::text('Approve')
        ->icon(Icon::CHECK)
        ->openUrl('https://app.example.com/orders/1048/approve'),

    Button::text('Reject')
        ->icon(Icon::CLOSE)
        ->disabled(false)
        ->openUrl('https://app.example.com/orders/1048/reject'),
]);

Custom Interactivity Actions (onClickAction) ​

Buttons can trigger custom webhook actions or function callbacks instead of opening URLs:

php
Button::text('Run Diagnostics')
    ->onClickAction('triggerDiagnostics', [
        'serverId' => 'web-prod-01',
        'region' => 'eu-west-1',
    ]);

Divider ​

Divider inserts a clean horizontal dividing line between widgets:

php
use NotificationChannels\GoogleChat\Widgets\Divider;

$section->decoratedText('Item 1')
    ->widget(Divider::create())
    ->decoratedText('Item 2');

Or fluently on a section: $section->divider();.

Columns (Multi-Column Layouts) ​

Columns splits a section into side-by-side columns:

php
use NotificationChannels\GoogleChat\Widgets\Columns;
use NotificationChannels\GoogleChat\Widgets\DecoratedText;

$section->columns(function ($cols) {
    $cols->column([
        DecoratedText::create('GBP 1,200.00')->topLabel('Subtotal'),
    ]);
    $cols->column([
        DecoratedText::create('GBP 240.00')->topLabel('VAT (20%)'),
    ]);
    $cols->column([
        DecoratedText::create('GBP 1,440.00')->topLabel('Total Paid'),
    ]);
});

TextParagraph ​

TextParagraph displays multiline rich text inside a section:

php
use NotificationChannels\GoogleChat\Widgets\TextParagraph;

TextParagraph::create('Deployment logs for **web-prod-01** completed with *0 errors*.');

Image ​

Image renders a full-width image inside a section with optional click-through action:

php
use NotificationChannels\GoogleChat\Widgets\Image;

Image::create(
    imageUrl: 'https://cdn.example.com/charts/sales-q3.png',
    onClickUrl: 'https://analytics.example.com/reports/q3'
)->altText('Q3 Sales Performance Chart');

Sticky FixedFooter ​

FixedFooter sticks action buttons to the bottom of the card viewport:

php
use NotificationChannels\GoogleChat\Card;
use NotificationChannels\GoogleChat\Components\FixedFooter;
use NotificationChannels\GoogleChat\Components\Button;

$card->fixedFooter(
    FixedFooter::create()
        ->primaryButton(
            Button::text('Confirm Payment')->openUrl('https://example.com/checkout/confirm')
        )
        ->secondaryButton(
            Button::text('Cancel')->openUrl('https://example.com/checkout/cancel')
        )
);

Overflow Menu Actions (CardAction) ​

CardAction adds menu items to the card's top-right overflow menu:

php
use NotificationChannels\GoogleChat\Card;
use NotificationChannels\GoogleChat\Components\CardAction;

$card->cardActions([
    CardAction::create('Export as PDF', 'https://example.com/invoices/1048.pdf'),
    CardAction::create('Print Invoice', 'https://example.com/invoices/1048/print'),
]);

Google API Reference ​

For further details on all available Google Chat widget properties and icon types, visit Google's API references:

Copyright © 2025 eighteen73