CRM Extension don't load

Hi,
I made a post on CRM Extensions, but I can’t find it anymore…
It got not answers, so retrying here, apologies if i make a duplicate!
So here’s the situation:
I have created an app, authenticated it,I’m using Mocky to create a sample API endpoint
www.mocky.io/v2/5eaffffa3300006100c68abd
Is the Mocky endpoint missing a header that I couldn’t find in the documentation?
This url was set both as the Data fetch URL and as the allowlist action URL.
All properties have also been set as Card Properties…
But I get an error on the Card, still… Could someone help me out?
Thanks!
Kr,
Kim
https://community.hubspot.com/t5/APIs-Integrations/Troubles-understanding-CRM-Extensions/m-p/331277

Hey @kimnguyen,

Sincere aplogise that we missed out your initial response.

In order for me to troubleshoot further on this, could you share with me the followings:

1. The dev portal ID that has the app

2. The app ID

3. Example of a contact record that you’re seeing the error on the card

Hi Wendy,
Thank you so much for your feedback!
The portal/contact is the below:

App ID is 216875
At this point I’m trying to first reproduce the example in HubSpot’s API documentation,
just to understand where each element fit.
and I will afterwards amend the “code” to reflect what I actually need:
Create a button that leads to an external URL.
Looking forward to your response! :slightly_smiling_face:

Hey @kimnguyen,

Could you try changing the applicationID to point to your own App ID - 216875 instead of 767676?

Hi @WendyGoh.
I made the change; could you have a look?
Kr,
Kim

Hey @kimnguyen,

Thank you for making the change. I believe I’ll be able to shed some light here. The following JSON is an example of a record type:

{
 "applicationId": 767676,
 "baseUris": [
 "https://example.com/actions"
 ],
 "dataFetchUri": "https://example.com/demo-tickets",
 "title": "DemoTickets",
 "propertyDefinitions": [
 {
 "name": "ticket_type",
 "label": "Ticket type",
 "dataType": "STRING"
 },
 {
 "options": [
 {
 "type": "SUCCESS",
 "label": "In Progress",
 "name": "inprogress"
 },
 {
 "type": "DEFAULT",
 "label": "Resolved",
 "name": "resolved"
 }
 ],
 "name": "status",
 "label": "Status",
 "dataType": "STATUS"
 },
 {
 "name": "priority",
 "label": "Priority",
 "dataType": "STRING"
 },
 {
 "name": "project",
 "label": "Project",
 "dataType": "STRING"
 }
 ],
 "associatedHubSpotObjectTypes": [
 "COMPANY"
 ],
 "associatedHubSpotObjectTypeProperties": {
 "COMPANY": [
 "domain"
 ]
 }
}

This isn’t the same as the response body that you should provide to the request URL. The example response that you should be looking at, is the following:

{
 "results": [
 {
 "objectId": 245,
 "title": "API-22: APIs working too fast",
 "link": "http://example.com/1",
 "created": "2016-09-15",
 "priority": "HIGH",
 "project": "API",
 "reported_by": "msmith@hubspot.com",
 "description": "Customer reported that the APIs are just running too fast. This is causing a problem in that they're so happy.",
 "reporter_type": "Account Manager",
 "status": "In Progress",
 "ticket_type": "Bug",
 "updated": "2016-09-28",
 "actions": [
 {
 "type": "IFRAME",
 "width": 890,
 "height": 748,
 "uri": "https://example.com/edit-iframe-contents",
 "label": "Edit",
 "associatedObjectProperties": []
 },
 {
 "type": "IFRAME",
 "width": 890,
 "height": 748,
 "uri": "https://example.com/reassign-iframe-contents",
 "label": "Reassign",
 "associatedObjectProperties": []
 },
 {
 "type": "ACTION_HOOK",
 "httpMethod": "PUT",
 "associatedObjectProperties": [],
 "uri": "https://example.com/tickets/245/resolve",
 "label": "Resolve"
 },
 {
 "type": "CONFIRMATION_ACTION_HOOK",
 "confirmationMessage": "Are you sure you want to delete this ticket?",
 "confirmButtonText": "Yes",
 "cancelButtonText": "No",
 "httpMethod": "DELETE",
 "associatedObjectProperties": [
 "protected_account"
 ],
 "uri": "https://example.com/tickets/245",
 "label": "Delete"
 }
 ],
 },
 {
 "objectId": 988,
 "title": "API-54: Question about bulk APIs",
 "link": "http://example.com/2",
 "created": "2016-08-04",
 "priority": "HIGH",
 "project": "API",
 "reported_by": "ksmith@hubspot.com",
 "description": "Customer is not able to find documentation about our bulk Contacts APIs.",
 "reporter_type": "Support Rep",
 "status": "Resolved",
 "ticket_type": "Bug",
 "updated": "2016-09-23",
 "properties": [
 {
 "label": "Resolved by",
 "dataType": "EMAIL",
 "value": "ijones@hubspot.com"
 },
 {
 "label": "Resolution type",
 "dataType": "STRING",
 "value": "Referred to documentation"
 },
 {
 "label": "Resolution impact",
 "dataType": "CURRENCY",
 "value": "94.34",
 "currencyCode": "GBP"
 }
 ],
 "actions": [
 {
 "type": "IFRAME",
 "width": 890,
 "height": 748,
 "uri": "https://example.com/edit-iframe-contents",
 "label": "Edit"
 },
 {
 "type": "CONFIRMATION_ACTION_HOOK",
 "confirmationMessage": "Are you sure you want to delete this ticket?",
 "confirmButtonText": "Yes",
 "cancelButtonText": "No",
 "httpMethod": "DELETE",
 "associatedObjectProperties": [
 "protected_account"
 ],
 "uri": "https://example.com/tickets/245",
 "label": "Delete"
 }
 ]
 }
 ],
 "settingsAction": {
 "type": "IFRAME",
 "width": 890,
 "height": 748,
 "uri": "https://example.com/settings-iframe-contents",
 "label": "Settings"
 },
 "primaryAction": {
 "type": "IFRAME",
 "width": 890,
 "height": 748,
 "uri": "https://example.com/create-iframe-contents",
 "label": "Create Ticket"
 }
 }

Hope this helps!

hi @WendyGoh,
Thanks so much for your detailed answer.
Unfortunately, I just spent one more hour to get this going, but still can’t find where the issue is…
The record type I set manually in the app itself, and I made sure each property from the response is created. (had to edit it a bit, there was an extra “}” in your code)
Made sure the app had the right scope (tickets and contacts)
Still, it doesn’t display… any clue what could still be wrong?
Again, thanks for your support. Hope we’ll get this sorted!

Hey @kimnguyen,

Could we try returning the following response body:

{
"results" : [
{
"objectId" : 245,
"title" : "API-22: APIs working too fast",
"description" : "Customer reported that the APIs are just running too fast. This is causing a problem in that they're so happy."
}
],
"settingsAction" : {
"type" : "IFRAME",
"width" : 890,
"height" : 748,
"uri" : "https://example.com/settings-iframe-contents",
"label" : "Settings"
},
"primaryAction" : {
"type" : "IFRAME",
"width" : 890,
"height" : 748,
"uri" : "https://example.com/create-iframe-contents",
"label" : "Create Ticket"
}
}

This should work as I have tested it out on my end as well. Let me know how it goes!

Hey @WendyGoh ,
Sorry to report it’s still not ok:
Here’s the new endpoint I made www.mocky.io/v2/5ebae5303600006400f7e427
I adapted it in the app, added the Action URLs in the app, as well as the fields that are in the results, and still don’t get it working :confused:
Do you have rights to look at my settings?
Thanks!

Hey @kimnguyen,

Digging further into this, it seems that the issue is with the data fetch URL, do you have another data fetch URL that is not under mocky.io and try that out?

@WendyGoh I tried another provider, but also get an error:

elixirsol.free.beeceptor.com/test
We can configure the headers and status responses on those websites, so not sure what we’re missing? do you have any clue why our URLs aren’t accepted?
Thanks!
Kr,
Kim

Hey @kimnguyen,

I’m checking in with the internal team and I’ll keep you posted here!

Hey @kimnguyen,

Just an update here!

The issue seems to be that mocky.io doesn’t use SSL certs in which HubSpot doesn’t support because it makes the connection less secure. This is why the webhook requests to mocky are failing.

Generally, we’d recommend customers to use webhook.site and thus far it’s been working pretty well for us. Here is a URL created using webhook.site that returns the same body as mocky.io

webhook.site/c12cd31a-4315-4132-8abd-6bfcd2dd4b80

Do try using the link instead of the mocky link and see if it works for you? Your team should feel free to create your own link :slightly_smiling_face:

Hi @WendyGoh.
As simple as that… thanks, that worked!
Kr,
Kim