Chat

The module allows the creation of chat dialogs. The chat is displayed across the UI in a right panel, providing users with a persistent chat experience throughout the application.

Note

In Crowdin, a chat module from an app installed by a project owner will only be visible to project members within that project, not across the whole product.

Sample

index.js

const crowdinModule = require('@crowdin/app-project-module');
const app = crowdinModule.express();

const configuration = {
  baseUrl: 'https://123.ngrok.io',
  clientId: 'clientId',
  clientSecret: 'clientSecret',
  name: 'Sample App',
  identifier: 'sample-app',
  description: 'Sample App description',
  dbFolder: __dirname,
  imagePath: __dirname + '/' + 'logo.png',
  chat: [{
    key: 'sample-chat',
    uiPath: __dirname + '/' + 'public',
    name: 'Sample Chat'
  }]
}

const crowdinApp = crowdinModule.addCrowdinEndpoints(app, configuration);

app.listen(3000, () =>  console.log('Crowdin app started'));

You can use the React JSON Schema forms to define the UI for your chat in a declarative way:

index.js

const configuration = {
  baseUrl: 'https://123.ngrok.io',
  clientId: 'clientId',
  clientSecret: 'clientSecret',
  name: 'Sample App',
  identifier: 'sample-app',
  description: 'Sample App description',
  dbFolder: __dirname,
  imagePath: __dirname + '/' + 'logo.png',
  chat: [{
    key: 'sample-chat',
    formSchema: {
      "title": "Chat settings",
      "type": "object",
      "properties": {
        "welcomeMessage": {
          "type": "string",
          "title": "Welcome message",
          "default": "Hello! How can I help you?"
        }
      }
    },
    formUiSchema: {
      "ui:submitButtonOptions": {
        "submitText": "Save"
      }
    }
  }]
};

Chats

You can define chat dialogs:

index.js

const configuration = {
  // ... other configuration
  chat: [
    {
      key: 'first-chat',
      uiPath: __dirname + '/' + 'public/chat1',
      name: 'First Chat'
    },
    {
      key: 'second-chat',
      formSchema: {
        // ... schema definition
      },
      name: 'Second Chat'
    }
  ]
};

Configuration

Parameter	Description
key	Unique identifier for the chat.
name	Display name for the chat (optional, defaults to app name).
url	The relative URL to the content page of the module that will be integrated into the UI.
uiPath	Folder where UI of the module is located (js, html, css files).
fileName	Page name (default index.html).
formSchema	JSON schema for the form that will be displayed in the chat.
formUiSchema	JSON schema for the UI of the form that will be displayed in the chat.
formPostDataUrl	URL to custom endpoint to save form data (POST requests).
formGetDataUrl	URL to custom endpoint to retrieve form data (GET requests).
formPatchDataUrl	URL to custom endpoint for patching form data (PATCH requests).
environments	Environments where the chat module is available (crowdin, crowdin-enterprise).