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.

Important:

App UI is not applicable for the call module, since the module doesn't support front-end methods.

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
    Page title
    <div class="title">The Title</div>
    Page title - small
    <div class="title-small">A small title</div>
    Sub-title
    <div class="sub-title">A sub title</div>
    Page title with back button (Enables navigation from secondary pages)
    <div class="title-new">
  <span class="back">BACK</span>
  <span class="title">New Page</span>
</div>
    Section Divider (Separates the various sections in an app)
    <hr>
    Links (Enables users to move from one page to another. No class needs to be added.)
    <a href="">First Opportunity</a>
    Definition list
    <dl>
  <dt class="list-label">Coffee</dt>
  <dd>Black hot drink</dd>
  <dt class="list-label">Milk</dt>
  <dd>White cold drink</dd>
</dl>
    Input field
    <div class="field">
  <input type="text" id="fullname" placeholder=" ">
  <label for="fullname">Full Name</label>
</div>
    Buttons
    <button class="btn btn-primary">Submit</button>
<button class="btn btn-default">Cancel</button>

    For an example built-in styles usage, see the sample HTML code and output. To override the built-in styles with a custom CSS, in the HTML code, after <link rel="stylesheet" href="https://static.freshdev.io/fdk/2.0/assets/freshworks.css">, add the reference to the custom CSS.