Tarjetas CRM

Dentro de una aplicación pública, puedes crear tarjetas CRM personalizadas para mostrar información de otros sistemas en los registros de contactos, empresas, negocios y tickets de HubSpot. Cada aplicación puede incluir hasta 25 tarjetas CRM.

Nota: las tarjetas CRM a las que se hace referencia en este artículo son diferentes de las tarjetas personalizadas que puedes crear como extensiones de interfaz de usuario con proyectos. Las tarjetas CRM incluidas en este artículo están destinadas a su uso con aplicaciones públicas, no con aplicaciones privadas creadas con proyectos.

Ejemplo de caso de uso: estás creando una integración para el mercado de aplicaciones para tu software de seguimiento de errores. Deseas poder detectar errores rastreados en los registros de contacto para que los representantes de soporte puedan hacer referencia a ellos cuando trabajen con los clientes. Tu aplicación puede definir una tarjeta personalizada que muestra esta información directamente en el registro de contacto de HubSpot.
CRM_Card_1Las tarjetas se pueden definir como parte de la configuración de la característica de tu aplicación. Una vez que la aplicación esté instalada y un usuario vea los registros de CRM objetivo, HubSpot hace una solicitud saliente a la aplicación, recupera los datos relevantes y los muestra en una tarjeta en la página del registro. Las aplicaciones también pueden especificar acciones personalizadas que el usuario puede tomar en función de esta información. Por ejemplo, tu aplicación podría incluir una acción para abrir un modal para mostrar la propia interfaz de usuario de la aplicación en HubSpot.

CRM_card_diagram

Requisitos de alcance

Para crear tarjetas CRM personalizadas, tu aplicación debe solicitar los alcances de OAuth necesarios para modificar los registros de CRM donde aparecerá tu tarjeta. Por ejemplo, para que una tarjeta CRM aparezca en los registros de contactos, la aplicación debe tener los alcances crm.objects.contacts.read y crm.objects.contacts.write. Si más tarde necesitas eliminar los alcances de objetos de CRM de tu aplicación, primero deberás eliminar todas las tarjetas existentes para esos tipos de objetos.

Consulta la documentación de OAuth para obtener más detalles sobre los alcances y la configuración de la URL de autorización para tu aplicación.

Crear una tarjeta CRM

Puedes crear tarjetas CRM para tu aplicación a través de la API o editando tu aplicación en tu cuenta de desarrollador. Para obtener más información sobre la configuración de una tarjeta a través de la API, consulta la pestaña Puntos de terminación en la parte superior del artículo.

Para crear una tarjeta CRM utilizando la interfaz de usuario de HubSpot:

    • En tu cuenta de desarrollador de HubSpot, navega a Aplicaciones en la barra de navegación principal.
    • Selecciona la aplicación en la que quieres agregar una tarjeta.
    • En el menú de la barra lateral izquierda, selecciona Tarjetas CRM.
    • En la parte superior derecha, haz clic en Crear tarjeta CRM.
      private-app-create-crm-card

A continuación, obtén más información sobre las opciones de configuración en cada pestaña.

Solicitud de datos

Cuando un usuario de HubSpot ve un registro de CRM en el que está activada la tarjeta de CRM, HubSpot realizará una solicitud de recuperación de datos a la integración. Esta solicitud se realiza a la URL de destino especificada, que incluye un conjunto de parámetros de consulta predeterminados, junto con parámetros adicionales que contienen datos de propiedades como se especifica en la configuración de la tarjeta. 

private-app-create-crm-card-data-request-tab

  • En el campo URL de obtención de datos, introduce la URL de la que obtendrás los datos. En la API, esta URL se agrega al campo targetUrl

  • En la sección Tipos de registros de destino, haz clic para activar los interruptores para seleccionar en qué registros de CRM aparecerá la tarjeta. A continuación, utiliza las propiedades enviadas desde los menús desplegables de HubSpot para seleccionar las propiedades de HubSpot que se incluirán como parámetros de consulta en la URL de la solicitud. En la API, cada tipo de registro y sus propiedades correspondientes se agregan como objetos en la matriz objectTypes.
// Example data fetch configuration { "title": "New CRM Card", "fetch": { "targetUrl": "https://www.example.com/demo-fetch", "objectTypes": [ { "name": "contacts", "propertiesToSend": [ "firstname", "email", "lastname" ] } ] } ... }

Solicitud de ejemplo

La configuración anterior daría como resultado que HubSpot enviara tu solicitud GET de la siguiente manera.

https://www.example.com/demo-fetch?userId=12345&userEmail=loggedinuser@hubspot.com&associatedObjectId=53701&associatedObjectType=CONTACT&portalId=987654&firstname=Tim&email=timrobinson@itysl.com&lastname=Robinson
Use this table to describe parameters / fields
ParameterTypeDescription
userId
Default

El ID del usuario de HubSpot que cargó el registro de CRM.

userEmail
Default

La dirección de correo electrónico del usuario que cargó el registro de CRM.

associatedObjectId
Default

El ID del registro de CRM que se cargó.

associatedObjectType
Default

El tipo de registro de CRM que se cargó (por ejemplo, contacto, empresa, negocio).

portalId
Default

El ID de la cuenta de HubSpot donde se cargó el registro de CRM.

firstname
Custom

El nombre del contacto, como se especifica en el menú desplegable Propiedades enviadas desde HubSpot (en la aplicación) y la matriz propertiesToSend (API).

correo electrónico
Custom

La dirección de correo electrónico del contacto, como se especifica en el menú desplegable Propiedades enviadas desde HubSpot (en la aplicación) y la matriz propertiesToSend (API).

lastname
Custom

Los apellidos del contacto, como se especifica en el menú desplegable Propiedades enviadas desde HubSpot (en la aplicación) y la matriz propertiesToSend (API).

Nota: las solicitudes se agotarán después de cinco segundos. Dentro de ese lapso, se debe hacer una conexión en tres segundos. 

Respuesta de ejemplo

A continuación se muestra un ejemplo de respuesta que el integrador podría proporcionar a la solicitud anterior.

results  array

An array of up to five valid card properties. If more card properties are available for a specific CRM object, your app can link to them.

objectId  number (required)

A unique ID for this object.

title  string (required)

The title of this object.

link  string

The URL that the user can follow to get more details about the object. This property is optional, but if no objects have a link, you should provide a value of null.

created  string (required)

A custom property as defined in the card's settings that denotes the date of the object's creation.

priority  string (required)

A custom property as defined in the card's settings that denotes external ticket's priority level.

actions  array

A list of available actions a user can take.

properties  string

A list of custom properties that aren't defined in the card settings. You can use this list to display a specific object's unique properties. These properties will be shown in the order they're provided, but after the properties defined in the card settings.

settingsAction  object

An iframe action that enables users to update the app's settings. 

primaryAction  object 

The primary action for a record type, typically a creation action.

secondaryActions  array

A list of actions displayed on the card.

// Example response { "results": [ { "objectId": 245, "title": "API-22: APIs working too fast", "link": "http://example.com/1", "created": "2016-09-15", "priority": "HIGH", "project": "API", "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" } }

Solicitar firmas

Para garantizar que las solicitudes provienen realmente de HubSpot, se incluye el siguiente título de solicitud. Este título contendrá un hash del secreto de la aplicación para tu aplicación y los detalles de la solicitud. 

X-HubSpot-Signature: <some base64 string>

Para verificar esta firma, realiza los siguientes pasos:

  1. Crea una cadena que concatene lo siguiente: <app secret> + <HTTP method> + <URL> + <request body> (if present).
  2. Crea un hash SHA-256 de la cadena resultante.
  3. Compara el valor del hash a la firma. Si son iguales, la solicitud ha pasado la validación. Si los valores no coinciden, la solicitud puede haber sido manipulada en tránsito o alguien puede estar falsificando solicitudes en tu punto de terminación.

Propiedades de la tarjeta

En la pestaña Propiedades de la tarjeta, define las propiedades personalizadas que deseas que HubSpot muestre en la tarjeta CRM. Una vez definida, la integración puede rellenar estas propiedades incluyéndolas en su respuesta.

    • Haz clic en Agregar propiedad para agregar una nueva propiedad para que la tarjeta se muestre. La carga que proporciones en respuesta a la llamada de recuperación de datos debe contener valores para todas estas propiedades.
    • En el panel derecho, establece el nombre único, la etiqueta de presentación y el tipo de datos de la propiedad. Puedes seleccionar entre los siguientes tipos: MonedaFechaFecha y horaCorreo electrónicoEnlaceNuméricoEstadoCadenaMás información sobre el uso de los tipos de propiedades de extensión.
    • Haz clic en Agregar para guardar la propiedad.
      private-app-create-crm-card-card-properties-tab

Cuando HubSpot envía su solicitud de datos, la integración puede proporcionar valores para estas propiedades en su respuesta junto con otros valores en cada objeto en los resultados. Además de las propiedades configuradas en esta pestaña, la integración también puede incluir sus propias propiedades personalizadas sin necesidad de definirlas en la configuración de la tarjeta.

Por ejemplo, en la respuesta a continuación, creado y prioridad se definen en la pestaña Propiedades de la tarjeta, mientras que la matriz de propiedades envía sus propias definiciones y valores de propiedad. Estas propiedades específicas del objeto deben definirse por objeto.

// Example object within a response { "objectId": 988, "title": "API-54: Question about bulk APIs", "link": "http://example.com/2", "created": "2016-08-04", "priority": "HIGH", "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": [ ... ] }

Al enviar propiedades personalizadas, el campo dataType para cada propiedad se puede establecer en uno de: CURRENCY, DATE, DATETIME, EMAIL, LINK, NUMERIC, STATUS, STRING. Dependiendo del tipo de propiedad, es posible que la integración deba proporcionar campos adicionales. A continuación, más información sobre cada tipo de propiedad.

Propiedades de moneda

Las propiedades de la CURRENCY deben incluir un currencyCode, que debe ser un código ISO 4217 válido. Esto asegurará que el usuario vea el símbolo de moneda y el formato de número correctos.

// Example custom currency property { "results": [ { "properties": [ { "label": "Resolution impact", "dataType": "CURRENCY", "value": "94.34", "currencyCode": "GBP" } ] } ] }

Propiedades de fecha

Las propiedades de DATE deben estar en el formato aaaa-mm-dd. Estas propiedades se mostrarán en un formato adecuado a la configuración regional del usuario. Si necesitas incluir una marca de tiempo, deberías usar una propiedad DATETIME.

// Example custom date property { "results": [ { "properties": [ { "label": "Date", "dataType": "DATE", "value": "2023-10-13" } ] } ] }

Datetime properties

DATETIME properties indicate a specific time and must be provided as milliseconds since epoch. These properties will be displayed in a format appropriate to the user's locale.

// Example custom datetime property { "results": [ { "properties": [ { "label": "Timestamp", "dataType": "DATETIME", "value": "1697233678777" } ] } ] }

Email properties

EMAIL properties are for values that contain an email address. These properties will be displayed as mailto links.

// Example custom email property { "results": [ { "properties": [ { "label": "Email address", "dataType": "EMAIL", "value": "hobbes.baron@gmail.com" } ] } ] }

LINK properties display hyperlinks and open in a new window. You can specify a linkLabel, otherwise the URL itself will be displayed. 

// Example custom link property { "results": [ { "properties": [ { "label": "Link property", "dataType": "LINK", "value": "https://www.hubspot.com", "linkLabel": "Test link" } ] } ] }

Numeric properties

NUMERIC properties display numbers. 

// Example custom datetime property { "results": [ { "properties": [ { "label": "Number", "dataType": "NUMERIC", "value": "123.45" } ] } ] }

Status properties

STATUS properties display as colored indicators. To define a status property, the integration must provide an optionType that describes the possible statuses. Statuses include:

  • DEFAULT: Grey
  • SUCCESS: Green
  • WARNING: Yellow
  • DANGER: Red
  • INFO: Blue
// Example custom datetime property { "results": [ { "properties": [ { "label": "Status", "dataType": "STATUS", "value": "Errors occurring", "optionType": "DANGER" } ] } ] }

String properties

STRING properties display text.

// Example custom datetime property { "results": [ { "properties": [ { "label": "First name", "dataType": "STRING", "value": "Tim Robinson" } ] } ] }

Custom actions

En la pestaña Acciones personalizadas, puedes definir las URL base que se solicitarán cuando un usuario haga clic en un botón de acción. Puedes incluir varias URL de acción para varias acciones en tu tarjeta CRM. Las acciones de la tarjeta deben llamar a un punto de terminación especificado en esta pestaña.
private-app-create-crm-card-custom-actions-tabLas solicitudes incluirán un título X-HubSpot-Signature. Consulta las firmas de solicitud para obtener más información.

Se accede a las URL de las acciones en el campo uri de una acción. De manera similar a la solicitud de búsqueda de datos, los ganchos de acción incluirán un conjunto predeterminado de parámetros de consulta. Puedes incluir otros parámetros de consulta incluyendo un campo associatedObjectProperties en la acción.

La respuesta variará según el tipo de acción. A continuación, obtén más información sobre los tipos de acción.

Action types

Iframe actions

IFRAME actions will open a modal containing an iframe pointing at the provided URL. 

// Example iframe action { "type": "IFRAME", "width": 890, "height": 748, "uri": "https://example.com/iframe-contents", "label": "Edit", "associatedObjectProperties": [ "some_crm_property" ] }

When the user is done completing an action inside the iframe, the modal should close and return the user to the CRM record they started from. To close the modal, the integration can use window.postMessage to signal to the CRM that the user is done. The following messages are accepted:

  • {"action": "DONE"}: the user has successfully competed the action.
  • {"action": "CANCEL"}: the user has canceled the action.
// Example iframe close message window.parent.postMessage(JSON.stringify({"action": "DONE"}), "*");

Action hook actions

ACTION_HOOK actions send a server-side request to the integrator. The only UI a users sees for this action is a success or error message. This type of action is useful for simple operations that require no further input from the user.

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

The httpMethod can be set to  GET, POST, PUT, DELETE, or PATCH If using GET or DELETE, the associatedObjectProperties values will be appended to the request URL as query parameters. Otherwise, the properties will be sent in the request body.

// Example iframe close message window.parent.postMessage(JSON.stringify({"action": "DONE"}), "*");

Confirmation actions

Las acciones de CONFIRMATION_ACTION_HOOK se comportan igual que las acciones ACTION_HOOK, excepto que se muestra un cuadro de diálogo de confirmación al usuario antes de ejecutar la solicitud del servidor.

// Example action hook action { "type": "CONFIRMATION_ACTION_HOOK", "httpMethod": "POST", "uri": "https://example.com/action-hook", "label": "Example action", "associatedObjectProperties": [ "some_crm_property" ], "confirmationMessage": "Are you sure you want to run example action?", "confirmButtonText": "Yes", "cancelButtonText": "No" }

El httpMethod se puede configurar para  GET, POST, PUT, DELETE o PATCH Si se utiliza GET o DELETE, los valores associatedObjectProperties se adjuntarán a la URL de la solicitud como parámetros de consulta. De lo contrario, las propiedades se enviarán en el cuerpo de la solicitud.


¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.