My newly created iFrame app is constantly in DRAFT

App Platform
, , ,
1

Hello, I’m new in creating Freshdesk APPS and I manually created manifest.json, index.html and package.json. I have them ziped and successfully uploaded them to Freshdesk Developer.

However my issue is that the app is constantly in DRAFT and I cannon see it under Admin > Custom Apps or App request or In Developement. It’s all empty.

I have created two apps and they both have the same issue. Could anyone be so kind and look what could possibly go wrong in the code or maybe in any of the files? After 2 days I can’t seem to get it to work…

image

image
image487×878 19.9 KB

image
image1349×346 9.51 KB

NOTE: This is a TEST app that I will modify in the future, I just want to know how to properly get it to work.
As you can see its a Custom App with ID: 298828

I will also post the insides of each file that are in .ZIP file (manifest.zip).

Package.json:
{
“name”: “test-app”,
“version”: “1.0.0”,
“type”: “module”,
“main”: “generate.js”,
“scripts”: {
“start”: “node generate.js”
},
“dependencies”: {
“async”: “^3.2.4”,
“consolidate”: “^0.15.1”,
“handlebars”: “^4.7.7”,
“metalsmith”: “^2.5.0”,
“multimatch”: “^6.0.0”,
“inquirer”: “^9.2.1”
}
}

Manifest.json:
{
“platform-version”: “2.3”,
“engines”: {
“node”: “18.15.0”,
“fdk”: “9.0.0”
},
“product”: {
“freshdesk”: {
“location”: {
“ticket_sidebar”: {
“url”: “index.html”,
“icon”: “https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png”
}
}
}
},
“whitelisted-domains”: [
“https://sl.wikipedia.org”
]
}

Index.html:

bizBox Widget body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; } iframe { width: 90%; height: 90%; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }

Please if somebody could take a look at this and let me know it would be very helpful in order to be one step closer to production. It’s a simple iFrame widget that would ideally open Wikipedia for Agents when inspecting the ticket. In the future instead of Wikipedia it would show our product login page so Agents with Administrator rights could inspect the customers profiles. Thhis is link to our Knowledge base and to our Ticketing domain.

https://zzi1.myfreshworks.com/

Your seincerely,
Benjamin Strmole

2

Hi @Benjaminstrmole

Welcome to the Freshworks Developer Community…:handshake:

How did you create the app on your machine? Did you use Freshworks CLI and FDK to create it?

3

Hey thank for fast reply!

Yes I have used it, however I changed it abit on my personal device because i had more admin rights.

The file I recently created looked alright but the issue was when I ran FDK RUN and got errors regarding procuct.

I created .zip:
app folder (contains bizbox_logo_icon.png and index.html file).
manifest.jston

manifest looks like this:
{
“platform-version”: “3.0”,
“engines”: {
“node”: “18.18.2”,
“fdk”: “9.3.0”
},
“whitelisted-domains”: [
“https://.freshdesk.com",
"https://.freshworks.com”,
“https://raw.githubusercontent.com”,
“https://sl.wikipedia.org”
],
“modules”: {
“ui”: {
“locations”: {
“ticket_sidebar”: {
“url”: “app/index.html”,
“icon”: “app/bizbox_logo_icon.png”
}
}
}
}
}

The errors I was keep getting were related to “product” I belive:

benjaminstrmole@Benjamins-MacBook-Pro FreshdeskWidget % fdk run
TypeError: Cannot read properties of undefined (reading ‘supported_products’)
at inferProducts (/usr/local/lib/node_modules/fdk/lib/manifest.js:117:51)
at reload (/usr/local/lib/node_modules/fdk/lib/manifest.js:257:30)
at Object. (/usr/local/lib/node_modules/fdk/lib/manifest.js:299:1)
at Module._compile (node:internal/modules/cjs/loader:1364:14)
at Module._extensions…js (node:internal/modules/cjs/loader:1422:10)
at Module.load (node:internal/modules/cjs/loader:1203:32)
at Module._load (node:internal/modules/cjs/loader:1019:12)
at Module.require (node:internal/modules/cjs/loader:1231:19)
at require (node:internal/modules/helpers:177:18)
at Object. (/usr/local/lib/node_modules/fdk/lib/routes/app.js:6:18)
at Module._compile (node:internal/modules/cjs/loader:1364:14)
at Module._extensions…js (node:internal/modules/cjs/loader:1422:10)
at Module.load (node:internal/modules/cjs/loader:1203:32)
at Module._load (node:internal/modules/cjs/loader:1019:12)
at Module.require (node:internal/modules/cjs/loader:1231:19)
at require (node:internal/modules/helpers:177:18)
benjaminstrmole@Benjamins-MacBook-Pro FreshdeskWidget %

Also when i was trying to upload zip with app folder it wouldnt let me so I had to use .json, html. and .png in the same “row”.

I would really appreciate if you could help me with the issue.

4

Hello @Benjaminstrmole

The current FDK version creates a manifest.json file like the one below and does not support whitelisted domains. Could you check it?

{
  "platform-version": "2.3",
  "product": {
    "freshdesk": {
      "location": {
        "ticket_sidebar": {
          "url": "template.html",
          "icon": "logo.svg"
        }
      },
      "requests": {
        "createTicket": {},
        "getTickets": {}
      }
    }
  },
  "engines": {
    "node": "18.17.1",
    "fdk": "9.0.4"
  }
}
5

Thank you!

{
“platform-version”: “3.0”,
“app_id”: “freshdesk_bizbox_widget”,
“engines”: {
“node”: “18.18.2”,
“fdk”: “9.3.0”
},
“modules”: {
“ui”: {
“locations”: {
“ticket_sidebar”: {
“url”: “app/index.html”,
“icon”: “app/bizbox_logo_icon.png”
}
}
}
}
}

Should this be sufficient? Does index.html and .png need to be in app folder or can they all be directly into .zip folder?

Thank you so much!

6

Hi @Benjaminstrmole

Can you share the screenshot of your project structure?

7

Yes absolutely. I got abit confused and i really don’t know what else to try. Here’s screenshots.

This is my .zip file:
image

This is the index.thml:

bizBox Widget body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; } iframe { width: 90%; height: 90%; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }

Manifest.json:
{
“platform-version”: “2.3”,
“product”: {
“freshdesk”: {
“location”: {
“ticket_sidebar”: {
“url”: “template.html”,
“icon”: “bizbox_logo_icon.png”
}
},
“requests”: {
“createTicket”: {},
“getTickets”: {}
}
}
},
“engines”: {
“node”: “18.17.1”,
“fdk”: “9.0.4”
}
}

8

Hey @Benjaminstrmole

Could you try to create the app by following this guide? Please create the app in a new folder on your machine. If you installed FDK and CLI please skip the first two steps.

Once you create the app, the project directory will look like the image below.

image
image790×326 57.3 KB

9

Okay thank you!

For iparam.json i need to insert API key? Assuming my portal api key i can get in admin?

10

I have created something like this and I cant see it in Custom Apps or In development or App Request section.

This is my zip file:
image

This is my app folder:
image

This is my styles folder:
image

And config:
image

Assuming everything is the way you linked in earlier post. Yet it doesn’t seem to work. :frowning:

11

Hey @Benjaminstrmole

If you want to test your app locally please follow this or if you like to deploy your app as a custom app follow this

12

Could you please inspect the .zip and let me know what could cause the issue? The file was uploaded and publisehd. Heres the link to the .zip.

In been trying for 3 days, without success.