diff --git a/.gitignore b/.gitignore index 96adadbc8..7a65bb2d9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,16 @@ .DS_Store .kiro/ + +# IDE files +.idea/ + +# Python caches +__pycache__/ +*.pyc +/codebase +/doc-auditor +/docs-templates +/docs-test-suite +/prompts +/docs-templates diff --git a/.mintignore b/.mintignore new file mode 100644 index 000000000..9ddbca1cf --- /dev/null +++ b/.mintignore @@ -0,0 +1,8 @@ +.kiro/ +/codebase +/doc-auditor +/prompts +/docs-templates +/mintignore +/doc-auditor +/docs-test-suite \ No newline at end of file diff --git a/docs.json b/docs.json index 9b489faf5..7762e68ac 100644 --- a/docs.json +++ b/docs.json @@ -121,75 +121,14 @@ { "group": "Extensions", "pages": [ - "fundamentals/extensions-overview", - { - "group": "User Experience", - "pages": [ - "fundamentals/message-shortcuts", - "fundamentals/avatars", - "fundamentals/thumbnail-generation", - "fundamentals/link-preview", - "fundamentals/rich-media-preview", - "fundamentals/voice-transcription", - "fundamentals/pin-message", - "fundamentals/save-message", - "fundamentals/tinyurl", - "fundamentals/bitly" - ] - }, - "fundamentals/notification-extensions", - { - "group": "User Engagement", - "pages": [ - "fundamentals/email-replies", - "fundamentals/smart-replies", - "fundamentals/message-translation", - "fundamentals/emojis", - "fundamentals/polls", - "fundamentals/reactions", - "fundamentals/stickers-stipop", - "fundamentals/stickers", - "fundamentals/video-broadcasting", - "fundamentals/mentions", - "fundamentals/giphy", - "fundamentals/tenor", - "fundamentals/gfycat", - "fundamentals/reminders" - ] - }, - "fundamentals/moderation-extensions", - { - "group": "Collaboration", - "pages": [ - "fundamentals/collaborative-whiteboard", - "fundamentals/collaborative-document" - ] - }, - { - "group": "Customer Support", - "pages": [ - "fundamentals/chatwoot", - "fundamentals/intercom" - ] - }, - { - "group": "Security", - "pages": [ - "fundamentals/disappearing-messages", - "fundamentals/end-to-end-encryption" - ] - } + "fundamentals/extensions-user-experience", + "fundamentals/extensions-user-engagement", + "fundamentals/extensions-collaboration", + "fundamentals/extensions-security", + "fundamentals/extensions-customer-support" ] }, - { - "group": "AI User Copilot", - "pages": [ - "fundamentals/ai-user-copilot/overview", - "fundamentals/ai-user-copilot/conversation-starter", - "fundamentals/ai-user-copilot/smart-replies", - "fundamentals/ai-user-copilot/conversation-summary" - ] - } + "fundamentals/smart-chat-features" ] }, { @@ -5243,21 +5182,121 @@ } }, "redirects": [ + { + "source": "/fundamentals/bitly", + "destination": "/fundamentals/extensions-user-experience#bitly" + }, + { + "source": "/fundamentals/link-preview", + "destination": "/fundamentals/extensions-user-experience#link-preview" + }, + { + "source": "/fundamentals/message-shortcuts", + "destination": "/fundamentals/extensions-user-experience#message-shortcuts" + }, + { + "source": "/fundamentals/pin-message", + "destination": "/fundamentals/extensions-user-experience#pin-message" + }, + { + "source": "/fundamentals/rich-media-preview", + "destination": "/fundamentals/extensions-user-experience#rich-media-preview" + }, + { + "source": "/fundamentals/save-message", + "destination": "/fundamentals/extensions-user-experience#save-message" + }, + { + "source": "/fundamentals/thumbnail-generation", + "destination": "/fundamentals/extensions-user-experience#thumbnail-generation" + }, + { + "source": "/fundamentals/tinyurl", + "destination": "/fundamentals/extensions-user-experience#tinyurl" + }, + { + "source": "/fundamentals/voice-transcription", + "destination": "/fundamentals/extensions-user-experience#voice-transcription" + }, + { + "source": "/fundamentals/giphy", + "destination": "/fundamentals/extensions-user-engagement#giphy" + }, + { + "source": "/fundamentals/message-translation", + "destination": "/fundamentals/extensions-user-engagement#message-translation" + }, + { + "source": "/fundamentals/polls", + "destination": "/fundamentals/extensions-user-engagement#polls" + }, + { + "source": "/fundamentals/reminders", + "destination": "/fundamentals/extensions-user-engagement#reminders" + }, + { + "source": "/fundamentals/stickers", + "destination": "/fundamentals/extensions-user-engagement#stickers" + }, + { + "source": "/fundamentals/stickers-stipop", + "destination": "/fundamentals/extensions-user-engagement#stipop" + }, + { + "source": "/fundamentals/tenor", + "destination": "/fundamentals/extensions-user-engagement#tenor" + }, + { + "source": "/fundamentals/collaborative-document", + "destination": "/fundamentals/extensions-collaboration#collaborative-document" + }, + { + "source": "/fundamentals/collaborative-whiteboard", + "destination": "/fundamentals/extensions-collaboration#collaborative-whiteboard" + }, + { + "source": "/fundamentals/disappearing-messages", + "destination": "/fundamentals/extensions-security#disappearing-messages" + }, + { + "source": "/fundamentals/chatwoot", + "destination": "/fundamentals/extensions-customer-support#chatwoot" + }, + { + "source": "/fundamentals/intercom", + "destination": "/fundamentals/extensions-customer-support#intercom" + }, + { + "source": "/fundamentals/ai-user-copilot/overview", + "destination": "/fundamentals/smart-chat-features" + }, + { + "source": "/fundamentals/ai-user-copilot/conversation-starter", + "destination": "/fundamentals/smart-chat-features#conversation-starter" + }, + { + "source": "/fundamentals/ai-user-copilot/smart-replies", + "destination": "/fundamentals/smart-chat-features#smart-replies" + }, + { + "source": "/fundamentals/ai-user-copilot/conversation-summary", + "destination": "/fundamentals/smart-chat-features#conversation-summary" + }, { "source": "/ai/overview", - "destination": "/fundamentals/ai-user-copilot/overview" + "destination": "/fundamentals/smart-chat-features" }, { "source": "/ai/conversation-starter", - "destination": "/fundamentals/ai-user-copilot/conversation-starter" + "destination": "/fundamentals/smart-chat-features#conversation-starter" }, { "source": "/ai/smart-replies", - "destination": "/fundamentals/ai-user-copilot/smart-replies" + "destination": "/fundamentals/smart-chat-features#smart-replies" }, { "source": "/ai/conversation-summary", - "destination": "/fundamentals/ai-user-copilot/conversation-summary" + "destination": "/fundamentals/smart-chat-features#conversation-summary" }, { "source": "/webhooks/overview", @@ -5341,15 +5380,15 @@ }, { "source": "/extensions/save-message", - "destination": "/fundamentals/save-message" + "destination": "/fundamentals/extensions-user-experience#save-message" }, { "source": "/extensions/tinyurl", - "destination": "/fundamentals/tinyurl" + "destination": "/fundamentals/extensions-user-experience#tinyurl" }, { "source": "/extensions/bitly", - "destination": "/fundamentals/bitly" + "destination": "/fundamentals/extensions-user-experience#bitly" }, { "source": "/extensions/email-replies", @@ -5361,11 +5400,11 @@ }, { "source": "/extensions/giphy", - "destination": "/fundamentals/giphy" + "destination": "/fundamentals/extensions-user-engagement#giphy" }, { "source": "/extensions/tenor", - "destination": "/fundamentals/tenor" + "destination": "/fundamentals/extensions-user-engagement#tenor" }, { "source": "/extensions/gfycat", @@ -5373,7 +5412,7 @@ }, { "source": "/extensions/reminders", - "destination": "/fundamentals/reminders" + "destination": "/fundamentals/extensions-user-engagement#reminders" }, { "source": "/extensions/smart-replies", @@ -5381,7 +5420,7 @@ }, { "source": "/extensions/message-translation", - "destination": "/fundamentals/message-translation" + "destination": "/fundamentals/extensions-user-engagement#message-translation" }, { "source": "/extensions/emojis", @@ -5389,7 +5428,7 @@ }, { "source": "/extensions/polls", - "destination": "/fundamentals/polls" + "destination": "/fundamentals/extensions-user-engagement#polls" }, { "source": "/extensions/reactions", @@ -5397,11 +5436,11 @@ }, { "source": "/extensions/stickers-stipop", - "destination": "/fundamentals/stickers-stipop" + "destination": "/fundamentals/extensions-user-engagement#stipop" }, { "source": "/extensions/stickers", - "destination": "/fundamentals/stickers" + "destination": "/fundamentals/extensions-user-engagement#stickers" }, { "source": "/extensions/video-broadcasting", @@ -5409,19 +5448,19 @@ }, { "source": "/extensions/collaborative-whiteboard", - "destination": "/fundamentals/collaborative-whiteboard" + "destination": "/fundamentals/extensions-collaboration#collaborative-whiteboard" }, { "source": "/extensions/collaborative-document", - "destination": "/fundamentals/collaborative-document" + "destination": "/fundamentals/extensions-collaboration#collaborative-document" }, { "source": "/extensions/chatwoot", - "destination": "/fundamentals/chatwoot" + "destination": "/fundamentals/extensions-customer-support#chatwoot" }, { "source": "/extensions/intercom", - "destination": "/fundamentals/intercom" + "destination": "/fundamentals/extensions-customer-support#intercom" }, { "source": "/extensions/moderation-extensions", @@ -5429,7 +5468,7 @@ }, { "source": "/extensions/disappearing-messages", - "destination": "/fundamentals/disappearing-messages" + "destination": "/fundamentals/extensions-security#disappearing-messages" }, { "source": "/extensions/end-to-end-encryption", 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-collaboration.mdx b/fundamentals/extensions-collaboration.mdx new file mode 100644 index 000000000..690dcb6a3 --- /dev/null +++ b/fundamentals/extensions-collaboration.mdx @@ -0,0 +1,334 @@ +--- +title: "Collaboration" +description: "Extensions that enable real-time collaboration in your chat application" +--- + +These extensions enable real-time collaboration directly within your chat. Users can work together on documents and whiteboards without leaving the conversation. + + + + Co-edit documents in real-time + + + Draw and brainstorm together + + + +--- + +## Collaborative Document + +Learn how to collaborate using a document. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension settings + + + + 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? + +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: + +- **Create a collaboration link**: Generate a document link for the session. +- **Invite collaborators**: Send the link as an invitation to receivers. + +### Code + +#### Initiating the session + + + +```js +CometChat.callExtension("document", "POST", "v1/create", { + "receiver": "UID/GUID", + "receiverType": "user/group" +}).then(response => { + // Response with document url +}).catch(error => { + // Some error occured +}); +``` + + +```java +JSONObject body=new JSONObject(); +body.put("receiverType", "user/group"); +body.put("receiver", "uid/guid"); + +CometChat.callExtension("document", "POST", "/v1/create", body, + new CometChat.CallbackListener() { + @Override + public void onSuccess(JSONObject responseObject) { + // The document link to join as an initiator. + } + @Override + public void onError(CometChatException e) { + // Some error occured. + } +}); +``` + + +```swift +CometChat.callExtension(slug: "document", type: .post, endPoint: "v1/create", +body: ["receiverType":"user/group", "receiver":"uid/guid"], onSuccess: { (response) in + // Success response + }) { (error) in + // Some error occured + } +``` + + + +### Receiving the details + +#### As an initiator + +You will receive the `document_url` of the session in the success callback of the `callExtension` method. + +#### As a collaborator + +The receiver (can be a user or group) will get a message with the following properties: + +1. category: `custom` +2. type: `extension_document` + +Implement the Custom message listener to get the message. See [Receive Messages](/sdk/javascript/receive-message) documentation. + +### Document metadata + +```json +"metadata": { + "incrementUnreadCount": true, + "@injected": { + "extensions": { + "document": { + "document_url": "https://document.cometchat.io/p/uniqdocid" + } + } + } +} +``` + +### Extracting the URL + + + +```js +if (metadata != null) { + var injectedObject = metadata["@injected"]; + if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) { + var extensionsObject = injectedObject["extensions"]; + if (extensionsObject != null && extensionsObject.hasOwnProperty("document")) { + var documentExtension = extensionsObject["document"]; + var document_url = documentExtension["document_url"]; + } + } +} +``` + + + +### Document Features + +The Collaborative document has the following editing features: + +1. Bold, Italic, Underline, Strikethrough +2. Numbered list, Bulleted list +3. Indent and Outdent + +You can export your document as: Etherpad, HTML, or Plain text. + +--- + +## Collaborative Whiteboard + +Connect with other users of the app and collaborate using a Whiteboard. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension settings + + + + 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? + +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: + +- **Create a collaboration link**: Generate a whiteboard link for the session. +- **Invite collaborators**: Send the link as an invitation to receivers. + +### Code + +#### Initiating the session + + + +```js +CometChat.callExtension("whiteboard", "POST", "v1/create", { + receiver: "UID/GUID", + receiverType: "user/group", +}) + .then((response) => { + // Response with board_url + }) + .catch((error) => { + // Some error occured + }); +``` + + +```ts +CometChat.callExtension("whiteboard", "POST", "v1/create", { + receiver: "UID/GUID", + receiverType: "user/group", +}) + .then((response: any) => { + // Response with board_url + }) + .catch((error: any) => { + // Some error occurred + }); +``` + + +```java +JSONObject body=new JSONObject(); +body.put("receiverType", "user/group"); +body.put("receiver", "uid/guid"); + +CometChat.callExtension("whiteboard", "POST", "/v1/create", body, + new CometChat.CallbackListener() { + @Override + public void onSuccess(JSONObject responseObject) { + // The whiteboard link to join as an initiator. + } + @Override + public void onError(CometChatException e) { + // Some error occured. + } +}); +``` + + +```swift +CometChat.callExtension(slug: "whiteboard", type: .post, endPoint: "v1/create", body: ["receiverType":"user/group", "receiver":"uidguid"], onSuccess: { (response) in + // Success response + }) { (error) in + // Some error occured + } +``` + + +```dart +Map body = { + 'receiverType': 'user/group', + 'receiver': 'uid/guid', +}; +CometChat.callExtension("whiteboard", "POST", "/v1/create", body, onSuccess: (map) { + // Success +}, onError: (e) { + // Error +}); +``` + + + +### Receiving the details + +#### As an initiator + +You will receive the `board_url` of the whiteboard session in the success callback of the `callExtension` method. + +#### As a collaborator + +The receiver (a user or group) will get a message with the following properties: + +1. category: `custom` +2. type: `extension_whiteboard` + +Implement the Custom message listener to get the message. See [Receive Messages](/sdk/javascript/receive-message) documentation. + +### Append username to the Whiteboard URL + +On the whiteboard screen, the mouse pointers of the collaborating users can be identified with the help of usernames: + + + +```js +CometChat.getLoggedinUser().then( + (user) => { + // Replace spaces with underscore + let username = user.name.split(" ").join("_"); + // Append the username to the board_url + board_url = board_url + "&username=" + username; + }, + (error) => { + console.log("error getting details:", { error }); + } +); +``` + + + +### Whiteboard metadata + +```json +"metadata": { + "@injected": { + "extensions": { + "whiteboard": { + "board_url": "https://whiteboard-.cometchat.io?whiteboardid=abc" + } + } + } +} +``` + +### Extracting the URL + + + +```js +if (metadata != null) { + var injectedObject = metadata["@injected"]; + if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) { + var extensionsObject = injectedObject["extensions"]; + if (extensionsObject != null && extensionsObject.hasOwnProperty("whiteboard")) { + var whiteboardObject = extensionsObject["whiteboard"]; + var board_url = whiteboardObject["board_url"]; + } + } +} +``` + + + +### Whiteboard Features + +Our whiteboard implementation provides the following features: + +1. **Edit**: Clear board, Undo, Redo +2. **Tools**: Mouse pointer, Select an area, Pen, Line, Rectangle, Circle, Text, Eraser +3. **Tool properties**: Thickness, Color +4. **Upload image to whiteboard** +5. **Export whiteboard as image** diff --git a/fundamentals/extensions-customer-support.mdx b/fundamentals/extensions-customer-support.mdx new file mode 100644 index 000000000..04be16e73 --- /dev/null +++ b/fundamentals/extensions-customer-support.mdx @@ -0,0 +1,159 @@ +--- +title: "Customer Support" +description: "Extensions that integrate customer support tools into your chat application" +--- + +These extensions connect your chat with popular customer support platforms. Users can reach your support team directly from the same chat interface they use to message each other. + + + + Integrate with Chatwoot support + + + Integrate with Intercom support + + + +--- + +## Chatwoot + +The Chatwoot extension makes customer support seamless for your users. Instead of having two interfaces- one for chat between users and one for chat with your support team, you can use CometChat as a front-end for your customer support use case as well! + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Before you begin + + + + 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. + + + +### Extension settings + +#### On CometChat Dashboard + + + + 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. + + + +#### On Chatwoot Dashboard + + + + Go to **Settings** → **Inboxes**, then open the settings for the target inbox. + + + Paste the CometChat-generated webhook URL into the **Webhook URL** field. + + + +### How does it work? + +* The end users of your app can send queries to the Customer Support user that you have set in the extension's settings. +* These queries will be forwarded to the configured Chatwoot inbox. +* When an agent replies to the queries, those will be sent over to CometChat and received by your end user. +* With this, your end users can communicate with each other as well as your Customer support team using the same Chat interface. + +--- + +## Intercom + +The Intercom extension makes customer support seamless for your users. Instead of having two interfaces- one for chat between users and one for chat with your support team, you can use CometChat as a front-end for your customer support use case as well! + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Before you begin + + + + 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. + + + + +The integration works with Intercom API Version `2.3 (2020-11-12)`. If there's a version mismatch, the extension won't work. + + +### Extension settings + +#### On CometChat Dashboard + + + + 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. + + + +#### On Intercom Developer Hub + + + + Paste the CometChat-generated webhook URL in the **Webhooks** section. + + + Choose `conversation.admin.replied` from the Webhook Topics list. + + + +### How does it work? + +The end users of your app can send queries to the Custom Support user that you have set in the extension's settings. + +These queries will be forwarded to the Intercom dashboard. + +Similarly, messages sent from Intercom dashboard by the support team or admin will be sent over to CometChat and received by your end user. + +With this, your end users can communicate with each other as well as your Custom support team using the same Chat interface. diff --git a/fundamentals/extensions-overview.mdx b/fundamentals/extensions-overview.mdx index d6e58d1dd..9c4dac908 100644 --- a/fundamentals/extensions-overview.mdx +++ b/fundamentals/extensions-overview.mdx @@ -3,73 +3,22 @@ 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. + + + + Bitly, Link Preview, Message Shortcuts, Pin Message, Rich Media Preview, Save Message, Thumbnail Generation, TinyURL, Voice Transcription + + + Giphy, Message Translation, Polls, Reminders, Stickers, Stipop, Tenor + + + Collaborative Document, Collaborative Whiteboard + + + Disappearing Messages + + + Chatwoot, Intercom + + diff --git a/fundamentals/extensions-security.mdx b/fundamentals/extensions-security.mdx new file mode 100644 index 000000000..949c5a827 --- /dev/null +++ b/fundamentals/extensions-security.mdx @@ -0,0 +1,97 @@ +--- +title: "Security" +description: "Extensions that enhance security in your chat application" +--- + +These extensions add security features to protect sensitive conversations and give users more control over their messages. + + + + Auto-delete messages after a set time + + + +--- + +## Disappearing Messages + +The Disappearing Messages extension allows end-users to send messages that disappear after a certain interval of time. This extension works for both private (one-on-one) and group messages. + +This extension is also known as exploding messages on some platforms. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension settings + + + + 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 be less than 1 year. + + +### Code + + + +```js +CometChat.sendMessage(textMessage) // Can be any type of message + .then(message => { + CometChat.callExtension('disappearing-messages','DELETE','v1/disappear',{ + msgId: message.id, // The id of the message that was just sent + timeInMS: 1633521809051 // Time in milliseconds. Should be a time from the future. + }).then(response => { + // Successfully scheduled for deletion + }) + + // Logic to display the sent message on the screen. + // ... + }).catch(error => { + // Error occured + }); +``` + + +```java +JSONObject body=new JSONObject(); +body.put("msgId", ID_OF_THE_SENT_MESSAGE); +body.put("timeInMS", 1633521809051); // Change to a future timestamp + +// Once the message is sent successfully, call this. +CometChat.callExtension("disappearing-messages", "DELETE", "/v1/disappear", body, + new CometChat.CallbackListener() { + @Override + public void onSuccess(JSONObject responseObject) { + // Will disappear successfully. + } + @Override + public void onError(CometChatException e) { + // Some error occured. + } +}); +``` + + +```swift +// Once a message is sent successfully, call this. +// Change the timeInMS to a future timestamp. +CometChat.callExtension(slug: "disappearing-messages", type: .delete, endPoint: "v1/disappear", body: ["msgId":SENT_MESSAGE_ID, "timeInMS": 1633521809051], onSuccess: { (response) in + // Will disappear successfully +}) { (error) in + // Some error occured +} +``` + + diff --git a/fundamentals/extensions-user-engagement.mdx b/fundamentals/extensions-user-engagement.mdx new file mode 100644 index 000000000..b05d5e0f6 --- /dev/null +++ b/fundamentals/extensions-user-engagement.mdx @@ -0,0 +1,639 @@ +--- +title: "User Engagement" +description: "Extensions that boost user engagement in your chat application" +--- + +These extensions help keep users engaged and make conversations more expressive. From GIFs and stickers to polls and reminders, they add interactive elements to your chat. + + + + Add GIFs from Giphy + + + Translate messages into 70+ languages + + + Create and vote on polls + + + Set reminders for messages + + + Manage stickers from the dashboard + + + Access Stipop's sticker platform + + + Add GIFs from Tenor + + + +--- + +## Giphy + +GIFs are a great way to change the tone or convey emotions in your conversations. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Before you begin + + + + 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 + + + + 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. + + + +### Code + +#### Get Trending GIFs + + + +```js +const URL = "v1/trending?offset=1&limit=15"; +CometChat.callExtension("gifs-giphy", "GET", URL, null) + .then((response) => { + // GIFs data from Giphy + }) + .catch((error) => { + // Error occured + }); +``` + + +```java +String URL = "/v1/trending?offset=1&limit=15"; + +CometChat.callExtension("gifs-giphy", "GET", URL, null, +new CometChat.CallbackListener < JSONObject > () { + @Override + public void onSuccess(JSONObject jsonObject) { + // GIFs data from Giphy + } + @Override + public void onError(CometChatException e) { + // Some error occured + } +}); +``` + + +```swift +CometChat.callExtension(slug: "gifs-giphy", type: .get, endPoint: "v1/trending?offset=10&limit=15", body: nil, onSuccess: { (response) in + // GIFs data from Giphy + }) { (error) in + // Some error occured + } + } +``` + + + +#### Search for GIFs + + + +```js +const URL = "v1/search?offset=1&limit=15&query=awesome"; +CometChat.callExtension("gifs-giphy", "GET", URL, null) + .then((response) => { + // GIFs data from Giphy + }) + .catch((error) => { + // Error occured + }); +``` + + + +--- + +## Message Translation + +The Message Translation extension helps you translate messages into multiple languages. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension settings + + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Message Translation**. + + + +### Supported Languages + +We support translations in 70+ languages including: English (en), Spanish (es), French (fr), German (de), Chinese Simplified (zh), Japanese (ja), Korean (ko), Hindi (hi), Arabic (ar), Russian (ru), Portuguese (pt), and many more. + + +Language codes follow [RFC 5646](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes). Use ISO 639-1 codes where available. + + +### Code + + + +```js +CometChat.callExtension('message-translation', 'POST', 'v2/translate', { + "msgId": 12, + "text": "Hey there! How are you?", + "languages": [ "ru", "hi", "mr" ] +}).then( result => { + // Result of translations +}) +.catch(error => { + // Some error occured +}); +``` + + +```java +JSONObject body=new JSONObject(); +JSONArray languages = new JSONArray(); + +languages.add("ru"); +languages.add("hi"); + +body.put("msgId", 12); +body.put("languages", languages); +body.put("text", "Hey there! How are you?"); + +CometChat.callExtension("message-translation", "POST", "/v2/translate", body, + new CometChat.CallbackListener < JSONObject > () { + @Override + public void onSuccess(JSONObject jsonObject) { + // Result of translations + } + @Override + public void onError(CometChatException e) { + // Some error occured + } +}); +``` + + +```swift +CometChat.callExtension(slug: "message-translation", type: .post, endPoint: "v2/translate", body: ["msgId": 12 ,"languages": ["hi", "ru"], "text": "Hey there! How are you?"] as [String : Any], onSuccess: { (response) in + // Result of translations + }) { (error) in + // Some error occured + } +``` + + + +--- + +## Polls + +Polls let you quickly record opinions directly in conversations and view the results. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension settings + + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Polls**. + + + +### Code + +#### Creating a Poll + + + +```js +CometChat.callExtension('polls', 'POST', 'v2/create', { + "question": "Which OS do you use?", + "options": ["Windows", "Ubuntu", "MacOS", "Other"], + "receiver": "cometchat-uid-1", + "receiverType": "user" +}).then(response => { + // Details about the created poll +}) +.catch(error => { + // Error occured +}); +``` + + +```java +JSONObject body=new JSONObject(); +JSONArray options = new JSONArray(); + +options.add("Milk"); +options.add("Cereal"); + +body.put("question", "Milk goes first or the cereal?"); +body.put("options", options); +body.put("receiver", "cometchat-guid-1"); +body.put("receiverType", "group"); + +CometChat.callExtension("polls", "POST", "/v2/create", body, + new CometChat.CallbackListener < JSONObject > () { + @Override + public void onSuccess(JSONObject jsonObject) { + //On Success + } + @Override + public void onError(CometChatException e) { + //On Failure + } +}); +``` + + +```swift +CometChat.callExtension(slug: "polls", type: .post, endPoint: "v2/create", body: ["question": "Which OS do you use?" ,"options":["Windows", "Ubuntu", "MacOS", "Other"],"receiver":"cometchat-uid-1","receiverType":"user"] as [String : Any], onSuccess: { (response) in + // Details about the created poll + }) { (error) in + // Error occured + } +``` + + + +#### Voting in a Poll + + + +```js +CometChat.callExtension('polls', 'POST', 'v2/vote', { + vote: "3", + id: "d5441d53-c191-4696-9e92-e4d79da7463", +}).then(response => { + // Successfully voted +}) +.catch(error => { + // Error Occured +}); +``` + + + +#### Getting Results + + + +```js +CometChat.callExtension('polls', 'GET', 'v2/results?id='+POLL_ID, null) +.then(results => { + // Poll results +}) +.catch(error => { + // Some error occured +}); +``` + + + + +Polls are custom messages. Use the `incrementUnreadCount` flag in `metadata` to update unread counters when a poll is received. + + +--- + +## Reminders + +Create reminders for messages or anything else. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension Settings + + + + 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 must exist for your app. Ensure no existing user uses the same UID. + + +### Code + +#### Set Message Reminders + + + +```js +CometChat.callExtension('reminders', 'POST', 'v1/reminder', { + about: 1, + isCustom: false, + timeInMS: 1638351344989 +}).then(response => { + // Reminder created successfully +}).catch(error => { + // Some error occured +}); +``` + + + +#### Set Personal Reminders + + + +```js +CometChat.callExtension('reminders', 'POST', 'v1/reminder', { + about: "Drinking water", + isCustom: true, + timeInMS: 1638351344989 +}).then(response => { + // Reminder created successfully +}).catch(error => { + // Some error occured +}); +``` + + + +#### List Reminders + + + +```js +CometChat.callExtension('reminders', 'GET', 'v1/fetch', null).then(response => { + // reminders array +}).catch(error => { + // Some error occured +}); +``` + + + +#### Delete Reminders + + + +```js +CometChat.callExtension('reminders', 'DELETE', 'v1/reminder', { + reminderId: "e9cda52a-3839-4fd5-a010-b70db136f0f1" +}).then(response => { + // Reminder deleted successfully +}).catch(error => { + // Some error occured +}); +``` + + + +--- + +## Stickers + +The Stickers Extension is an image manager which allows you to quickly add/remove stickers directly from the dashboard. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension settings + + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Stickers**. + + + + +CometChat provides 14 default sticker sets. You can also create your own sets and enable only the stickers you want to use. + + +### Code + +#### Loading Stickers + + + +```js +CometChat.callExtension('stickers', 'GET', 'v1/fetch', null) +.then(stickers => { + // Stickers received +}) +.catch(error => { + // Some error occured +}); +``` + + +```java +CometChat.callExtension("stickers", "GET", "/v1/fetch", null, + new CometChat.CallbackListener() { + @Override + public void onSuccess(JSONObject responseObject) { + // Stickers received here. + } + @Override + public void onError(CometChatException e) { + // Some error occured. + } +}); +``` + + +```swift +CometChat.callExtension(slug: "stickers", type: .get, endPoint: "v1/fetch", body: nil, onSuccess: { (response) in + print("Success",response) +}) { (error) in + print("Error",error?.errorCode, error?.errorDescription) +} +``` + + + +--- + +## Stipop + +Stipop is the world's trendiest sticker platform and creator community. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### 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 + + + + 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. + + + +### Code + +#### Get Trending Stickers + + + +```js +const qs = `?lang=${lang}&limit=${limit}&pageNumber=${pageNumber}&countryCode=${contryCode}`; + +CometChat.callExtension('stickers-stipop', 'GET', 'v1/trending' + qs, null) + .then(response => { + // Stickers in response + }) + .catch(error => { + // Error occured + }); +``` + + + +#### Search for Stickers + + + +```js +const qs = `?lang=${lang}&limit=${limit}&pageNumber=${pageNumber}&query=${query}`; + +CometChat.callExtension('stickers-stipop', 'GET', 'v1/search' + qs, null) + .then(response => { + // Stickers in response + }) + .catch(error => { + // Error occured + }); +``` + + + +--- + +## Tenor + +GIFs are a great way to change the tone or convey emotions in your conversations. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Before you begin + + + + 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 + + + + 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. + + + +### Code + +#### Get Trending GIFs + + + +```js +const URL = "v1/trending?offset=1&limit=15"; +CometChat.callExtension("gifs-tenor", "GET", URL, null) + .then((response) => { + // GIFs data from Tenor + }) + .catch((error) => { + // Error occured + }); +``` + + + +#### Search for GIFs + + + +```js +const URL = "v1/search?offset=1&limit=15&query=awesome"; +CometChat.callExtension("gifs-tenor", "GET", URL, null) + .then((response) => { + // GIFs data from tenor + }) + .catch((error) => { + // Error occured + }); +``` + + diff --git a/fundamentals/extensions-user-experience.mdx b/fundamentals/extensions-user-experience.mdx new file mode 100644 index 000000000..3fb1c2d57 --- /dev/null +++ b/fundamentals/extensions-user-experience.mdx @@ -0,0 +1,703 @@ +--- +title: "User Experience" +description: "Extensions that enhance the user experience in your chat application" +--- + +These extensions help you create a polished, intuitive chat experience. From URL shortening to voice transcription, each extension addresses a specific UX need. + + + + Shorten long URLs with Bitly + + + Show previews for shared links + + + Expand text shortcuts into full messages + + + Pin important messages in conversations + + + Generate rich previews via Iframely + + + Let users save messages for later + + + Auto-generate image and video thumbnails + + + Shorten URLs with TinyURL + + + Convert audio messages to text + + + +--- + +## Bitly + +Use Bitly to shorten long URLs in messages and keep links clean and consistent. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ❌ | [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 + + + + 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 + + + + 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. + + + +### Code + +This extension uses the `callExtension` method provided by the CometChat SDK: + + + +```js +CometChat.callExtension("url-shortener-bitly", "POST", "v1/shorten", { + text: "Your message with URL https://yourdomain.com/very/very/long/url", +}) + .then((response) => { + // minifiedText in response + }) + .catch((error) => { + // Error occured + }); +``` + + +```java +String URL = "/v1/shorten"; +JSONObject body=new JSONObject(); + +body.put("text", "Your message with URL https://yourdomain.com/very/very/long/url"); + +CometChat.callExtension("url-shortener-bitly", "POST", URL, body, +new CometChat.CallbackListener < JSONObject > () { + @Override + public void onSuccess(JSONObject jsonObject) { + // minifiedText from the extension + } + @Override + public void onError(CometChatException e) { + // Some error occured + } +}); +``` + + +```swift +CometChat.callExtension(slug: "url-shortener-bitly", type: .post, endPoint: "v1/shorten", body: ["text": "Your message with URL https://yourdomain.com/very/very/long/url"], onSuccess: { (response) in + // minifiedText from the extension + }) { (error) in + // Some error occured + } + } +``` + + + +--- + +## Link Preview + +The Link Preview extension shows a preview of the web page for every link in your message. + + +**Available via:** [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](#rich-media-preview). + + +### Extension settings + + + + 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 a few details about the URL that is in your message: + +- **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. + +These details are provided as part of metadata: + +```json +"@injected": { + "extensions": { + "link-preview": { + "links": [ + { + "description": "Create an account or log into Facebook...", + "favicon": "https://static.xx.fbcdn.net/rsrc.php/yz/r/KFyVIAWzntM.ico", + "image": "https://www.facebook.com/images/fb/icon/325x325.png", + "title": "Facebook - Log In or Sign Up", + "url": "https://www.facebook.com" + } + ] + } + } +} +``` + +### Code + + + +```js +var metadata = message.getMetadata(); +if (metadata != null) { + var injectedObject = metadata["@injected"]; + if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) { + var extensionsObject = injectedObject["extensions"]; + if (extensionsObject != null && extensionsObject.hasOwnProperty("link-preview")) { + var linkPreviewObject = extensionsObject["link-preview"]; + var links = linkPreviewObject["links"]; + var description = links[0]["description"]; + var favicon = links[0]["favicon"]; + var image = links[0]["image"]; + var title = links[0]["title"]; + var url = links[0]["url"]; + } + } +} +``` + + +```java +JSONObject metadata = message.getMetadata(); +if (metadata != null) { + JSONObject injectedObject = metadata.getJSONObject("@injected"); + if (injectedObject != null && injectedObject.has("extensions")) { + JSONObject extensionsObject = injectedObject.getJSONObject("extensions"); + if (extensionsObject != null && extensionsObject.has("link-preview")){ + JSONObject linkObject = extensionsObject.getJSONObject("link-preview"); + JSONArray linkArray= linkObject.getJSONArray("links"); + JSONObject linkPreviewObject=linkArray.getJSONObject(0); + if (linkPreviewObject.has("description")) + String description = linkPreviewObject.getString("description"); + // ... other fields + } + } +} +``` + + +```swift +if let metaData = textMessage.metaData, let injected = metaData["@injected"] as? [String : Any], let cometChatExtension = injected["extensions"] as? [String : Any], let linkPreviewDictionary = cometChatExtension["link-preview"] as? [String : Any], let linkArray = linkPreviewDictionary["links"] as? [[String: Any]] { + guard let linkPreview = linkArray[safe: 0] else { return } + if let linkTitle = linkPreview["title"] as? String { print(linkTitle) } + // ... other fields +} +``` + + + + +Links that take more than a second to resolve will be automatically skipped to keep in-flight transit time to a minimum. + + +--- + +## Message Shortcuts + +The Message Shortcuts extension enables your users to send predefined messages. For example, **!hb** can be automatically expanded to **Happy birthday!** + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + + +Global shortcuts are available to all users. User-created shortcuts are private to the creator. + + +### Extension 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. + + + +### Code + +#### Fetch all shortcuts + + + +```js +CometChat.callExtension('message-shortcuts', 'GET', 'v1/fetch', null) +.then(shortcuts => { + // Save these shortcuts locally. +}) +.catch(error => { + // Some error occured +}); +``` + + +```java +CometChat.callExtension("message-shortcuts", "GET", "/v1/fetch", null, + new CometChat.CallbackListener() { + @Override + public void onSuccess(JSONObject responseObject) { + // Shortcuts received here. + } + @Override + public void onError(CometChatException e) { + // Some error occured. + } +}); +``` + + +```swift +CometChat.callExtension(slug: "message-shortcuts", type: .get, endPoint: "v1/fetch", body: nil, onSuccess: { (response) in + print("Shortcuts", response) +}) { (error) in + print("Error", error?.errorCode, error?.errorDescription) +} +``` + + + +#### Modify shortcuts + + + +```js +const finalList = { + shortcuts: { + "!hbd":"Happy birthday! Have fun!" + } +}; + +CometChat.callExtension('message-shortcuts', 'POST', 'v1/update', finalList) +.then(response => { + // Updated successfully. +}) +.catch(error => { + // Some error occured +}); +``` + + + +--- + +## Pin Message + +Pin messages so important information stays visible in a conversation. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension settings + + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Pin Message**. + + + +### Code + +#### Pin a message + + + +```js +CometChat.callExtension('pin-message', 'POST', 'v1/pin', { + "msgId": 280 +}).then(response => { + // { success: true } +}) +.catch(error => { + // Error occurred +}); +``` + + + +#### Unpin a message + + + +```js +CometChat.callExtension('pin-message', 'DELETE', 'v1/unpin', { + "msgId": 111, + "receiverType": "group", + "receiver": "cometchat-guid-1" +}).then(response => { + // { success: true } +}) +.catch(error => { + // Error occurred +}); +``` + + + +#### Fetch pinned messages + + + +```js +const URL = `v1/fetch?receiverType=${RECEIVER_TYPE}&receiver=${RECEIVER}`; +CometChat.callExtension('pin-message', 'GET', URL, null).then(response => { + // {pinnedMessages: []} +}) +.catch(error => { + // Error occured +}); +``` + + + +--- + +## Rich Media Preview + +The Rich Media Preview Extension generates rich preview panels for all popular sites using Iframely. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Before you begin + + + + Sign up with [Iframely](https://iframely.com/embed). + + + Generate an Iframely API key for configuring the extension. + + + +### Extension 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. + + + + +The preview metadata is updated after the message is sent, so implement the `onMessageEdited` listener. See [Edit message](/sdk/javascript/edit-message) in the SDK docs. + + +### Code + + + +```js +var metadata = message.getMetadata(); +if (metadata != null) { + var injectedObject = metadata["@injected"]; + if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) { + var extensionsObject = injectedObject["extensions"]; + if (extensionsObject != null && extensionsObject.hasOwnProperty("rich-media")) { + var richMediaObject = extensionsObject["rich-media"]; + } + } +} +``` + + + +--- + +## Save Message + +Let users save important messages and revisit them later. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + + +Saved messages are private and visible only to the user who saved them. + + +### Extension settings + + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Save Message**. + + + +### Code + +#### Save a message + + + +```js +CometChat.callExtension('save-message', 'POST', 'v1/save', { + "msgId": 111 +}).then(response => { + // { success: true } +}) +.catch(error => { + // Error occured +}); +``` + + + +#### Unsave a message + + + +```js +CometChat.callExtension('save-message', 'DELETE', 'v1/unsave', { + "msgId": 111 +}).then(response => { + // { success: true } +}) +.catch(error => { + // Error occured +}); +``` + + + +#### Fetch saved messages + + + +```js +CometChat.callExtension('save-message', 'GET', 'v1/fetch', null).then(response => { + // {savedMessages: []} +}) +.catch(error => { + // Error occured +}); +``` + + + +--- + +## Thumbnail Generation + +The Thumbnail Generation extension generates thumbnail previews for image and video messages. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Extension settings + + + + Login to [CometChat](https://app.cometchat.com/login) and select your app. + + + Go to **Chat & Messaging --> Features**, under **Extentions** and enable **Thumbnail Generation**. + + + +### Code + + + +```js +const metadata = message.getMetadata(); +if (metadata != null) { + const injectedObject = metadata["@injected"]; + if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) { + const extensionsObject = injectedObject["extensions"]; + if (extensionsObject != null && extensionsObject.hasOwnProperty("thumbnail-generation")) { + const { attachments } = extensionsObject["thumbnail-generation"]; + for (const attachment of attachments) { + if (!attachment.error) { + const { url_small, url_medium, url_large } = attachment.data.thumbnails; + // Use the urls accordingly. + } + } + } + } +} +``` + + + + +Unlike image thumbnails, which are normally generated in milliseconds, video thumbnails may take a little longer. + + +--- + +## TinyURL + +Use TinyURL to shorten long links and keep messages clean and readable. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Before you begin + + + + Sign up with [TinyURL](https://tinyurl.com/app/login). + + + In TinyURL, open **Account** → **API** and create a token with permission to create TinyURL links. + + + +### Extension 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. + + + +### Code + + + +```js +CometChat.callExtension("url-shortener-tinyurl", "POST", "v1/shorten", { + text: "Your message with URL https://yourdomain.com/very/very/long/url", +}) + .then((response) => { + // minifiedText in response + }) + .catch((error) => { + // Error occured + }); +``` + + + +--- + +## Voice Transcription + +Voice transcription extension converts audio messages into text using Rev.ai. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +### Before you begin + + + + Sign up with [Rev.ai](https://rev.ai/). + + + Get your Rev.ai `Access Token` for configuring this extension. + + + +### Extension settings + + + + 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. + + + + +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. + + +### Code + + + +```js +var metadata = message.getMetadata(); +if (metadata != null) { + var injectedObject = metadata["@injected"]; + if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) { + var extensionsObject = injectedObject["extensions"]; + if (extensionsObject != null && extensionsObject.hasOwnProperty("voice-transcription")) { + var voiceTranscriptionObject = extensionsObject["voice-transcription"]; + var transcribed_message = voiceTranscriptionObject["transcribed_message"]; + } + } +} +``` + + diff --git a/fundamentals/features-core.mdx b/fundamentals/features-core.mdx index 5f2c7a2b5..1c65912cc 100644 --- a/fundamentals/features-core.mdx +++ b/fundamentals/features-core.mdx @@ -3,54 +3,122 @@ 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:** [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: +## Core Features - * 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. +### **Instant Messaging** +- Enable real-time one-to-one and group chat so users can send and receive messages instantly. -* Media sharing: + + + - * 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. +### **Media Sharing** +- Let users share images, videos, documents, and other files directly within conversations. -* Message Delivery and Read receipts: + + + - * 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. +### **Read Receipts** +- Show when messages are delivered and when they are read, so users know message status at a glance. -* Typing indicators: + + + - * 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. +### **Mark as Unread** +- Allow users to mark messages as unread so they can revisit important conversations later. -* Mentions (@username): + + + - * 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. +### **Typing Indicators** +- Display when another user is typing to make conversations feel more responsive and natural. -* Reactions: + + + - * 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. +### **User Presence** +- Show online, offline, and last-seen states to help users understand availability. -* Threaded Conversations: + + + - * 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. +### **Reactions** +- Let users react to messages with emojis for quick feedback without sending a new message. -* User presence: + + + - * 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/smart-chat-features.mdx b/fundamentals/smart-chat-features.mdx new file mode 100644 index 000000000..4809d0c91 --- /dev/null +++ b/fundamentals/smart-chat-features.mdx @@ -0,0 +1,446 @@ +--- +title: "Smart Chat Features" +description: "AI-powered features that help conversations start faster, stay on track, and wrap up clearly" +--- + +CometChat AI helps conversations start faster, stay on track, and wrap up clearly with smart suggestions and summaries. + + +**Available via:** [UI Kit Builder](/chat-builder/react/overview) ✅ | [Widget Builder](/widget/html/overview) ✅ | [UI Kits](/ui-kit/react/overview) ✅ | [SDK](/sdk/javascript/overview) ✅ + + +## 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. + + + +## 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. + + +--- + +## Conversation Starter + +Conversation Starter enables you to retrieve an initial message in a new conversation, often used to set the context for the conversation that is about to begin. + +### Before you begin + + + + 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? + +CometChat AI analyzes the user's tone and writing style by reviewing recent messages sent by that user within the application. + +The SDK includes a method for retrieving conversation starters in a chat. This method returns an array containing three potential starters for the conversation. + +Configuration options: +- **lastNMessages**: Fetch a specific number of recent messages. +- **fromTimestamp**: Fetch messages from a particular timestamp. +- **toTimestamp**: Fetch messages up to a particular timestamp. + + +A maximum of **only** `1000` messages will be fetched regardless of configuration. + + +### Code + + + +```js +const receiverId = 'UID/GUID'; +const receiverType = 'user/group'; +const configuration = {lastNMessages: 100}; + +CometChat.getConversationStarter(receiverId, receiverType, configuration).then( + (conversationStarter) => { + console.log("Conversation Starter", conversationStarter); + }, + (error) => { + console.log("An error occurred while fetching conversation starter", error); + } +); +``` + + +```java +String receiveId = ""; +String receiverType = CometChatConstants.RECEIVER_TYPE_USER; + +JSONObject configuration = new JSONObject(); +try { + configuration.put("lastNMessages", 100); +} catch (JSONException e) { + throw new RuntimeException(e); +} + +CometChat.getConversationStarter(receiveId, receiverType, configuration, new CometChat.CallbackListener>() { + @Override + public void onSuccess(List strings) { + Log.e(TAG, strings.toString()); + } + @Override + public void onError(CometChatException e) { + Log.e(TAG, e.getMessage()); + } +}); +``` + + +```kotlin +val receiveId = "" +val receiverType: String = CometChatConstants.RECEIVER_TYPE_USER +val configuration = JSONObject() +try { + configuration.put("lastNMessages", 100) +} catch (e: JSONException) { + throw RuntimeException(e) +} + +CometChat.getConversationStarter( + receiveId, + receiverType, + configuration, + object : CallbackListener?>() { + fun onSuccess(strings: List) { + Log.e(TAG, strings.toString()) + } + override fun onError(e: CometChatException) { + Log.e(TAG, e.getMessage()) + } + } +) +``` + + +```swift +let receiverId = "" +let receiverType = CometChat.ReceiverType.group +let configuration = [ "lastNMessages": 100 ] + +CometChat.getConversationStarter(receiverId: "cometchat-uid-1", receiverType: .user, configuration: configuration) { startersReplies in + print("getConversationStarter success: \(startersReplies)") +} onError: { error in + print("getConversationStarter error: \(error?.errorDescription)") +} +``` + + +```dart +String receiveId = ""; +String receiverType = CometChatConversationType.user; +Map configuration = { "lastNMessages": 100 }; + +CometChat.getConversationStarter("cometchat-uid-2", "user", configuration: configuration, onSuccess: (List starters) { + debugPrint("getConversationStarter Success: $starters"); +}, onError: (CometChatException e) { + debugPrint("getConversationStarter Error: $e"); +}); +``` + + + +### UI Kits + +Conversation Starter functions seamlessly starting from v4 of the Chat UI Kits. It is triggered automatically when there are no messages in a conversation. + +--- + +## Smart Replies + +Smart Replies enable the retrieval of an AI-generated response message within a conversation. + +### Before you begin + + + + 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? + +CometChat AI goes through the messages of a conversation to understand the context & provide relevant replies. It returns three replies: `positive, negative & neutral`. + +Configuration options: +- **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. + + +A maximum of **only** `1000` messages will be fetched regardless of configuration. + + +### Code + + + +```js +const receiverId = "UID/GUID"; +const receiverType = "user/group"; +const configuration = { lastNMessages: 100 }; + +CometChat.getSmartReplies(receiverId, receiverType, configuration).then( + (smartReplies) => { + const { positive, negative, neutral } = smartReplies; + console.log("Positive Reply", positive); + console.log("Negative Reply", negative); + console.log("Neutral Reply", neutral); + }, + (error) => { + console.log("An error occurred while fetching smart replies", error); + } +); +``` + + +```java +String receiverId = "UID/GUID"; +String receiverType = "user/group"; +JSONObject configuration = new JSONObject(); +try { + configuration.put("lastNMessages", 100); +} catch (JSONException e) { + throw new RuntimeException(e); +} + +CometChat.getSmartReplies(receiverId, CometChatConstants.RECEIVER_TYPE_USER, configuration, new CometChat.CallbackListener>() { + @Override + public void onSuccess(HashMap smartReplies) { + for (String s : smartReplies.keySet()) { + Log.e(TAG, "Smart Reply: " + s + " " + smartReplies.get(s)); + } + } + @Override + public void onError(CometChatException e) { + Log.e(TAG, e.getMessage()); + } +}); +``` + + +```kotlin +val receiverId: String = "UID/GUID" +val receiverType: String = "user/group" +val configuration = JSONObject() +try { + configuration.put("lastNMessages", 100) +} catch (e: JSONException) { + throw RuntimeException(e) +} + +CometChat.getSmartReplies( + receiverId, + CometChatConstants.RECEIVER_TYPE_USER, + configuration, + object : CallbackListener>() { + override fun onSuccess(smartReplies: HashMap) { + for (s in smartReplies.keys) { + Log.e(TAG, "Smart Reply: $s ${smartReplies[s]}") + } + } + override fun onError(e: CometChatException) { + Log.e(TAG, e.message) + } + } +) +``` + + +```swift +let receiverId = "" +let receiverType = CometChat.ReceiverType.user +let configuration = [ "lastNMessages": 100 ] + +CometChat.getSmartReplies(receiverId: receiverId, receiverType: receiverType, configuration: configuration) { smartRepliesMap in + print("GetSmartReplies success: \(smartRepliesMap)") +} onError: { error in + print("GetSmartReplies error: \(error?.errorDescription)") +} +``` + + +```dart +String receiveId = ""; +String receiverType = CometChatConversationType.user; +Map configuration = { "lastNMessages": 100 }; + +CometChat.getSmartReplies(receiveId, receiverType, configuration: configuration, onSuccess: (HashMap map) { + debugPrint("getSmartReplies Success: $map"); +}, onError: (CometChatException e) { + debugPrint("getSmartReplies Error: $e"); +}); +``` + + + +### UI Kits + +Smart Replies function seamlessly starting from v4 of the Chat UI Kits. In v4, Smart Replies are accessible manually, whereas in v5, they work automatically. + +--- + +## Conversation Summary + +Conversation Summary enables the summarization of conversations using AI. + +### Before you begin + + + + 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? + +CometChat AI goes through the messages of a conversation to understand the context & provide a short summary of the conversation. + +The SDK method returns the conversation summary as a string. + +Configuration options: +- **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. + + +A maximum of **only** `1000` messages will be fetched regardless of configuration. + + +### Code + + + +```js +const receiverId = "UID/GUID"; +const receiverType = "user/group"; +const configuration = { lastNMessages: 100 }; + +CometChat.getConversationSummary(receiverId, receiverType, configuration).then( + (conversationSummary) => { + console.log("Conversation Summary:", conversationSummary); + }, + (error) => { + console.log("An error occurred while fetching conversation summary.", error); + } +); +``` + + +```java +String receiverId = "UID/GUID"; +String receiverType = CometChatConstants.RECEIVER_TYPE_USER; +JSONObject configuration = new JSONObject(); +try { + configuration.put("lastNMessages", 100); +} catch (JSONException e) { + throw new RuntimeException(e); +} + +CometChat.getConversationSummary(receiverId, receiverType, configuration, new CometChat.CallbackListener() { + @Override + public void onSuccess(String s) { + Log.e(TAG, s); + } + @Override + public void onError(CometChatException e) { + Log.e(TAG, e.getMessage()); + } +}); +``` + + +```kotlin +val receiverId = "UID/GUID" +val receiverType = CometChatConstants.RECEIVER_TYPE_USER +val configuration = JSONObject() + +try { + configuration.put("lastNMessages", 100) +} catch (e: JSONException) { + throw RuntimeException(e) +} + +CometChat.getConversationSummary(receiverId, receiverType, configuration, + object : CometChat.CallbackListener() { + override fun onSuccess(s: String) { + Log.e(TAG, s) + } + override fun onError(e: CometChatException) { + Log.e(TAG, e.localizedMessage) + } +}) +``` + + +```swift +let receiverId = "" +let receiverType = CometChat.ReceiverType.group +let configuration = [ "lastNMessages": 100 ] + +CometChat.getConversationSummary(receiverId: receiverId, receiverType: receiverType, configuration: configuration) { summary in + print("getConversationSummary success: \(summary)") +} onError: { error in + print("getConversationSummary error: \(error?.errorDescription)") +} +``` + + +```dart +String receiveId = ""; +String receiverType = CometChatConversationType.user; +Map configuration = { "lastNMessages": 100 }; + +CometChat.getConversationSummary(receiveId, receiverType, configuration: configuration, onSuccess:(String summary) { + debugPrint("getConversationSummary Success: $summary"); +}, onError: (CometChatException e) { + debugPrint("getConversationSummary error: $e"); +}); +``` + + + +### UI Kits + +Conversation Summary functions seamlessly starting from v4 of the Chat UI Kits. The placement of the AI icon may vary based on the version. Clicking on the icon will display the Conversation Summary. 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: