diff --git a/.gitignore b/.gitignore index 96adadbc8..febf5f018 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store .kiro/ +/cometchat-uikit-react-6 diff --git a/docs.json b/docs.json index 9b489faf5..b456c973d 100644 --- a/docs.json +++ b/docs.json @@ -125,64 +125,53 @@ { "group": "User Experience", "pages": [ + "fundamentals/bitly", + "fundamentals/link-preview", "fundamentals/message-shortcuts", - "fundamentals/avatars", - "fundamentals/thumbnail-generation", - "fundamentals/link-preview", - "fundamentals/rich-media-preview", - "fundamentals/voice-transcription", "fundamentals/pin-message", + "fundamentals/rich-media-preview", "fundamentals/save-message", + "fundamentals/thumbnail-generation", "fundamentals/tinyurl", - "fundamentals/bitly" + "fundamentals/voice-transcription" ] }, - "fundamentals/notification-extensions", { "group": "User Engagement", "pages": [ - "fundamentals/email-replies", - "fundamentals/smart-replies", + "fundamentals/giphy", "fundamentals/message-translation", - "fundamentals/emojis", "fundamentals/polls", - "fundamentals/reactions", - "fundamentals/stickers-stipop", + "fundamentals/reminders", "fundamentals/stickers", - "fundamentals/video-broadcasting", - "fundamentals/mentions", - "fundamentals/giphy", - "fundamentals/tenor", - "fundamentals/gfycat", - "fundamentals/reminders" + "fundamentals/stickers-stipop", + "fundamentals/tenor" ] }, - "fundamentals/moderation-extensions", { "group": "Collaboration", "pages": [ - "fundamentals/collaborative-whiteboard", - "fundamentals/collaborative-document" + "fundamentals/collaborative-document", + "fundamentals/collaborative-whiteboard" ] - }, + }, { - "group": "Customer Support", + "group": "Security", "pages": [ - "fundamentals/chatwoot", - "fundamentals/intercom" + "fundamentals/disappearing-messages" ] }, { - "group": "Security", + "group": "Customer Support", "pages": [ - "fundamentals/disappearing-messages", - "fundamentals/end-to-end-encryption" + "fundamentals/chatwoot", + "fundamentals/intercom" ] } ] }, { - "group": "AI User Copilot", + "group": "Smart Chat Features", "pages": [ "fundamentals/ai-user-copilot/overview", "fundamentals/ai-user-copilot/conversation-starter", diff --git a/fundamentals/ai-user-copilot/conversation-starter.mdx b/fundamentals/ai-user-copilot/conversation-starter.mdx index 28f493ce8..00950a863 100644 --- a/fundamentals/ai-user-copilot/conversation-starter.mdx +++ b/fundamentals/ai-user-copilot/conversation-starter.mdx @@ -6,13 +6,21 @@ title: "Conversation Starter" ## Before you begin -1. Set up the AI settings through the CometChat dashboard as detailed in the [Overview section](/fundamentals/ai-user-copilot/overview). -2. Navigate to Chat > Features, under **AI User Copilot**, enable **Conversation Starter**. - - - - -3. Implement the chat functionality in your applications using [CometChat's **v4** Chat SDKs](/sdk/javascript/overview). + + + Set up AI in the CometChat dashboard as detailed in the [Overview](/fundamentals/ai-user-copilot/overview). + + + Go to **Chat** → **Features**, under **AI User Copilot**, enable **Conversation Starter**. + + + Implement chat using [CometChat v4 Chat SDKs](/sdk/javascript/overview). + + + + + + ## How does it work? @@ -20,13 +28,11 @@ CometChat AI analyzes the user's tone and writing style by reviewing recent mess The SDK includes a method for retrieving conversation starters in a chat. This method returns an array containing three potential starters for the conversation. -The number of messages to be fetched to generate relevant conversation starter is configurable. By default the CometChat AI takes the latest `1000` messages. This can be configured to specific timestamps as well. +The number of messages used to generate conversation starters is configurable. By default, CometChat AI uses the latest `1000` messages. You can also use timestamps. -| Configuration | Value | -| ------------- | ------------------------------------------------------ | -| lastNMessages | This will fetch specific number of messages. | -| fromTimestamp | This will fetch messages from a particular timestamp. | -| toTimestamp | This will fetch messages until a particular timestamp. | +- **lastNMessages**: Fetch a specific number of recent messages. +- **fromTimestamp**: Fetch messages from a particular timestamp. +- **toTimestamp**: Fetch messages up to a particular timestamp. diff --git a/fundamentals/ai-user-copilot/conversation-summary.mdx b/fundamentals/ai-user-copilot/conversation-summary.mdx index 3edde4882..3e1e311f7 100644 --- a/fundamentals/ai-user-copilot/conversation-summary.mdx +++ b/fundamentals/ai-user-copilot/conversation-summary.mdx @@ -6,13 +6,21 @@ title: "Conversation Summary" ## Before you begin -1. Set up the AI settings through the CometChat dashboard as detailed in the [Overview section](/fundamentals/ai-user-copilot/overview). -2. Navigate to Chat > Features, under **AI User Copilot**, enable **Conversation Summary**. - - - - -3. Implement the chat functionality in your applications using [CometChat's **v4** Chat SDKs](/sdk/javascript/overview). + + + Set up AI in the CometChat dashboard as detailed in the [Overview](/fundamentals/ai-user-copilot/overview). + + + Go to **Chat** → **Features**, under **AI User Copilot**, enable **Conversation Summary**. + + + Implement chat using [CometChat v4 Chat SDKs](/sdk/javascript/overview). + + + + + + ## How does it work? @@ -20,14 +28,12 @@ CometChat AI goes through the messages of a conversation to understand the conte The CometChat SDK has a method to fetch the conversation summary. It returns the conversation summary as a string. -The number of messages to be fetched to generate relevant summaries is configurable. By default the CometChat AI takes the latest `1000` messages. This can be configured to specific timestamps as well. +The number of messages used to generate summaries is configurable. By default, CometChat AI uses the latest `1000` messages. You can also use timestamps. -| Configuration | Value | -| ------------- | ------------------------------------------------------ | -| lastNMessages | This will fetch specific number of messages. | -| fromTimestamp | This will fetch messages from a particular timestamp. | -| toTimestamp | This will fetch messages until a particular timestamp. | -| unreadOnly | This will fetch only the unread messages. | +- **lastNMessages**: Fetch a specific number of recent messages. +- **fromTimestamp**: Fetch messages from a particular timestamp. +- **toTimestamp**: Fetch messages up to a particular timestamp. +- **unreadOnly**: Fetch only unread messages. diff --git a/fundamentals/ai-user-copilot/overview.mdx b/fundamentals/ai-user-copilot/overview.mdx index f8bd53889..883dbbc2a 100644 --- a/fundamentals/ai-user-copilot/overview.mdx +++ b/fundamentals/ai-user-copilot/overview.mdx @@ -1,41 +1,51 @@ --- -title: "AI User Copilot" +title: "Smart Chat Features" sidebarTitle: "Overview" --- -## AI-Enabled Messaging Experience +CometChat AI helps conversations start faster, stay on track, and wrap up clearly with smart suggestions and summaries. -Picture a chat that effortlessly starts and flows, like catching up with your best buddy over a cup of coffee. With CometChat AI, we're making that a reality! Introducing **Conversation Starter** and **Smart Replies** that ignite natural and organic conversations. Say goodbye to awkward silences and hello to chat-filled adventures! +## Features -For those who require a concise overview of their discussions, the **Conversation Summary** feature is available to provide a succinct recap. +- **[Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter)**: Suggests the first message to kick off a conversation. +- **[Smart Replies](/fundamentals/ai-user-copilot/smart-replies)**: Provides quick, context-aware replies. +- **[Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary)**: Generates a concise summary of a conversation. -## Pre-requisite +## Prerequisites -* Login to your [CometChat dashboard](https://app.cometchat.com/login) and choose your app. -* Navigate to **AI Chatbot** > **Settings** in the left-hand menu. + + + Login to your [CometChat dashboard](https://app.cometchat.com/login) and choose your app. + + + Navigate to **AI Chatbot** → **Settings** in the left-hand menu. + + -### Set the GPT Model - -Enter the name of the Open AI ChatGPT model that you intend to use. - -### Save the Open AI Key - -You can get the Open AI Key from your [Open AI Account](https://platform.openai.com/account/api-keys). This will be used by CometChat to interact with the Open AI APIs. - -### Set a Custom Instruction - -Custom Instruction is an information which gets added in each and every ChatGPT prompt made by the CometChat AI. Custom Instruction is app-level information you can add to describe your use-case & inform what kind of responses you need from the CometChat AI. - -### Set the Temperature - -The API is non-deterministic by default. This means that you might get a slightly different completion every time you call it, even if your prompt stays the same. Setting temperature to 0 will make the outputs mostly deterministic, but a small amount of variability will remain. - -Lower values for temperature result in more consistent outputs, while higher values generate more diverse and creative results. Select a temperature value based on the desired trade-off between coherence and creativity for your specific application. - -### Enable AI - -Toggle on AI. +## Configure AI + + + + Enter the OpenAI ChatGPT model name you intend to use. + + + Generate an API key from your [OpenAI account](https://platform.openai.com/account/api-keys) and save it here. + + + Add app-level context to guide how CometChat AI responds. + + + Choose a value based on the desired balance between consistency and creativity. + + + Toggle AI on to activate these features. + + + + +Lower temperature values produce more consistent responses, while higher values are more creative. + diff --git a/fundamentals/ai-user-copilot/smart-replies.mdx b/fundamentals/ai-user-copilot/smart-replies.mdx index 789614bff..2c2d5f165 100644 --- a/fundamentals/ai-user-copilot/smart-replies.mdx +++ b/fundamentals/ai-user-copilot/smart-replies.mdx @@ -6,13 +6,21 @@ title: "Smart Replies" ## Before you begin -1. Configure the AI settings through the CometChat dashboard as detailed in the [Overview section](/fundamentals/ai-user-copilot/overview). -2. Navigate to Chat > Features, under **AI User Copilot**, enable **Smart Replies**. - - - - -3. Implement the chat functionality in your applications using [CometChat's **v4** Chat SDKs](/sdk/javascript/overview). + + + Set up AI in the CometChat dashboard as detailed in the [Overview](/fundamentals/ai-user-copilot/overview). + + + Go to **Chat** → **Features**, under **AI User Copilot**, enable **Smart Replies**. + + + Implement chat using [CometChat v4 Chat SDKs](/sdk/javascript/overview). + + + + + + ## How does it work? @@ -20,14 +28,12 @@ CometChat AI goes through the messages of a conversation to understand the conte The CometChat SDK has a method to fetch the smart replies in a conversation. It returns an object of three replies with keys: `positive, negative & neutral`. -The number of messages to be fetched to generate relevant Smart Replies is configurable. By default the CometChat AI takes the latest `1000` messages. This can be configured to specific timestamps as well. +The number of messages used to generate smart replies is configurable. By default, CometChat AI uses the latest `1000` messages. You can also use timestamps. -| Configuration | Value | -| ------------- | ------------------------------------------------------ | -| lastNMessages | This will fetch specific number of messages. | -| fromTimestamp | This will fetch messages from a particular timestamp. | -| toTimestamp | This will fetch messages until a particular timestamp. | -| unreadOnly | This will fetch only the unread messages. | +- **lastNMessages**: Fetch a specific number of recent messages. +- **fromTimestamp**: Fetch messages from a particular timestamp. +- **toTimestamp**: Fetch messages up to a particular timestamp. +- **unreadOnly**: Fetch only unread messages. diff --git a/fundamentals/avatars.mdx b/fundamentals/avatars.mdx index f4e1beb98..4e92bb507 100644 --- a/fundamentals/avatars.mdx +++ b/fundamentals/avatars.mdx @@ -18,8 +18,14 @@ With the Avatars Extension, your users can upload your end-users' avatar directl ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Avatars extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Extensions** and enable the **Avatars** extension. + + ## How does it work? @@ -27,7 +33,9 @@ This extension allows the users to select an image for their avatar on CometChat Once the image file is selected for the avatar, it needs to be uploaded in the `base64` format. The extension hosts the image and updates its URL in the avatar section of the user's profile. Also, the avatar URL is sent back in the success response for being updated in your backend. -Image formats allowed by the extension are: `jpg`, `jpeg`, `png`, svg. + +Supported image formats: `jpg`, `jpeg`, `png`, `svg`. + Make use of the `callExtension` method provided by the CometChat SDK as shown below. diff --git a/fundamentals/bitly.mdx b/fundamentals/bitly.mdx index 6f206b2b0..08702c248 100644 --- a/fundamentals/bitly.mdx +++ b/fundamentals/bitly.mdx @@ -2,26 +2,73 @@ title: "Bitly" --- -*Learn how to minify the long website links in your text messages using Bitly.* +Use Bitly to shorten long URLs in messages and keep links clean and consistent. + + +**Available via:** +| Platform | Setup | +|----------|:-------:| +| [UI Kit Builder](/chat-builder/react/overview) | | +| [Widget Builder](/widget/html/overview) | Not Supported | +| [UI Kits](/ui-kit/react/overview) | | +| [SDK](/sdk/javascript/overview) | | + + + + +You need a Bitly Access Token and your Bitly Group GUID to enable this extension. + + +--- ## Before you begin -1. Sign up with [Bitly](https://bitly.com/). -2. Once you have logged in, click on the Account name displayed in the top right corner. -3. Click on Settings and in the left navigation pane, select API. -4. Click on Generate Token to create a new Access Token. -5. Using the above Access Token, fetch the GUID for your group using their [Get Groups API](https://dev.bitly.com/api-reference#getGroups). -6. The Access Token and Bitly Group's GUID are required in extension settings. + + + Sign up at [Bitly](https://bitly.com/). + + + In Bitly, open **Settings** → **API** and generate a new Access Token. + + + Use Bitly's [Get Groups API](https://dev.bitly.com/api-reference#getGroups) with the token to fetch your Group GUID. + + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Bitly extension. -3. Open the settings for this extension. -4. Enter your Bitly Access Token and Group's GUID. -5. Save your settings. + + + Login to [Dashboard](https://app.cometchat.com/login), select your app, then go to **Chat & Messaging --> Features**, under **Extentions** and enable **Bitly**. + + + Open the extension settings and enter your Bitly Access Token and Group GUID. + + + Save your configuration to activate the extension. + + + +--- + +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +#### UI Kit Builder +- Enable it in both **Dashboard** and **UI Kit Builder** settings, then you can use the **Bitly** extension in your custom chat experience. + +#### Widget Builder +- **Bitly** is not supported in the Widget Builder. Please use one of the other integration methods. + +#### UI Kits +- Enable it in the **Dashboard** settings, then you can use the **Bitly** extension in your custom chat experience built with our **UI Kits**. + +#### SDK +- Enable it in the **Dashboard** settings, then you can use the Bitly extension in your custom chat experience built with our **SDK**. + +--- -## How does it work? +## Code This extension uses the `callExtension` method provided by the CometChat SDK. You can call the extension as follows: diff --git a/fundamentals/chatwoot.mdx b/fundamentals/chatwoot.mdx index c86831fc1..06569f5e6 100644 --- a/fundamentals/chatwoot.mdx +++ b/fundamentals/chatwoot.mdx @@ -10,33 +10,26 @@ The Chatwoot extension makes customer support seamless for your users. Instead o ## Before you begin -1. You may have an existing account created with Chatwoot. If not, sign up with [Chatwoot](https://app.chatwoot.com/app/auth/signup). - -2. Do the following mandatory setup on Chatwoot: - - 1. To add Agent(s): [Click here](https://www.chatwoot.com/docs/user-guide/add-agent-settings) - 2. To create a Channel and Inbox: [Click here](https://www.chatwoot.com/docs/product/channels/api/create-channel) - 3. Only mention the name of the channel for now. The webhook URL can be skipped. - -3. Get your Chatwoot Access token: - - 1. Once you have logged in, click on your avatar in the bottom left corner. - 2. Scroll to the bottom of the Account settings section that opens up. - 3. You should find the Access token. - -4. Get the inbox id: - - 1. Once you have logged in, click on the Settings icon in the left bar. - 2. Click on the "Inboxes" in the navigation. - 3. Click on the Inbox that you want to set up for the CometChat support. - 4. Copy the Inbox ID from the URL. For eg, if the URL is: `https://app.chatwoot.com/app/accounts/123/settings/inboxes/12128` then the Inbox ID is `12128.` - -5. Get the Account ID: - - 1. While you have the settings open, click on the Account Settings in the navigation bar - 2. Copy the Account ID from there. - -6. The above details will be required during the Extension's settings. + + + Sign up at [Chatwoot](https://app.chatwoot.com/app/auth/signup) if you don't already have an account. + + + - Add agents: [Chatwoot agent setup](https://www.chatwoot.com/docs/user-guide/add-agent-settings) + - Create a channel and inbox: [Chatwoot channel setup](https://www.chatwoot.com/docs/product/channels/api/create-channel) + - You can skip the webhook URL for now. + + + Open your avatar menu in the bottom-left, scroll to the Account settings section, and copy the Access token. + + + Go to **Settings** → **Inboxes**, open the target inbox, and copy the Inbox ID from the URL. + Example: `https://app.chatwoot.com/app/accounts/123/settings/inboxes/12128` → Inbox ID is `12128`. + + + In **Settings**, open **Account Settings** and copy the Account ID. + + @@ -54,21 +47,23 @@ The Chatwoot extension makes customer support seamless for your users. Instead o #### **On CometChat Dashboard** -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. - -2. Go to the Extensions section and enable the Chatwoot extension. - -3. Open the Settings for this extension. - -4. Enter the following details about your Chatwoot account (copied earlier): - - 1. Chatwoot Access token - 2. Chatwoot Account ID - 3. Chatwoot Inbox ID - -5. Enter the user's UID on CometChat who's going to be the Customer Support contact. - -6. Once you save the settings, a webhook URL will be generated for you. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Chatwoot**. + + + Enter your Chatwoot Access token, Account ID, and Inbox ID. + + + Enter the CometChat UID for your Customer Support contact. + + + Save to generate the webhook URL. + + @@ -76,9 +71,14 @@ The Chatwoot extension makes customer support seamless for your users. Instead o #### On Chatwoot Dashboard -1. Go to the Settings and the Inboxes section. -2. Click on the settings icon for the inbox in use. -3. Paste the above copied URL in the Webhook URL section. + + + Go to **Settings** → **Inboxes**, then open the settings for the target inbox. + + + Paste the CometChat-generated webhook URL into the **Webhook URL** field. + + diff --git a/fundamentals/collaborative-document.mdx b/fundamentals/collaborative-document.mdx index 6ea7bcf52..5dbcbfc56 100644 --- a/fundamentals/collaborative-document.mdx +++ b/fundamentals/collaborative-document.mdx @@ -6,8 +6,14 @@ Learn how to collaborate using a document. ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Collaborative Document extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Collaborative Document**. + + ## How does it work? @@ -15,8 +21,8 @@ Learn how to collaborate using a document. Using the Collaborative Document extension is pretty straight-forward. As an initiator, you only have to create a session. The extension will handle the following for you: -1. Provide you with a link for collaboration. -2. Forward the link as an invitation to the receivers. +- **Create a collaboration link**: Generate a document link for the session. +- **Invite collaborators**: Send the link as an invitation to receivers. You can initiate the session in either one-on-one chat or a group chat. The session can be shared by simply submitting the `receiver` (uid/guid) and `receiverType` (user/group). diff --git a/fundamentals/collaborative-whiteboard.mdx b/fundamentals/collaborative-whiteboard.mdx index d0b415dd7..a1bf5a8b6 100644 --- a/fundamentals/collaborative-whiteboard.mdx +++ b/fundamentals/collaborative-whiteboard.mdx @@ -6,8 +6,14 @@ Connect with other users of the app and collaborate using a Whiteboard. ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Collaborative Whiteboard extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Collaborative Whiteboard**. + + ## How does it work? @@ -15,8 +21,8 @@ Connect with other users of the app and collaborate using a Whiteboard. Using the Collaborative Whiteboard extension is pretty straight-forward. As an initiator, you only have to create a session. The extension will handle the following for you: -1. Provide you with a link for collaboration. -2. Forward the link as an invitation to the receivers. +- **Create a collaboration link**: Generate a whiteboard link for the session. +- **Invite collaborators**: Send the link as an invitation to receivers. You can initiate a whiteboard in either one-on-one chat or a group chat. The session can be shared by simply submitting the `receiver` (uid/guid) and `receiverType` (user/group). diff --git a/fundamentals/disappearing-messages.mdx b/fundamentals/disappearing-messages.mdx index 73d8ec55a..24510d82f 100644 --- a/fundamentals/disappearing-messages.mdx +++ b/fundamentals/disappearing-messages.mdx @@ -8,17 +8,21 @@ This extension is also known as exploding messages on some platforms. ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Disappearing messages extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Disappearing Messages**. + + ## How does it work? Once the messages are sent, you can immediately schedule them for deletion using the disappearing messages extension. The message with the mentioned `msgId` gets deleted at `timeInMS`. - -The value of timeInMS should strictly be less than 1 year - +The value of `timeInMS` should be less than 1 year. This extension uses the `callExtension` method provided by the CometChat SDK. diff --git a/fundamentals/extensions-overview.mdx b/fundamentals/extensions-overview.mdx index d6e58d1dd..cf157b727 100644 --- a/fundamentals/extensions-overview.mdx +++ b/fundamentals/extensions-overview.mdx @@ -3,73 +3,106 @@ title: "Extensions" sidebarTitle: "Overview" --- -We believe that building a great chat product does not consist of just voice, video and text chat. It's much more than that. And Extensions are our answer to this. - -Extensions pickup where our core leaves. They help extend the functionality of CometChat. - -### User Experience - -Extensions that help improve the user messaging experience. *Recommended for most apps.* - -[Pin message](/fundamentals/pin-message)\ -[Bitly](/fundamentals/bitly)\ -[Avatars](/fundamentals/avatars)\ -[Message shortcuts](/fundamentals/message-shortcuts)\ -[Link Preview](/fundamentals/link-preview)\ -[Rich Media Preview](/fundamentals/rich-media-preview)\ -[Save message](/fundamentals/save-message)\ -[Thumbnail Generation](/fundamentals/thumbnail-generation)\ -[TinyURL](/fundamentals/tinyurl)\ -[Voice Transcription](/fundamentals/voice-transcription) - -### User Engagement - -Extensions that help increase user engagement. *Recommended for advanced apps.* - -[Email replies](/fundamentals/email-replies)\ -[Polls](/fundamentals/polls)\ -[Giphy](/fundamentals/giphy)\ -[Mentions](/fundamentals/mentions)\ -[Message Translation](/fundamentals/message-translation)\ -[Reactions](/fundamentals/reactions)\ -[Smart Reply](/fundamentals/smart-replies)\ -[Stickers](/fundamentals/stickers)\ -[Stipop](/fundamentals/stickers-stipop)\ -[Tenor](/fundamentals/tenor)\ -[Reminders](/fundamentals/reminders)\ -[Live Streaming by api.video](/fundamentals/video-broadcasting) - -### Collaboration - -Extensions that help with collaboration. *Recommended for advanced apps.* - -[Collaborative Whiteboard](/fundamentals/collaborative-whiteboard)\ -[Collaborative Document](/fundamentals/collaborative-document) - -### Customer Support - -Extensions that help you add support to your app. *Recommended for advanced apps.* - -[Intercom](/fundamentals/intercom)\ -[Chatwoot](/fundamentals/chatwoot) - -### Notifications - -Extensions that help alert users of new messages. *Recommended for all apps.* - -[Push Notification](/notifications/web-push-notifications)\ -[Email Notification](/notifications/email-notification-extension)\ -[SMS Notification](/notifications/sms-notification-extension) - -### Moderation - -*Extensions that help you to build a safe messaging environment.* *Recommended for live streaming and event apps.* - -[Legacy Moderation Extensions](/moderation/legacy-extensions) - -### Security - -*Extensions that help you to build adding extra security to your apps.* *Recommended for live streaming and event apps.* - -[Disappearing messages](/fundamentals/disappearing-messages)\ -[End to End Encryption](/fundamentals/end-to-end-encryption) +CometChat Extensions expand core messaging with specialized capabilities that improve experience, engagement, collaboration, and support. + +## User Experience + + + + Bitly helps you create and share branded links with custom domains at scale. + + + Generate meta description for URLs. + + + Send pre-defined messages using shortcuts like `/hello`. + + + Pin messages for all users in a conversation. + + + Generate rich media previews for all popular sites. + + + Enable users to save messages from one-on-one and group conversations. + + + Generate thumbnails for images and videos. + + + Convert long website links into short, manageable URLs that are reliable, secure, and never expire. + + + Transcribe audio messages using powerful neural network models. + + + +## User Engagement + + + + Be animated. + + + Translate text messages in different languages on-the-fly. + + + Polls to quickly ask for opinions in chats. + + + Create reminders for messages or anything else. + + + Send and manage stickers. + + + Create meaningful experiences in your app with stickers that users love. + + + Bring personality to your conversations. + + + +## Collaboration + + + + Create and share documents for collaboration. + + + Create and share whiteboards for collaboration. + + + +## Security + + + + Allow end users to send messages that disappear after a set time. + + + +## Customer Support + + + + Connect and exchange messages between CometChat and Chatwoot. + + + Connect and exchange messages between CometChat and Intercom. + + + +{/* ## Smart Chat Features + + + + AI suggested first message for a conversation. + + + AI suggested replies for a conversation. + + + AI generated summary of a conversation. + + */} diff --git a/fundamentals/features-core.mdx b/fundamentals/features-core.mdx index 5f2c7a2b5..533b50f7a 100644 --- a/fundamentals/features-core.mdx +++ b/fundamentals/features-core.mdx @@ -3,54 +3,129 @@ title: "Core In App Messaging Features" sidebarTitle: "Core" --- -CometChat provides a powerful suite of messaging features. A subset of these features called 'Messaging Core' provide features which are bare minimum to build a good chat user experience. +CometChat's Core features are the essentials you need to deliver a complete, real-time chat experience. Use these features as the foundation for reliable one-to-one and group conversations. -The following are some of the most used Core features: + +**Available via:** +| Platform | Setup | +|----------|----------| +| [UI Kit Builder](/chat-builder/react/overview) | | +| [Widget Builder](/widget/html/overview) | | +| [UI Kits](/ui-kit/react/overview) | | +| [SDK](/sdk/javascript/overview) | | -* User to User and Group chat: + - * This is the most basic form of messaging which can exists between two individual users or users that are a part of a group. For a developer's perspective, the actual chat works using the following delivery methods: - * On the message sender's side, the messages are sent using CometChat UI Kits which use SDKs which act as an API wrapper. - * On the message receiver's side, the messages are delivered using a Websocket connection to the CometChat plaform which is managed by the SDKs. - * For more details on Websockets and its connectivity details, please visit [Managing Web Sockets](/sdk/javascript/managing-web-sockets-connections-manually) in the CometChat SDK. - * By default, user and group messaging along with Web Socket implementation is available in the UI Kits. +## Core Features -* Media sharing: +### **Instant Messaging** +- Enable real-time one-to-one and group chat so users can send and receive messages instantly. - * Sharing files, videos and other media types are the key in today's messaging world. You can implement media messages using SDKs or UI Kits as well as use [Extensions](/fundamentals/extensions-overview) for Gifs and Stickers. - * By default, support for Media messages is available in the UI Kits. + + + -* Message Delivery and Read receipts: +### **Media Sharing** +- Let users share images, videos, documents, and other files directly within conversations. - * Message delivery receipts indicate that a message has reached the message receiver. Message read receipt indicates that the message has been read by the message receiver. CometChat supports the following features from a message delivery and read indicator perspective: - * Mark up to a message as delivered. - * Mark up to a message as read. - * Mark all messages after a particular message as unread. - * To view these features, please visit [Delivery and Read receipts](/sdk/javascript/delivery-read-receipts#mark-messages-as-unread) in the SDK docs. - * By default, support delivery and read receipts is available in the UI Kits. + + + -* Typing indicators: +### **Read Receipts** +- Show when messages are delivered and when they are read, so users know message status at a glance. - * Typing indicators in a conversation provide an indication to other users that a given user is typing a message. To implement typing indicators, visit the [Typing indicators](/sdk/javascript/typing-indicators) section of the SDK docs. - * By default, support Typing indicators is available in the UI Kits. + + + -* Mentions (@username): +### **Mark as Unread** +- Allow users to mark messages as unread so they can revisit important conversations later. - * Mentions allow users to refer to a specific user in a conversation. This is done by sending a '@username' in the message to address that user. - * To implement Mentions, please visit [Mentions](/sdk/javascript/mentions) section in the SDK docs. - * By default, support for Mentions is available in the UI Kits. + + + -* Reactions: +### **Typing Indicators** +- Display when another user is typing to make conversations feel more responsive and natural. - * Reactions on a message allow users to express their emotions using emojis. To implement Reactions, please visit the [Reactions](/sdk/javascript/reactions) section in the SDK docs. - * By default, support for Reactions is available in the UI Kits. + + + -* Threaded Conversations: +### **User Presence** +- Show online, offline, and last-seen states to help users understand availability. - * Message threads allow users to branch off a conversation specific to a topic within a conversation in a sub-conversation. Such a conversation is called a Threaded conversation. To implement Threads in a conversation, please visit [Threaded Messages](/sdk/javascript/threaded-messages) section in the docs. - * By default, support for Threaded conversations is available in the UI Kits. + + + -* User presence: +### **Reactions** +- Let users react to messages with emojis for quick feedback without sending a new message. - * User presence helps users to understand if a particular user is online and hence available for chat. To implement User presence, please visit the [User Presence](/sdk/javascript/user-presence) section in the docs. - * By default, support for User Presence is available in the UI Kits. + + + + +### **Mentions** +- Tag specific users (or everyone in a group) to draw attention inside busy conversations. + + + + + +### **Threaded Conversations** +- Create message threads inside group chats to keep context organized. + + + + + +### **Quoted Replies** +- Reply to a specific message with a quote to maintain clarity and context. + + + + + +### **Group Chats** +- Support conversations with multiple participants for teams, communities, or events. + + + + + +### **Report Message** +- Allow users to report inappropriate or harmful messages directly from chat. + + + + + +### **Conversation and Advanced Search** +- Search conversations by user or group name, apply advanced message filters such as links, attachments, reactions, mentions, or specinc mentioned UIDs, and search across all conversations. + + + + + +## Choose Your Integration Method +Follow the method that best suits your needs to get started with Core features. Each integration method includes Core features by default, so you can focus on building the chat experience you want without worrying about missing essential functionality. + +#### UI Kit Builder +- The UI Kit Builder provides an interface to create custom chat experiences. +- When you set up a new chat experience using the UI Kit Builder, all Core features are automatically included. +- Simply select the features you want to enable, and they will be integrated into your chat experience without any additional coding. + +#### Widget Builder +- The Widget Builder allows you to create a chat widget that can be embedded on your website or app. +- When you create a new widget using the Widget Builder, Core features are included by default. +- You can customize which features are enabled through the widget settings, giving you control over the chat experience you provide to your users. + +#### UI Kits +- Our pre-built UI Kits come with all Core features enabled out of the box. +- You can customize them further to match your app's design and branding. + +#### SDK +- When you use the CometChat SDK to build your own custom chat experience, Core features are available for you to implement. +- You can choose which features to include based on your app's requirements, giving you full control over the chat experience you create. \ No newline at end of file diff --git a/fundamentals/giphy.mdx b/fundamentals/giphy.mdx index a80ed343a..2276028bc 100644 --- a/fundamentals/giphy.mdx +++ b/fundamentals/giphy.mdx @@ -6,23 +6,38 @@ GIFs are a great way to change the tone or convey emotions in your conversations ## Before you begin -1. Sign up at [Giphy](https://developers.giphy.com/dashboard/) and create a new app. -2. Select API and click on Next. -3. Enter your App name, description and click create. -4. Make note of the API key that has been created. + + + Sign up at [Giphy](https://developers.giphy.com/dashboard/) and create a new app. + + + Select **API** and click **Next**. + + + Enter your app name and description, create the app, then copy the API key. + + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Giphy extension. -3. Click on the settings button and enter your Giphy API key and hit save. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Giphy**. + + + Open the extension settings, paste your Giphy API key, and save. + + ## How does it work? This extension uses the `callExtension` method provided by the CometChat SDK. You can perform the following actions using this method: -1. Get trending GIFs -2. Search for GIFs +- **Get trending GIFs**: Fetch a curated list of trending GIFs. +- **Search for GIFs**: Search GIFs by keywords and language. ### Get Trending GIFs diff --git a/fundamentals/intercom.mdx b/fundamentals/intercom.mdx index 3695949a0..ecd3d7eab 100644 --- a/fundamentals/intercom.mdx +++ b/fundamentals/intercom.mdx @@ -10,12 +10,20 @@ The Intercom extension makes customer support seamless for your users. Instead o ## Before you begin -1. You may have an existing account created with Intercom. If not, sign up with [Intercom](https://intercom.com). -2. Create a test workspace by following these [steps](https://www.intercom.com/help/en/articles/188-create-a-test-workspace-in-intercom) from Intercom's documentation. -3. Once that is done, go back to the settings and expand the Developers section. -4. Click on DeveloperHub and create an app. -5. Select the newly created app and go to the Authentication section. -6. Copy the Access token as this will be required later. + + + Sign up at [Intercom](https://intercom.com) if you don't already have an account. + + + Follow Intercom's [test workspace steps](https://www.intercom.com/help/en/articles/188-create-a-test-workspace-in-intercom). + + + In Intercom settings, open **Developers** → **DeveloperHub** and create an app. + + + Open the app's **Authentication** section and copy the Access token. + + @@ -31,18 +39,20 @@ The integration works with Intercom API Verion `2.3 (2020-11-12)`. If there's a #### On CometChat Dashboard -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. - -2. Go to the Extensions section and enable the Intercom extension. - -3. Open the Settings for this extension. - -4. Enter the following and save your settings: - - 1. **Intercom Access token**: Copied earlier from the Intercom Developer Hub. - 2. **Customer Support UID**: A user on CometChat that is your Customer Support user. - -5. Once you save your settings, a Webhook URL will be auto generated for your app. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Intercom**. + + + Enter your **Intercom Access token** and the **Customer Support UID** (CometChat user). + + + Save to auto-generate a webhook URL for your app. + + @@ -50,8 +60,14 @@ The integration works with Intercom API Verion `2.3 (2020-11-12)`. If there's a #### On Intercom Developer Hub -1. Copy the above auto-generated Webhook URL and paste it in the Webhooks section on the Intercom Developer Hub. -2. From the Webhook Topics, select `conversation.admin.replied` + + + Paste the CometChat-generated webhook URL in the **Webhooks** section. + + + Choose `conversation.admin.replied` from the Webhook Topics list. + + diff --git a/fundamentals/link-preview.mdx b/fundamentals/link-preview.mdx index 0cbd7861b..f3a2d52a3 100644 --- a/fundamentals/link-preview.mdx +++ b/fundamentals/link-preview.mdx @@ -4,22 +4,43 @@ title: "Link Preview" The Link Preview extension will help you show a preview of the web page for every link in your message. -While this extension gives you all the details required for generating a preview, our [Rich Media Preview](/fundamentals/rich-media-preview) gives you a decorated iframe with the styling. + +**Available via:** +| Platform | Setup | +|----------|:-------:| +| [UI Kit Builder](/chat-builder/react/overview) | | +| [Widget Builder](/widget/html/overview) | | +| [UI Kits](/ui-kit/react/overview) | | +| [SDK](/sdk/javascript/overview) | | + + + + +If you want a ready-to-render preview card, use [Rich Media Preview](/fundamentals/rich-media-preview). + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Link Preview extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Link Preview**. + + + +--- ## How does it work? -We provide you a few details about the URL that is in your message. The details are as follows: +We provide a few details about the URL that is in your message: -1. Description -2. Favicon -3. Image -4. Title -5. URL. +- **Description**: Summary text pulled from the page. +- **Favicon**: The site's icon for display. +- **Image**: Preview image for the link. +- **Title**: Page title resolved from the URL. +- **URL**: The final resolved link. Say, for example, a user shares a Facebook link in their message, then our extension will query the link for the details that you need to build a preview. @@ -49,14 +70,42 @@ These details are provided as part of metadata as shown in the example below: -If the link-preview key is missing, it means that the extension is either not enabled or has timed out. + +If the `link-preview` key is missing, the extension is either not enabled or has timed out. Some details may also be missing. For a richer preview, consider [Rich Media Preview](/fundamentals/rich-media-preview). + + +--- -Also, it may happen that certain details are missing or the details are not available altogether. Consider switching to Rich Media Preview for better experience. +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +#### UI Kit Builder +- Enable it in both **Dashboard** and you can use the **Link Preview** extension in your custom chat experience. -## Implementation +#### Widget Builder +- Enable it in both **Dashboard** and you can use the **Link Preview** extension in your custom chat widget. + +#### UI Kits +- Enable it in the **Dashboard** settings, then you can use the **Link Preview** extension in your custom chat experience built with our **UI Kits**. + +#### SDK +- Enable it in the **Dashboard** settings, then you can use the **Link Preview** extension in your custom chat experience built with our **SDK**. + +--- + +## Code Using the Link Preview extension, you can build a preview box similar to the one you've seen in Slack. + + + Use `getMetadata()` to access `@injected.extensions.link-preview`. + + + Use the fields to build a preview card like the example below. + + + diff --git a/fundamentals/message-shortcuts.mdx b/fundamentals/message-shortcuts.mdx index e025cb540..7da58e609 100644 --- a/fundamentals/message-shortcuts.mdx +++ b/fundamentals/message-shortcuts.mdx @@ -6,18 +6,32 @@ The Message Shortcuts extension enables your users to send each other predefined For example, **!hb** can be automatically expanded to **Happy birthday!** + +Global shortcuts are available to all users. User-created shortcuts are private to the creator. + + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Message shortcuts extension. -3. Open the settings for this extension. -4. You should a list of Global Message shortcuts. -5. Edit the existing shortcuts or add new ones. -6. Save your settings. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Message Shortcuts**. + + + Open the extension settings to view global shortcuts, then edit or add new ones. + + + Save your configuration to apply the updates. + + + +--- ## How does it work? @@ -25,13 +39,32 @@ The shortcuts saved in the Extension's settings are Global message shortcuts tha With the Message Shortcuts extension, you can: -1. Fetch all shortcuts on your user's device. -2. Allow users to edit, define or delete shortcuts. -3. Send predefined message by typing shortcuts. +- **Fetch shortcuts**: Retrieve all shortcuts on the user's device. +- **Manage shortcuts**: Allow users to add, edit, or delete shortcuts. +- **Send faster**: Expand shortcuts into full messages as users type. + +--- + +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +### UI Kit Builder +- Enable it in both Dashboard and UI Kit Builder settings, then you can use the Message Shortcuts extension in your custom chat experience. + +### Widget Builder +- Enable it in both Dashboard and Widget Builder settings, then you can use the Message Shortcuts extension in your custom chat widget. + +### UI Kits +- Enable it in the Dashboard settings, then you can use the Message Shortcuts extension in your custom chat experience built with our UI Kits. + +### SDK +- Enable it in the Dashboard settings, then you can use the Message Shortcuts extension in your custom chat experience built with our SDK. + +--- -## Implementation +## Code -### 1. Fetch all shortcuts +#### 1. Fetch all shortcuts Once the user has successfully logged in, you can request the shortcuts from the extension. Additionally, you can provide a button to refresh the shortcuts. @@ -101,7 +134,7 @@ The response will have the following JSON structure: -### 2. Modify shortcuts +#### 2. Modify shortcuts Shortcuts can be added, edited or deleted by your users. You need to have a section in your front-end application that allows the users to do so. The extension accepts a final list of shortcuts after all the modifications have been done by the user. @@ -171,10 +204,18 @@ CometChat.callExtension(slug: "message-shortcuts", type: .post, endPoint: "v1/up -### 3. Use shortcuts +#### 3. Use shortcuts The UI implementation can be as follows: -1. When `!` is typed in the message composer, a list pops up above the message composer with all the available shortcuts and their predefined values. -2. On typing the next letter after the`!` typed earlier, the list gets filtered with the shortcuts that start with that letter. -3. Clicking on any shortcut from the list, expands the corresponding predefined message in the message composer. + + + When `!` is typed in the composer, show a list of available shortcuts. + + + Filter the list by matching shortcuts as the next letters are entered. + + + Selecting a shortcut expands the predefined message in the composer. + + diff --git a/fundamentals/message-translation.mdx b/fundamentals/message-translation.mdx index 64932b088..3e0566be0 100644 --- a/fundamentals/message-translation.mdx +++ b/fundamentals/message-translation.mdx @@ -6,8 +6,14 @@ The Message Translation extension helps you translate messages into multiple lan ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Message Translation extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Message Translation**. + + ## How does it work? @@ -95,7 +101,9 @@ We support translations in the following languages: | Vietnamese | vi | | Welsh | cy | -The language is identified using identifiers from [RFC 5646](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) — if there is a 2-letter ISO 639-1 identifier, with a regional subtag if necessary, it uses that. Otherwise, it uses the ISO 639-2 3-letter code. + +Language codes follow [RFC 5646](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes). Use ISO 639-1 codes where available, with regional subtags if needed. Otherwise, use ISO 639-2 codes. + ## Implementation diff --git a/fundamentals/pin-message.mdx b/fundamentals/pin-message.mdx index 39512de01..46f447179 100644 --- a/fundamentals/pin-message.mdx +++ b/fundamentals/pin-message.mdx @@ -2,22 +2,53 @@ title: "Pin Message" --- +Pin messages so important information stays visible in a conversation. + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Pin message extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Pin Message**. + + + +--- ## How does it work? Pin message extension provides you the ability to: -1. Pin messages -2. Unpin messages -3. Fetch all the pinned messages for a conversation. +- **Pin messages**: Keep important messages visible in a conversation. +- **Unpin messages**: Remove pinned messages when they are no longer relevant. +- **Fetch pinned messages**: Retrieve all pinned messages for a conversation. Messages pinned in a conversation (be it one-on-one or group) are visible to the receiver(s) as well. -### 1. Pin a message +--- + +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +#### UI Kit Builder +- Enable it in both **Dashboard** and **UI Kit Builder** settings, then you can use the **Pin Message** extension in your custom chat experience. + +#### Widget Builder +- Enable it in both **Dashboard** and **Widget Builder** settings, then you can use the **Pin Message** extension in your custom chat widget. + +#### UI Kits +- Enable it in the **Dashboard** settings, then you can use the **Pin Message** extension in your custom chat experience built with our **UI Kits**. + +#### SDK +- Enable it in the **Dashboard** settings, then you can use the Pin Message extension in your custom chat experience built with our **SDK**. + +--- + +## Code + +#### 1. Pin a message To pin a message, use the `callExtension` method provided by the SDK to make an HTTP POST request with the parameters as shown below. You need to pass the `msgId` that has to be pinned. @@ -71,7 +102,7 @@ CometChat.callExtension(slug: "pin-message", type: .post, endPoint: "v1/pin", bo -### 2. Unpin a message +#### 2. Unpin a message To unpin a message, use the `callExtension` method provided by the SDK to make an HTTP DELETE request with the parameters as shown below. You need to pass the `msgId`, `receiverType` and the `receiver` (can be either UID or GUID based on `receiverType`). @@ -129,7 +160,7 @@ CometChat.callExtension(slug: "pin-message", type: .delete, endPoint: "v1/unpin" -### 3. Fetch pinned messages +#### 3. Fetch pinned messages To fetch the pinned messages for a conversation, use the `callExtension` method provided by the SDK to make an HTTP GET request with the query parameters as shown below. You need to pass the `receiverType` and the `receiver` (can be either UID or GUID based on `receiverType`). diff --git a/fundamentals/polls.mdx b/fundamentals/polls.mdx index 5f2445c3f..cd52715d6 100644 --- a/fundamentals/polls.mdx +++ b/fundamentals/polls.mdx @@ -6,25 +6,31 @@ Polls let you quickly record the opinions directly in the Conversations and also ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Polls extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Polls**. + + ## How do polls work? Polls extension has the following 3 parts: -1. Creating a poll by submitting a question along with the possible options. -2. Voting in a poll. -3. Fetching the results for a particular poll. +- **Create a poll**: Submit a question and options to start a poll. +- **Vote**: Let users cast votes on the poll options. +- **Fetch results**: Retrieve current voting results for a poll. ## 1. Creating a Poll In order to create a poll, you need to submit the following details: -1. Question -2. Array of options -3. Receiver (UID/GUID) -4. Receiver type (user/group) +- **Question**: The poll question users will vote on. +- **Options**: An array of options to choose from. +- **Receiver**: UID or GUID of the target user or group. +- **Receiver type**: Specify `user` or `group`. The options in the array are assigned an index appropriately (starting from 1). You can create a poll by using `callExtension` method provided by our SDKs: @@ -106,7 +112,9 @@ The `metadata` stores all the information about the poll. You will find the foll | question | A string representing the question asked in the poll. | | results | An object that stores voting results. | -Apart from the above Poll-related details, the `metadata` will also contain `incrementUnreadCount` with value as `true`. This will be useful for incrementing the unread count every time a poll is received. + +Polls are custom messages. Use the `incrementUnreadCount` flag in `metadata` to update unread counters when a poll is received. + ## 3. Voting in a poll diff --git a/fundamentals/reminders.mdx b/fundamentals/reminders.mdx index 255d74237..319c886e2 100644 --- a/fundamentals/reminders.mdx +++ b/fundamentals/reminders.mdx @@ -10,14 +10,20 @@ Create reminders for messages or anything else. ## Extension Settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Reminders extension. -3. Go to the Users section and create a new user with `cc_reminder_bot` as the UID. The name and Avatar can be of your choice. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Reminders**. + + + In **Users**, create a user with UID `cc_reminder_bot`. The name and avatar can be of your choice. + + - -The `cc_reminder_bot` user should be available for your app in order to use the Reminders extension. There shouldn't be an existing user using the same `UID`. - +The `cc_reminder_bot` user must exist for your app. Ensure no existing user uses the same UID. ## How do reminders work? @@ -32,6 +38,10 @@ When the reminder is due, `cc_reminder_bot` will send a message to the user. Users can then list, edit or delete reminders. +- **Message reminders**: Set a reminder for a specific message. +- **Personal reminders**: Set a custom reminder with your own text. +- **Manage reminders**: List, edit, or delete existing reminders. + ### Set reminders The following parameters are required for setting a reminder diff --git a/fundamentals/rich-media-preview.mdx b/fundamentals/rich-media-preview.mdx index 637d353a0..940900c1e 100644 --- a/fundamentals/rich-media-preview.mdx +++ b/fundamentals/rich-media-preview.mdx @@ -6,22 +6,41 @@ The Rich Media Preview Extension allows the developer to generate rich preview p ## Before you begin -1. Sign up with [Iframely](https://iframely.com/embed). -2. Get their API key to configure the extension. + + + Sign up with [Iframely](https://iframely.com/embed). + + + Generate an Iframely API key for configuring the extension. + + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Rich Media Preview extension. -3. Open the Settings for this extension. -4. Enter the iFramely API Key. -5. Save your settings. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Rich Media Preview**. + + + Open the extension settings and enter the Iframely API key. + + + Save your configuration to activate the extension. + + + +--- ## How does it work? If the text message contains a URL, the extension will create a Preview using your iFramely credentials. These details can then be used to show a nice preview card for that URL. -The information about the Preview will be updated later for the message and hence you need to implement the `onMessageEdited` listener. Please check our [Edit message](/sdk/javascript/edit-message) documentation under the SDK of your choice. + +The preview metadata is updated after the message is sent, so you should implement the `onMessageEdited` listener. See [Edit message](/sdk/javascript/edit-message) in the SDK docs. + Here is a sample response (for [https://stackoverflow.com](https://stackoverflow.com)): @@ -103,7 +122,26 @@ Here is a sample response (for [https://stackoverflow.com](https://stackoverflow -## Implementation +--- + +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +### UI Kit Builder +- Enable it in both Dashboard and UI Kit Builder settings, then you can use the Rich Media Preview extension in your custom chat experience. + +### Widget Builder +- Enable it in both Dashboard and Widget Builder settings, then you can use the Rich Media Preview extension in your custom chat widget. + +### UI Kits +- Enable it in the Dashboard settings, then you can use the Rich Media Preview extension in your custom chat experience built with our UI Kits. + +### SDK +- Enable it in the Dashboard settings, then you can use the Rich Media Preview extension in your custom chat experience built with our SDK. + +--- + +## Code At the recipients' end, from the message object, you can fetch the metadata by calling the getMetadata() method. Using this metadata, you can fetch the Rich Media Embed. diff --git a/fundamentals/save-message.mdx b/fundamentals/save-message.mdx index 57ea4eebc..30639a4e7 100644 --- a/fundamentals/save-message.mdx +++ b/fundamentals/save-message.mdx @@ -2,22 +2,55 @@ title: "Save Message" --- +Let users save important messages and revisit them later. + ## Extension settings -1. Login to the [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Save message extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Save Message**. + + + +--- ## How does it work? Save message extension provides you the ability to: -1. Save messages -2. Unsave messages -3. Fetch all the saved messages by the user. +- **Save messages**: Allow users to save messages for later. +- **Unsave messages**: Remove saved messages when no longer needed. +- **Fetch saved messages**: Retrieve all saved messages for a user. + + +Saved messages are private and visible only to the user who saved them. + + +--- + +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +### UI Kit Builder +- Enable it in both Dashboard and UI Kit Builder settings, then you can use the Message Shortcuts extension in your custom chat experience. + +### Widget Builder +- Enable it in both Dashboard and Widget Builder settings, then you can use the Message Shortcuts extension in your custom chat widget. + +### UI Kits +- Enable it in the Dashboard settings, then you can use the Message Shortcuts extension in your custom chat experience built with our UI Kits. + +### SDK +- Enable it in the Dashboard settings, then you can use the Message Shortcuts extension in your custom chat experience built with our SDK. + +--- -Saved messages are private and are visible to the user who has saved them. +## Code -### 1. Save a message +#### 1. Save a message To save a message, use the `callExtension` method provided by the SDK to make an HTTP POST request with the parameters as shown below. You need to pass the `msgId` of the message that has to be saved. @@ -71,7 +104,7 @@ CometChat.callExtension(slug: "save-message", type: .post, endPoint: "v1/save", -### 2. Unsave a message +#### 2. Unsave a message To unsave a message, use the `callExtension` method provided by the SDK to make an HTTP DELETE request with the parameters as shown below. You need to pass the `msgId` of the message that needs to be unsaved. @@ -125,7 +158,7 @@ CometChat.callExtension(slug: "save-message", type: .delete, endPoint: "v1/unsav -### 3. Fetch saved messages +#### 3. Fetch saved messages To fetch the saved messages for a user, use the `callExtension` method provided by the SDK to make an HTTP GET request with the query parameters as shown below. diff --git a/fundamentals/stickers-stipop.mdx b/fundamentals/stickers-stipop.mdx index b7affea8f..a98833d6e 100644 --- a/fundamentals/stickers-stipop.mdx +++ b/fundamentals/stickers-stipop.mdx @@ -6,40 +6,43 @@ title: "Stipop" Stipop is the world's trendiest sticker platform and creator community. -## Before you begin: - -1. Sign up at [Stipop](https://stipop.io/). - -2. On successful signup, provide the following details: - - 1. Application name - 2. Website - 3. Category - 4. Sub-category - 5. Region - 6. App MAU - -3. Click on Get Started once done. - -4. You will be able to see the API Key on their Dashboard. Keep this handy. - -5. In the left navigation pane, go to Settings and select the Application tab. - -6. Copy the Application ID and keep this handy. +## Before you begin + + + + Sign up at [Stipop](https://stipop.io/). + + + Provide your application name, website, category, sub-category, region, and app MAU. + + + Click **Get Started**, then copy the API Key from the dashboard. In **Settings** → **Application**, copy the Application ID. + + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the extensions section and enable the Stipop extension. -3. Click on the settings button and enter your Stipop Application ID and API Key. -4. Save the settings once done. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Stipop**. + + + Open the settings and enter your Stipop Application ID and API Key. + + + Save your configuration to activate the extension. + + ## How does it work? The extension provides the following functionalities: -1. Get the current Trending stickers. -2. Search for stickers using a certain phrase or keyword +- **Get trending stickers**: Fetch current trending stickers from Stipop. +- **Search stickers**: Search stickers using a phrase or keyword. This extension uses the `callExtension` method provided by the CometChat SDK. diff --git a/fundamentals/stickers.mdx b/fundamentals/stickers.mdx index a4d2bd43f..9685ba005 100644 --- a/fundamentals/stickers.mdx +++ b/fundamentals/stickers.mdx @@ -10,15 +10,28 @@ The Stickers Extension is more like an image manager which allows you to quickly ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Stickers extension. -3. Open the Settings for this extension. -4. Click on Save to start using Stickers with in your app. - -CometChat provides 14 Default Sets of stickers for your use. Apart from these 14 sets, you can also create your own sets. Moreover, you can also choose stickers from each set as per your liking and use only those in your app. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Stickers**. + + + Open the extension settings and click **Save** to activate Stickers. + + + + +CometChat provides 14 default sticker sets. You can also create your own sets and enable only the stickers you want to use. + ## How does it work? +- **Load stickers**: Fetch enabled sticker sets for your UI. +- **Send stickers**: Send stickers as media messages. +- **Receive stickers**: Render sticker messages received in chat. + ### Loading stickers Before you start Sending or Receiving stickers in your app, you first have to load the Sticker Sets. In your app, you can add a section/drawer that shows the enabled stickers. A user can click on any of these stickers to send it in a chat. diff --git a/fundamentals/tenor.mdx b/fundamentals/tenor.mdx index f8c49f5af..4b6c0a85e 100644 --- a/fundamentals/tenor.mdx +++ b/fundamentals/tenor.mdx @@ -6,22 +6,35 @@ GIFs are a great way to change the tone or convey emotions in your conversations ## Before you begin -1. Sign up at [Tenor](https://tenor.com/developer/dashboard) and create a new app. -2. Enter your App name, description and click create. -3. Make note of the API key that has been created. + + + Sign up at [Tenor](https://tenor.com/developer/dashboard) and create a new app. + + + Enter your app name and description, create the app, then copy the API key. + + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Tenor extension. -3. Click on the Settings button, enter your Tenor API key, and hit save. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Tenor**. + + + Open the settings, enter your Tenor API key, and save. + + ## How does it work? This extension uses the `callExtension` method provided by the CometChat SDK. You can perform the following actions using this method: -1. Get trending GIFs -2. Search for GIFs +- **Get trending GIFs**: Fetch a curated list of trending GIFs. +- **Search for GIFs**: Search GIFs by keywords and language. ### Get Trending GIFs diff --git a/fundamentals/thumbnail-generation.mdx b/fundamentals/thumbnail-generation.mdx index 023f132ad..76d360e32 100644 --- a/fundamentals/thumbnail-generation.mdx +++ b/fundamentals/thumbnail-generation.mdx @@ -6,8 +6,16 @@ The Thumbnail Generation extension will help you generate a thumbnail preview of ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to Extensions section and enable the Thumbnail Generation extension. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Thumbnail Generation**. + + + +--- ## How does it work? @@ -78,7 +86,9 @@ For eg, if a Media message of type video is sent with 2 attachments, the links t -If the thumbnail-generation key is missing, it means that the extension is either not enabled or has timed out. + +If the `thumbnail-generation` key is missing, the extension is either not enabled or has timed out. + @@ -87,7 +97,26 @@ You can iterate over `attachments` array for better implementation. -## Implementation +--- + +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +### UI Kit Builder +- Enable it in both Dashboard and UI Kit Builder settings, then you can use the Thumbnail Generation extension in your custom chat experience. + +### Widget Builder +- Enable it in both Dashboard and Widget Builder settings, then you can use the Thumbnail Generation extension in your custom chat widget. + +### UI Kits +- Enable it in the Dashboard settings, then you can use the Thumbnail Generation extension in your custom chat experience built with our UI Kits. + +### SDK +- Enable it in the Dashboard settings, then you can use the Thumbnail Generation extension in your custom chat experience built with our SDK. + +--- + +## Code You can make use of the `getMetadata()` method to extract the thumbnail details for a message. diff --git a/fundamentals/tinyurl.mdx b/fundamentals/tinyurl.mdx index 8c9a33559..db9ef5954 100644 --- a/fundamentals/tinyurl.mdx +++ b/fundamentals/tinyurl.mdx @@ -2,32 +2,66 @@ title: "TinyURL" --- -*Learn how to minify the long website links in your text messages using TinyURL.* +Use TinyURL to shorten long links and keep messages clean and readable. ## Before you begin -1. Sign up with [TinyURL](https://tinyurl.com/app/login) -2. Once you have logged in, click on Account in the top right corner. -3. In the left navigation pane, select API. -4. Create an API Token by giving it a name and permission to Create TinyURL. -5. Make note of the API Token as it will be required in Extension's settings. + + + Sign up with [TinyURL](https://tinyurl.com/app/login). + + + In TinyURL, open **Account** → **API** and create a token with permission to create TinyURL links. + + + Keep the API token handy for the extension settings. + + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the TinyURL extension. -3. Open the settings and enter the TinyURL API Token. -4. If you have chosen a paid plan, you can also save your BYO domain or subdomain. Default is set to `tinyurl.com` -5. Save your settings. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **TinyURL**. + + + Open the settings and enter the TinyURL API Token. + + + If you have a paid plan, add your custom domain or subdomain. The default is `tinyurl.com`. + + + Save your configuration to activate the extension. + + -BYO Domain +If you don't plan on using a custom domain, keep `tinyurl.com` as the default value. + + +--- -If you don't plan on using a custom domain, please save `tinyurl.com` as the default value here. +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +### UI Kit Builder +- Enable it in both Dashboard and UI Kit Builder settings, then you can use the TinyURL extension in your custom chat experience. - +### Widget Builder +- Enable it in both Dashboard and Widget Builder settings, then you can use the TinyURL extension in your custom chat widget. + +### UI Kits +- Enable it in the Dashboard settings, then you can use the TinyURL extension in your custom chat experience built with our UI Kits. + +### SDK +- Enable it in the Dashboard settings, then you can use the TinyURL extension in your custom chat experience built with our SDK. + +--- -## How does it work? +## Code This extension uses the `callExtension` method provided by CometChat SDK. You can call the extension as follows: diff --git a/fundamentals/voice-transcription.mdx b/fundamentals/voice-transcription.mdx index f68309a47..034f24b39 100644 --- a/fundamentals/voice-transcription.mdx +++ b/fundamentals/voice-transcription.mdx @@ -6,21 +6,58 @@ Voice transcription extension allows you to convert an audio message into text. ## Before you begin -1. Sign up with [Rev.ai](https://rev.ai/) -2. Get your `Access Token` for configuring this extension. + + + Sign up with [Rev.ai](https://rev.ai/). + + + Get your Rev.ai `Access Token` for configuring this extension. + + ## Extension settings -1. Login to [CometChat](https://app.cometchat.com/login) and select your app. -2. Go to the Extensions section and enable the Voice Transcription extension. -3. Open the Settings for this extension. -4. Enter the Rev.ai Access Token, and click on save. + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Voice Transcription**. + + + Open the settings and enter the Rev.ai Access Token. + + + Save your configuration to activate the extension. + + -## How does it work? +--- + +## Choose Your Integration Method +Choose the integration method that best suits your needs: + +### UI Kit Builder +- Enable it in both Dashboard and UI Kit Builder settings, then you can use the TinyURL extension in your custom chat experience. + +### Widget Builder +- Enable it in both Dashboard and Widget Builder settings, then you can use the TinyURL extension in your custom chat widget. + +### UI Kits +- Enable it in the Dashboard settings, then you can use the TinyURL extension in your custom chat experience built with our UI Kits. + +### SDK +- Enable it in the Dashboard settings, then you can use the TinyURL extension in your custom chat experience built with our SDK. + +--- + +## Code Once the Extension is enabled for your App and the settings are done, the recipients will receive metadata with the transcription details. -The transcription information will be updated later for the message and hence you need to implement the `onMessageEdited` listener. Please check our [Edit ,message](/sdk/javascript/edit-message) documentation under the SDK of your choice. + +The transcription information is updated after the message is sent, so implement the `onMessageEdited` listener. See [Edit message](/sdk/javascript/edit-message) in the SDK docs. + Here is a sample response: