URL Formatter - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-angular`
Key class	`CometChatUrlFormatter` (extends `CometChatTextFormatter`)
Required setup	`CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")`
Purpose	Auto-detects URLs in text messages and converts them to clickable links
Related	Custom Text Formatter \| All Guides

CometChatUrlFormatter extends CometChatTextFormatter to detect URLs in text messages and render them as clickable links.

Usage

Extend CometChatTextFormatter, set a regex pattern for URL detection, and override format() to handle formatting and click behavior.

CometChatUrlsFormatter.ts
Component Usage

import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";

export class CometChatUrlsFormatter extends CometChatTextFormatter {
  readonly id = "custom-url-formatter";
  override priority = 10;

  getRegex(): RegExp {
    return /(https?:\/\/[^\s]+)/g;
  }

  format(text: string): string {
    if (!text) {
      this.originalText = "";
      this.formattedText = "";
      return "";
    }

    this.originalText = text;
    this.formattedText = text.replace(
      this.getRegex(),
      '<a href="$1" class="clickable-url" target="_blank" rel="noopener noreferrer">$1</a>'
    );
    return this.formattedText;
  }
}

import { Component, OnInit } from "@angular/core";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageListComponent } from "@cometchat/chat-uikit-angular";
import { CometChatUrlsFormatter } from "./CometChatUrlsFormatter";

@Component({
  selector: "app-url-demo",
  standalone: true,
  imports: [CometChatMessageListComponent],
  template: `
    <cometchat-message-list
      [user]="chatUser"
      [textFormatters]="textFormatters">
    </cometchat-message-list>
  `,
})
export class UrlDemoComponent implements OnInit {
  chatUser: CometChat.User | undefined;
  textFormatters = [new CometChatUrlsFormatter()];

  ngOnInit() {
    CometChat.getUser("uid").then((user) => {
      this.chatUser = user;
    });
  }
}

Customization

Styling links

Apply CSS to your link class:

.clickable-url {
  color: var(--cometchat-primary-color);
  text-decoration: underline;
  cursor: pointer;
}

Handling clicks

Override onUrlClick to add tracking or custom navigation:

private onUrlClick(event: Event) {
  event.preventDefault();
  const target = event.target as HTMLAnchorElement;
  const url = target.href;
  // Add analytics tracking
  console.log("URL clicked:", url);
  window.open(url, "_blank", "noopener,noreferrer");
}

The CometChatUrlFormatter is included by default in the message list. You only need to pass it explicitly if you want to customize click behavior or combine it with other formatters.

Next Steps

Custom Text Formatter

Build custom inline text patterns.

Message List

Render real-time message threads.

All Guides

Browse all feature and formatter guides.

Mentions Formatter

Add @mentions with styled tokens.

​Usage

​Customization

​Styling links

​Handling clicks

​Next Steps

Custom Text Formatter

Message List

All Guides

Mentions Formatter

Usage

Customization

Styling links

Handling clicks

Next Steps