App development process

Use this method to install Node.js v18.18.2 and the FDK together on your system via Homebrew (on MacOS and Linux) or Chocolatey (on Windows).

Note:If you already have Homebrew or Chocolatey installed on your system, skip this section and proceed with the FDK installation step. Otherwise, refer to the following information on installing Homebrew or Chocolatey.

• For MacOS or Linux: Install the latest version of HomeBrew.

• For Windows: Install the latest version of Chocolatey.

  Note:If Chocolatey is already installed on your system, run the following command to run PowerShell scripts in the current session, bypassing any execution policy restrictions: Set-ExecutionPolicy Bypass -Scope Process -Force;

1. Run the following command to enable Homebrew to access the Freshworks CLI repository and auto-configure the CLI.

   brew tap freshworks-developers/homebrew-tap

2. Run the following command to install the latest CLI version.

   brew install fdk

   This command performs the following tasks:

   • Creates the custom_node_location folder in your system.

     Note:The terminal displays the location where the custom_node_location folder is created.

   • Installs Node.js version 18.18.2, compatible with the CLI, into the custom_node_location folder.

   • Installs the Freshworks CLI in the same custom_node_location folder.

3. Add the following command to the appropriate environment file (.bash_profile, .bashrc, or .zshrc) on your system. This command loads the necessary settings required for using the CLI commands.

   source "$(brew --repository freshworks-developers/homebrew-tap)/path.bash.inc"

4. Apply the changes made to the environment file in the current terminal by either closing and reopening the terminal or by running the source ~/.{file_name} command. For example, source ~/.bashrc.

5. Run the following command to verify the CLI installation.

   fdk version

   Ensure that the installed CLI version is 9.1.1 or later. If you are on an earlier version, migrate to the latest FDK version

1. From the command line, navigate to the empty directory in which you want to create an app.

2. Run the fdk create command. A prompt to choose a product is displayed.

3. Select freshchat and press Enter. A prompt to choose a template is displayed.

4. Select your_first_app. A new app is created based on the your_first_app template.

Alternatively, navigate to the command line and run the following command to create a front-end app.

fdk create --product freshchat --template your_first_app

The following directories and files are created as a result of the fdk create command.

<script async src="{{{appclient}}}"></script>

After creating the default front-end app files, to build the app,

1. Configure the app manifest.

2. Implement your app logic.

   1. Navigate to app.js and replace the default code with your app logic.

   2. Use our front-end methods to formulate your app logic.

      • For your app to react to app initialization, activation, or deactivation, use the appropriate app lifecycle methods.

      • For your app to retrieve the information about the different objects on the product UI and use the information to process the app logic, use the appropriate data method.

      • For your app to react to the events (such as button clicks or changes/updates to field values) that occur on the product UI, use the appropriate event methods.
      • For your app to trigger certain actions on the product UI, use the appropriate interface methods.

   3. Use our developer toolkit to help solve specific requirements of your app.

      • To use external libraries, use our provision to include external libraries into your app files.

      • To place secure http calls from your app to a third-party domain, use the request method.

      • To enable communication between the various instances of your app, use the instance method.

      • To enable your app to access third-party resources that require an OAuth authentication, use the provision to place OAuth requests.

      • To persist and use data throughout your app’s lifecycle, use our data storage tools.

3. Use Crayons (the Freshworks component library) to construct your app’s UI.

4. Configure app settings.

Important:To test your app, use the latest version of Chrome.

1. From the command line, navigate to the directory that contains the app related files and run the fdk run command.

2. Log in to your Freshchat account.

3. To the Freshchat account URL, append ?dev=true.

   Example URL: https://<sub-domain>.myfreshworks.com/crm/messaging/a/709434077107200/inbox/0/0/conversation/709434078252546?dev=true.

4. To allow the Chrome browser to connect to the test server that runs on HTTP,

   1. Navigate to Settings > Advanced > Privacy and security > Site settings > Insecure content.

   2. In the Allow section, click Add and enter the account URL.

      Example URL: https://<sub-domain>.myfreshworks.com

5. From the homepage of your account, navigate to the appropriate location where your app is to be deployed, verify that the app is rendered and test your app’s function.