Adding API link to Deal - Notes tool bar


#1

How do I add an API / link button to our Hubspot Deals Toolbar, that will go automatically to our quote tool and open a new quote with the Deal information in the quote form?


#2

Hi @Dave_Elliott,

Just to make sure that we’re on the same page, are you looking to add a button to the HubSpot UI? Other than the CRM extensions API, it’s not possible to customize elements of the HubSpot UI. I’ve included the docs for the CRM extensions API below:


#3

Wow… that is super disappointing. The button to link our quote system to
HubSpot exists on our quote UI, so it seems like a fundamental extension
for HubSpot to reciprocate… forgive me if I am a little incredulous.

We already have the url in our Deals that opens our quote in our quote
system, so how can I have the url to our quote system automatically loaded
for each new deal? Or, is there a way for me to develop the API to make
this happen?

The button does not need to reside on that tool bar, but somewhere in the
Create a Deal tab would work, I just want to be able to have my users move
seamlessly from HubSpot to our quote system, and to have the Customer and
Contact information be loaded into our New Quote form upon use.

I am not a developer, so if you can reply in layman’s terms, I will direct
our developer to install the solution.

Thanks for your help,
Dave


#4

Hi @Dave_Elliott,

I’m sorry if I wasn’t entirely clear in my answer. I was only trying to express that it’s not possible to make changes to the core HubSpot UI. I believe the CRM Extensions API will be able to do exactly what you’re looking for. It might also offer additional functionality that would allow you to pull in relevant quote details into the HubSpot CRM. I’d recommend passing the docs along to your dev team so they can take a look at what’s possible.


#5

Thanks, Derek.

I will forward the explanation to my developer and see what he can do.


#6

Thanks, Derek. I have passed it to our dev team. If they have any
questions can they contact you directly?


#7

Hi @Dave_Elliott,

You can direct message me through the forums, but I monitor the general forums more closely/frequently than my direct message inbox. I’d recommend posting new questions here on the forum, and tagging me/direct messaging any private/sensitive details (if necessary).


#8

Thanks, Derek. Looks like we are able to move forward with the info
provided. Thanks!


#9

Hi @Derek_Gervais,

From the developer console, I can’t find where to add a custom action.
Could you please show me where to look at?
Thanks!


#10

Hi @thanhlai,

It’s not possible to set actions via the developer UI. The actions are dynamically included in the responses to data fetch requests. Check out the Action Types section of the overview for some more info:


#11

Hi @Derek_Gervais,

I looked at the Action Types earlier. However, what I currently need is on how to initialize a section (DemeTicket example or even better - just a button residing within HubSpot Deal).
I guess that I have to send a request to HubSpot to Create object type and not from the Dev console.
Then, my next question would be how to integrate the customization to our company instance.

Thanks.


#12

@Derek_Gervais,

Could you please give me some pointers on how to create the custom action?
I have read through the entire CRM Extension API but no luck.

What we are trying to achieve is to create a button (link) which resides in the Custom Extension section (since we can’t intervene with the HubSpot native UI) to open up an iFrame window (contains our button to create a quote in our system with the deal info from the current HubSpot Deal)

Looking forward to your response.
Thanks!


#13

Hi @thanhlai,

It sounds like you’d need to do the following:

  1. Create an object type in your app’s settings
    • Establish your data fetch URL, object properties, and other relevant information
  2. Configure your server to respond to requests made to the data fetch URL with an appropriate response
    • Below is an example of a typical data fetch URL response. If all you want to include in this extension is a button that triggers a custom action, you can pass an empty array in the results field and just include the primaryAction field

Using the steps above in tandem with the CRM extensions API docs should be enough to get you started. While I can’t offer help with implementation (e.g. server configuration, checking code, etc.) I’m more than happy to help answer specific HubSpot-related questions you run into during this process.

Below is the example data fetch response:

{
  "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"
    }
  }

#14

How do I add the extension to the live company account (2nd entry)?

The dev account has CRM Extension API and its AppID (which I can set it from the response back from our server app) but not the live company account.

Thanks!


#15

Hi @thanhlai,

If your app is running and prepared to respond to data fetch requests, you'll need to install it in the relevant (see below). Once the app is installed, a request will be sent to the data fetch URI whenever a user visits a contact, company, or deal in the CRM. Your server must then respond to that request with the relevant sales object data, like we discussed previously. This is what renders the extension on a contact, company, or deal record.