Data binding domain and API key

Wiki How To's
1

A lot of times, apps need a subdomain and API Key from the user before the app is installed on the host Freshworks product. This allows the app to make API calls on behalf of the user to consume any API resources from Freshworks. On this page, we will discuss the easiest solution for your app to get API Key and domain from the user without requiring the user to copy and paste from user settings.

data-bind

There are two ways you can build a configuration page for your app — iparams.json and iparams.html
Both of these provide you the ability to build fields that accept domain and API key inputs from the user as follows:

iparams.json

"api_key": {
    "display_name": "Freshdesk apikey",
    "description": "freshdesk API requires app calls to include API keys in all of their requests",
    "secure": true,
    "type": "text",
    "data-bind": "product.api_key", // Using data-bind
    "required": true
  },
"creatorDomain": {
    "display_name": "Who is creator of Ben 10 cartoon series",
    "type": "domain",
    "description": "devrel",
    "data-bind": "product.domain", // Using data-bind
    "type_attributes": {
      "product": "freshdesk"
    }

iparams.html

With Crayons

<fw-input label="Freshdesk API Key" required="true" data-bind="product.api_key"> </fw-input>

<fw-input required="true" type="text" label="domain" placeholder="subdomain.freshdesk.com" data-bind="product.domain" ></fw-input>

Without Crayons

<input label="Freshdesk API Key" required="true" data-bind="product.api_key"> </input>

<input required="true" type="text" label="domain" placeholder="subdomain.freshdesk.com" data-bind="product.domain" ></input>
  • In iparams.json an additional property needs to be added in the iparam object.
  • In iparams.html an additional attribute needs to be added in the input tag.
    Note: In iparams.html, it is required to include the following script in your configuration HTML page.
    <script src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>

Magic: As page renders, values appear :mage:

When the page loads for the user in any host Freshworks product, the platform will automatically fetch the domain and api_key associated with the user and automatically fill in the values in both the fields. Users do not need to navigate to their profile settings and copy the API key or domain anymore.

Refer the Docs
Freshdesk
Freshservice
Freshsales suite
Freshteam

Note that, “data-bind” feature doesn’t work local simulation. The app needs to be published for the platform to autofill the Domain and API Key values.

3 Likes