NewAgentic Developer Toolkit with Agent Skills is now GA — Build apps faster with AI in minutes. Try Now

Build your front-end app’s UI

The user interface of apps that are to be published on the Freshworks Marketplace should be consistent with our Freshworks' products' UI. We do not enforce this but it is highly recommended for better user experience.

To build a UI consistent with our products, you can use one of the following approaches:

  • Use DEW theme support. Install @freshworks/dew-styles and @freshworks/dew-components for React or meta framework apps, or add the DEW CSS CDN link for non-React or HTML apps. See Use the DEW design system.
  • Use Crayons, our UI design library. Through pre-built components, Crayons offers control and flexibility to build rich interfaces consistent with Freshworks product design and experience.
  • Use the default Freshworks stylesheet when building your app’s UI. See Use default product stylesheet.

Use the DEW design system

FDK apps support the DEW theme. Once you add the DEW CSS, your app automatically follows the product's light or dark theme. You do not need additional theme-handling code for the basic use case.

To set up DEW theme support, use the steps for your app type.

For React and meta framework apps, install the DEW packages and import the DEW CSS.

  1. Install @freshworks/dew-styles and @freshworks/dew-components using npm:

    npm install @freshworks/dew-styles @freshworks/dew-components

  2. Import the DEW CSS in your app entry file:

    import '@freshworks/dew-styles/dist/dew-assets.css';

Sync light and dark theme

Once the DEW CSS is added, your app automatically follows the product's light or dark theme. No additional theme-handling code is required for the basic use case.

Developer reference

For component APIs, usage examples, and design guidelines, see the DEW component library documentation.

For design tokens and theme variables, see the DEW Theme documentation.

Use default product stylesheet

To use our stylesheet,

  1. Navigate to the app project and in all front-end components’ HTML files (example: template.html, modal.html, and so on), include the following code to import the Freshworks stylesheet.

      <link rel="stylesheet" type="text/css" href="https://static.freshdev.io/fdk/2.0/assets/freshworks.css">

  2. Ensure that the class names of the UI elements used in the app match those used by Bootstrap.

  3. In all front-end components’ HTML files, as part of the template code, include the fw-widget-wrapper class, as follows.

    <body>
  <div class="fw-widget-wrapper">
  //template code
  </div>
</body>

  4. Implement some of the common UI elements as follows.

    ELEMENTUSAGE
    Label - Defines a label for an input element
    <span class="label">Company</span>
    Section Divider - Separates various sections of the app.
    <div class="fw-divider"></div>
    Links - Allows users to move from one page to another.
    No class needs to be added.
    <a href="">First Opportunity</a>
    List - All divs within the parent are placed one after the other.
    If you are using this template to display field names and values, use the muted class for field names.
    <div class="fw-content-list">
  <div class="muted">Email</div>
  <div>tom@outerspace.com</div>
</div>