Skip to main content
The CometChatStickerBubble component is a presentational Angular component that renders sticker messages as images within the chat interface. It extracts the sticker image URL from the message’s metadata or custom data using a priority-based fallback chain and displays it with proper sizing, alignment, and accessibility support.

​
Overview

The Sticker Bubble component handles sticker message rendering while maintaining visual consistency with the design system:
  • Automatic URL Extraction: Extracts the sticker image URL from multiple metadata locations using a priority chain
  • Alignment Variants: Supports incoming (left) and outgoing (right) message styling
  • Constrained Sizing: Sticker images are capped at 150×150px with object-fit: contain
  • Graceful Fallbacks: Handles missing URLs, null messages, and metadata errors without crashing
  • Localized Alt Text: Uses the conversation_subtitle_sticker localization key for accessibility
  • BEM CSS: Follows Block Element Modifier naming convention with CSS variable theming
  • OnPush Change Detection: Optimal performance with minimal re-renders
Live Preview — Default sticker bubble preview. Open in Storybook ↗

​
Basic Usage

​
Simple Sticker Bubble (Incoming)

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatStickerBubbleComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-message',
  standalone: true,
  imports: [CometChatStickerBubbleComponent],
  template: `
    <cometchat-sticker-bubble
      [message]="stickerMessage">
    </cometchat-sticker-bubble>
  `
})
export class ChatMessageComponent {
  stickerMessage!: CometChat.CustomMessage;
}

​
Outgoing Sticker Message

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatStickerBubbleComponent,
  MessageBubbleAlignment
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-message',
  standalone: true,
  imports: [CometChatStickerBubbleComponent],
  template: `
    <cometchat-sticker-bubble
      [message]="stickerMessage"
      [alignment]="MessageBubbleAlignment.right">
    </cometchat-sticker-bubble>
  `
})
export class ChatMessageComponent {
  stickerMessage!: CometChat.CustomMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}

​
Incoming vs Outgoing Messages

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatStickerBubbleComponent,
  MessageBubbleAlignment
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-message-list',
  standalone: true,
  imports: [CometChatStickerBubbleComponent],
  template: `
    <!-- Incoming sticker (left-aligned) -->
    <cometchat-sticker-bubble
      [message]="incomingSticker"
      [alignment]="MessageBubbleAlignment.left">
    </cometchat-sticker-bubble>

    <!-- Outgoing sticker (right-aligned) -->
    <cometchat-sticker-bubble
      [message]="outgoingSticker"
      [alignment]="MessageBubbleAlignment.right">
    </cometchat-sticker-bubble>
  `
})
export class MessageListComponent {
  incomingSticker!: CometChat.CustomMessage;
  outgoingSticker!: CometChat.CustomMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}

​
Properties

PropertyTypeDefaultDescription
messageCometChat.CustomMessage | nullnullThe sticker custom message object. The component extracts the sticker image URL from the message’s metadata or custom data
alignmentMessageBubbleAlignmentMessageBubbleAlignment.leftBubble alignment. left for incoming/receiver messages, right for outgoing/sender messages

​
Sticker URL Extraction

The component extracts the sticker image URL from the message using a priority-based fallback chain. The first location that contains a value wins:
  1. metadata.data.sticker_url — Highest priority. Checked first via message.getMetadata().data.sticker_url
  2. metadata.sticker_url — Second priority. Checked via message.getMetadata().sticker_url
  3. customData.sticker_url — Final fallback. Checked via message.getCustomData().sticker_url
If no URL is found in any location, or if the message input is null/undefined, the component renders an empty container gracefully without errors. The extraction is wrapped in a try/catch to handle cases where getMetadata() or getCustomData() might throw.

​
Customization

​
Styling with CSS Variables

The Sticker Bubble component uses CSS variables for easy customization: 
/* Custom sticker bubble styling */
cometchat-sticker-bubble {
  /* Container padding */
  --cometchat-spacing-2: 8px;
}

​
Available CSS Variables

VariablePurposeDefault
--cometchat-spacing-2Container padding8px

​
BEM CSS Classes

The component exposes the following BEM classes for targeted styling:
ClassElementDescription
.cometchat-sticker-bubbleBlockRoot container
.cometchat-sticker-bubble--incomingModifierApplied when alignment is left (incoming message)
.cometchat-sticker-bubble--outgoingModifierApplied when alignment is right (outgoing message)
.cometchat-sticker-bubble__imageElementThe sticker <img> element (max 150×150px, object-fit: contain)

​
Custom Sizing

/* Larger stickers */
::ng-deep .cometchat-sticker-bubble__image {
  max-width: 200px;
  max-height: 200px;
}

/* Smaller stickers */
::ng-deep .cometchat-sticker-bubble__image {
  max-width: 100px;
  max-height: 100px;
}

​
Dark Theme

The component inherits theme changes automatically through CSS variables. No additional configuration is needed for dark theme support: 
// Switch to dark theme
document.documentElement.setAttribute('data-theme', 'dark');

​
Accessibility

The Sticker Bubble component follows WCAG 2.1 Level AA guidelines.

​
ARIA Attributes

AttributeElementValuePurpose
roleContainer"img"Identifies the container as an image region
aria-labelContainerLocalized conversation_subtitle_sticker textProvides accessible name for screen readers
altImageLocalized conversation_subtitle_sticker textText alternative for the sticker image

​
Screen Reader Behavior

Screen readers announce the sticker bubble using the localized conversation_subtitle_sticker text (e.g., “Sticker”). When the sticker image fails to load, the alt text is retained so screen readers can still convey the content.

​
Best Practices

The component automatically handles sticker URL extraction from multiple metadata locations. Just pass the CometChat.CustomMessage object directly.
The component expects a CometChat.CustomMessage with category custom and type containing sticker. Passing other message types will result in no sticker URL being found.
The sticker image is constrained to 150×150px with object-fit: contain, preserving the original aspect ratio without cropping.
  • CometChatMessageBubble: Parent component that delegates sticker rendering to this component
  • CometChatImageBubble: Displays image messages (similar pattern, different message type)
  • CometChatDeleteBubble: Displays deleted message placeholders (similar simple bubble pattern)
  • CometChatMessageList: Displays lists of messages including sticker bubbles

​
Technical Details

  • Standalone Component: Can be imported and used independently
  • Change Detection: Uses OnPush change detection strategy for optimal performance
  • Dependencies: Angular CommonModule, CometChat SDK, TranslatePipe for localization
  • BEM CSS: Follows Block Element Modifier naming convention
  • Max Dimensions: 150×150px with object-fit: contain
  • URL Extraction: Priority-based fallback chain across three metadata locations