You can build a Freshchat app by using the following steps.
Apps built on the Freshworks platform are compatible with the latest and immediately preceding versions of the following browsers.
- Google Chrome
Node Version Manager (NVM) enables you to install and work with multiple versions of Node.js. You can use NVM to install Node.
- To install NVM:
- On Mac or Linux, follow the installation and upgrade steps.
- On Windows, navigate to the release channel > Assets, download the nvm-setup.zip file, extract the contents of the file, and use the installer in the extracted files.
- To verify the NVM installation, run the following command. $ nvm --version
To install Node.js, follow the given steps.
- To install Node using NVM, run the following command.
$ nvm install 10.18
Note: Support for Node 8.10.x has been deprecated.
- To verify the Node installation, run the following command.
$ node --version
Note: On Windows, if the node version is not displayed, you should run the nvm on command to enable nvm.
- To set the default Node version, run the following command. $ nvm alias default 10.18
- On Windows, to install the tools and configurations required to start using Node, use the following command. $ npm install --global --production windows-build-tools For more information, see the write-up on node-gyp.
Install the CLI
- To install the CLI, run the following command. Copied Copy
- To verify the CLI installation, run the following command. $ fdk version
|npm install https://dl.freshdev.io/cli/fdk.tgz -g|
Create your First App
You can use the following steps to create an app that displays a sample text and website visitor’s name in the User Information panel on the Inbox page.
Open the terminal window, navigate to an empty directory in which you want to create your app, and follow the given steps.
- From the command line, navigate to the empty directory in which you want to create an app.
- Run the following command: fdk create A prompt to choose a product is displayed.
- Select freshchat and press Enter. A prompt to choose a template is displayed.
- Select your_first_app. A new app is created based on the your_first_app template.
The following directories and files are created as a result of the fdk create command.
|app/*||Contains all the files required for the front-end component of an app. The JS file follows the ES5 standard.|
|app/index.html||Contains files to render front-end components of an app. This is the first page that is loaded when the app is activated.
When building an app, if the app uses Data methods, Request method, Installation Parameters, or Data Storage, update the index.html file with the following reference to fresh_client.js:
|app/scripts/app.js||Contains the app logic to display a sample text and website vistor’s name in the User Information panel on the Inbox page.|
|app/styles||Contains the styles required for the front-end components of an app.|
|app/styles/styles.css||Contains CSS rules that are incorporated to HTML files, when referenced.|
|app/styles/images||Contains images that can be used in the app.|
|app/styles/images/icon.svg||Contains the app icon. The icon file should be of SVG type with a resolution of 64 x 64 pixels.|
|config/*||Contains the installation parameters and oauth configuration files.|
|config/iparams.json*||Contains all the installation parameters whose values are set when the app is installed. For more information, see Installation Parameters.|
|manifest.json*||Contains details such as the platform version the app uses, product to which the app belongs, and npm packages (dependencies) that the app uses.|
|README.md||Contains additional instructions, information, and code-related specifications pertaining to the app.|
* When building an app, do not modify these file/folder names.
Note: If you use React, Ember, Vue, or any other front-end framework, include the source files of your app in the src directory. This will ensure quick app reviews.
Test your App
- To test your app, use the latest version of Chrome.
- Ensure that you sign up for a Freshchat account.
- From the command line, navigate to the directory that contains the app related files and run the following command. $ fdk run
- Log in to your Freshchat account.
- To the Freshchat account URL, append ?dev=true. Example URL: https://web.freshchat.com/a/1234/inbox/1/0/conversation/9876?dev=true
- To allow the Chrome browser to connect to the test server that runs on HTTP,
- On Chrome 79 and higher versions:
- Navigate to Settings -> Advanced -> Privacy and security -> Site settings -> Insecure content.
- In the Allow section, click Add and enter the Freshchat account URL. Example URL: https://web.freshchat.com
- On Chrome 78 and lower versions:
- In the address bar, if a shield icon is displayed, click the icon. A warning message is displayed as the Support portal runs on HTTPS and the test server runs on HTTP.
- Click Load Unsafe Scripts to continue testing.
- On Chrome 79 and higher versions:
- From the Conversation panel, click any conversation. The app is rendered on the right side of the page.
1. Each component in the coverage summary should be at least 80% for apps to be submitted in Freshworks Marketplace. See Code coverage for more information.
2. If you have any issues when testing your app, attach detailed logs of the output in your support ticket for quick resolution from the support team.
Validate and Pack
To check if the app is error-free and package it for submission, follow the given steps.
To validate the code, run the following command.
$ fdk validate [--app-dir DIR]
Here, DIR is the relative or absolute path to the app directory. If there are errors in the code, corresponding violations are displayed. To auto-fix certain errors and display only those that need manual fixing, use the $fdk validate --fix command. Ensure to fix all violations before packing the app.
- To pack the app for submission, run the following command. $ fdk pack [--app-dir DIR] The command generates the dist/<app_directory>.zip file.
- To publish the app to the Freshworks Marketplace, navigate to the Freshchat developer portal and upload the packed file. For more information on the app submission process, see Types of Apps.