URL Formatter

Detect and style plain URLs as clickable links with optional tracking logic in CometChat Angular UI Kit.

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

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;
  }
}

Component Usage

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.