Simple (I think) requirement for CRM Extensions API

mike_mackechnie · ‎Nov 30, 2018

Hi there. I'm new to this forum so bear with my ignorance of the Hubspot API.....

I have what I think is a simple requirement; I would like to present an extra option to the user whenever he/she clicks the Actions drop-down for any contact.

The option will be called "Add A Quote", and the action of the click will be to open a pop-window which will show the Add Quote option from another CRM system. No POSTed variables, nothing fancy, just a URL that opens in a pop-up window.

What's the most effective way to do this? I have read the documentation about the CRM Extensions API, so I think that's the way forward, but that's as far as I've got at the moment.

I'm fairly experienced in API coding to push and pull data between systems but this is a new area for me.

Any suggestions gratefully received.

mike_mackechnie · ‎Dec 5, 2018

Thanks for this Connor.

Forgive my ignorance, but where do you code this action? I think I can figure out the JSON I need to code, but I don't see how I code the POST request.

I have a developer account, and I have created a public app called Hubspot XTRF API(https://app.hubspot.com/developer/4638459/application/176110), but I don't see anywhere to actually write the code and I don't know how to integrate that into the live application once it has been tested.

Sorry but I think I'm going to need some hand-holding with this.

cbarley · ‎Dec 6, 2018

Hey @mike.mackechnie, you'd code this wherever you application (i.e. the actual code that makes your app run is deployed). No code is actually written from within the developer account. For example, I pushed my code here up to heroku, so that's where my code lives. An example way to POST data would be to have this structure returned and ready to use when you load up a contact company or deal:

{
  "type": "ACTION_HOOK",
  "httpMethod": "POST",
  "uri": "https://example.com/action-hook",
  "label": "Example action",
  "associatedObjectProperties": [
    "some_crm_property"
  ]
}

You'd handle your POST and GET routes from within your application, wherever it may be hosted, and format the JSON in the above way so that any time your specified objects from your dev account are loaded, the request URL defined in the settings is requested, and those actions defined within your application are then available to use. Here are a few examples of how my dev account settings looks:

Screenshot

Captured with Lightshot

mike_mackechnie · ‎Feb 13, 2019

I got dragged off to another project, but on returning to this I managed to get the I-Frame working fine - only snag is I appear to be forbidden to load my XTRF window into the frame.

On Chrome I get
Refused to display 'https://testxtrf.k-international.com/home-api/macros/203/run#https://app.hubspot.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'

and on Firefox:

Load denied by X-Frame-Options: https://testxtrf.k-international.com/home-api/macros/203/run#https://app.hubspot.com does not permit cross-origin framing.

I followed your advice in https://community.hubspot.com/t5/APIs-Integrations/CRM-Extension-API-unable-to-open-Iframe-in-Firefo... and coded

res.set('X-Frame-Options', "allow-from https://testxtrf.k-international.com");

but no joy.

Any ideas?

cbarley · ‎Feb 13, 2019

Hi @mike_mackechnie , do you have an example record with the CRM extension on it that you can link me to?

mike_mackechnie · ‎Feb 14, 2019

You can choose any contact, but here is an example:

https://app.hubspot.com/contacts/3538805/contact/47478351/?interaction=note

cbarley · ‎Feb 14, 2019

Hi @mike_mackechnie , a couple things here. In your app, you haven't defined any base URIs: https://app.hubspot.com/developer/4638459/application/176110/crm-extension-api/97660. From the docs: baseUris: "A list of URIs. When you define actions, the URIs for these actions must be under one of these URIs."

Second is that I believe the X-Frame-Options should actually be set to

"allow-from https://app.hubspot.com"

Taking a look at your dataFetch URI in your app settings where I linked above, when I visit that URL, it looks like that page is just a webpage where you log in. When I click on the action on that contact record, I'm getting a 405 - Method Not Allowed.

If I'm misunderstanding, you'd want somebody to be able to log in from that screen and create a Quote straight from HubSpot, correct?

If so, you should probably be using an IFRAME type instead of an ACTION HOOK. I'd do something like this:

"actions": [
        {
          "type" : "IFRAME",
          "width" : 899,
          "height" : 748,
          "uri" : "https://testxtrf.k-international.com/xtrf/faces/login.seam?conversationId=201#/newQuote",
          "label" : "Create Quote",
          "associatedObjectProperties" : []
        }]

mike_mackechnie · ‎Feb 15, 2019

Hi @cbarley,

I've defined the base URIs and changed the X-Frame-Options as you have advised.

I'm still getting the "Load denied by X-Frame-options..." error message.

cbarley · ‎Feb 15, 2019

Hi @mike_mackechnie , I didn't realize that you were using repl.it. Your screenshot is actually of the wrong App. That screenshot is of HubSpot XTRF API, but the one installed in your production account is XTRF Portal. You should be working with the settings here: https://app.hubspot.com/developer/4638459/application/184623/crm-extension-api/97664.

This all said, the base URI that your app is requesting isn't present in your settings, and that URI (https://workflow.k-international.com/xtrf/faces/projectAssistant/quotes/create.seam#/newQuote) is the action you have attached to your extension. However, even when I add in your base URI to your app in the settings, the iFrame still isn't loading because of the headers set on workflow.k-international.com:

The headers on that site would have to be changed in order for this to work, since the headers are currently set to only load if the origin is from the same domain. More on those errors above here: https://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options#answer-7...

mike_mackechnie · ‎Feb 15, 2019

Sorry about that @cbarley . I guess that's what happens when you leave a project for a few weeks.

I see what you're saying about the X-Frame options, and I'll give that a go next week.

cbarley · ‎Feb 15, 2019

No prob @mike_mackechnie !

mike_mackechnie · ‎Feb 18, 2019

I switched over to uising the test XTRF system, and coded

Header always set X-Frame-Options SAMEORIGIN

Header always append X-Frame-Options "ALLOW-FROM https://app.hubspot.com/"

in the httpd.conf of my test XTRF system, and added https://testxtrf.k-international.com/xtrf/faces/projectAssistant/quotes/create.seam#/newQuote to the base URI list on Hubspot.

No change however:

cbarley · ‎Feb 19, 2019

Hi @mike_mackechnie , sorry if I wasn't clear in my last response. That console error is being thrown by the domain that sets those headers (https://testxtrf.k-international.com/), not your app. If you were to implement this iFrame popup for your CRM extension, you'd have to edit the headers to allow cross origin framing on testxtrf.k-international.com.

mike_mackechnie · ‎Mar 26, 2019

Progress update: We are still getting the cross origin framing errors on the Hubspot app.

Experimenting with the testxtrf domain headers, but so far no success.

cbarley · ‎Dec 4, 2018

Hi @mike.mackechnie, These functionalities should exist. Action hook actions are what you'll want to send your POST requests: https://developers.hubspot.com/docs/methods/crm-extensions/crm-extensions-overview#action-hook-actio.... For the popup screen via iFrame, you can set that with an action type: https://developers.hubspot.com/docs/methods/crm-extensions/crm-extensions-overview#action-types. Here's a very simple (static) example: https://obscure-cliffs-47038.herokuapp.com/ - and what it looks like in HubSpot:

mike_mackechnie · ‎Dec 4, 2018

We want to "surface" a link to our Customer Portal application using the CRM Extensions API.
Ideally this link should be in the Actions drop down list below the contact name, although it would also be acceptable to locate it on the sidebar, as long as it is the next card after the contact name.

The card or action should simply be a link with the text, ”Add a Quote”, and clicking on that link will trigger a process.

The process will be:

Check if the customer (Company) exists on our Customer Portal. If not, add the company by calling an API (I would expect to see a screen throbber whilst the add company is processing):

POST /customers/ HTTP/1.1
Accept: application/vnd.xtrf-v1+json{
"name": "Jan",
"fullName": "Kowalski",
"contact": {
"emails": {
"primary": "email@email.org"
}
},
"billingAddress": {
"addressLine1": "Cracow address 1",
"city": "Cracow",
"countryId": 100
}
}

Check if the contact (person) exists on our Customer Portal. If not, add the contact by calling an API (I would expect to see a screen throbber whilst the add contact is processing):
POST /customers/persons/ HTTP/1.1
Accept: application/vnd.xtrf-v1+json{
"name": "Nowy",
"customerId": 111,
"contact": {
"emails": {
"primary": "nowy@person.org"
}
}
}
Then, with the customer and contact defined, open a pop-up window into the Customer Portal and display the Add Quote screen:

Our Sales staff can then follow their internal procedures to add the quote to our Customer Portal.

Once the quote has been completed, the pop-up window can be closed and focus will return to the Hubspot contact screen. A background process will be triggered on completion of the quote which will add a corresponding deal to Hubspot.

mike_mackechnie · ‎Dec 3, 2018

One thing that would be useful is a sample of the code that is shown in https://developers.hubspot.com/docs/methods/crm-extensions/crm-extensions-overview

APIs & Integrations