Kit de développement logiciel pour les extensions d'appel

Le kit de développement logiciel pour les extensions d'appel permet aux applications de proposer une option d'appel personnalisée pour les utilisateurs HubSpot directement à partir d'une fiche d'informations dans le CRM. 

Une extension d'appel comprend trois éléments principaux :

  1. le kit de développement logiciel pour les extensions d'appel, un kit de développement logiciel pour JavaScript qui permet la communication entre votre application et HubSpot ;
  2. les points de terminaison des paramètres d'appel, qui sont utilisés pour définir les paramètres d'appel pour votre application. Chaque compte HubSpot qui connectera votre application utilisera ces paramètres ;
  3. l'iFrame d'appel, qui est l'endroit où votre application apparaît pour les utilisateurs HubSpot et est configuré à l'aide des points de terminaison des paramètres d'appel.

Pour plus d'informations sur l'expérience d'appel dans l'application, consultez cet article de base de connaissances. Une fois que votre application compatible avec les extensions d'appel est connectée à HubSpot, elle apparaîtra comme option dans le sélecteur d'appel lorsque un utilisateur effectue un appel depuis HubSpot.

Please note: only outgoing calls are currently supported.

Kit de développement logiciel pour les extensions d'appel

Le kit de développement logiciel pour les extensions d'appel est une bibliothèque JavaScript utilisée pour communiquer entre HubSpot et votre application d'appel, qui apparaîtra dans un iFrame. Cette communication comprend les éléments suivants :

  • HubSpot indique à votre application le numéro à appeler.
  • Votre application indique à HubSpot lorsque l'appel est démarré et qu'il est terminé.
  • HubSpot indique à votre application l'ID d'engagement de variable qui doit être mis à jour avec les détails de l'appel.

Vous trouverez le kit de développement logiciel dans ce répertoire GitHub ainsi que les exigences techniques et les détails d'utilisation pour le kit de développement logiciel dans votre application web.

Configuration

Les extensions d'appel sont configurées dans le cadre d'une application HubSpot. Si vous n'avez pas d'application, vous pouvez en créer une depuis votre compte de développeur HubSpot. Si vous n'avez pas encore de compte de développeur HubSpot, vous pouvez vous inscrire ici.

Une fois que vous avez configuré les paramètres d'appel pour votre application, qui est une tâche ponctuelle, ces paramètres s'appliqueront à tous les utilisateurs qui connecteront l'application à leur compte HubSpot. Consultez l'onglet Points de terminaison pour obtenir des détails sur la création de ces paramètres.

Une fois que vos paramètres d'appel sont prêts, les utilisateurs doivent procéder à la connexion à l'application afin de mettre à disposition votre service d'appel sur leur compte HubSpot. 

Processus d'appel

Les appels effectués à l'aide des extensions passent par les étapes suivantes :

  1. L'utilisateur clique sur l'icône Appel sur une fiche d'informations de CRM.
  2. L'utilisateur sélectionne votre application comme fournisseur d'appels et clique sur le bouton Appel depuis le navigateur.
  3. Un iFrame s'ouvre vers l'URL spécifiée dans les paramètres d'appel de votre application.
  4. L'appel est terminé via votre application (affichée dans l'iFrame).
  5. HubSpot crée un engagement de variable et envoie l'ID de cet engagement à votre application par le biais du kit de développement logiciel pour les extensions d'appel.
  6. Votre application met à jour l'engagement de variable avec les détails complets de l'appel.

Une fois qu'un utilisateur a connecté votre application à HubSpot, celle-ci apparaîtra comme option supplémentaire lors d'un appel depuis une fiche d'informations. Lorsque les utilisateurs cliquent sur l'icône Appel, la possibilité de passer l'appel en utilisant votre application plutôt que le système d'appel par défaut de HubSpot apparaîtra. 

Découvrez-en davantage sur la réalisation d'appels depuis HubSpot

calling_provider

Lorsque l'utilisateur choisit de passer l'appel via son navigateur, un iFrame s'ouvre vers l'URL spécifiée dans les paramètres d'appel pour votre application. Cette URL doit indiquer une application web personnalisée qui passera l'appel via votre service d'appel. En utilisant le kit de développement logiciel pour les extensions d'appel, votre application communiquera avec l'application HubSpot. Les messages provenant de l'application HubSpot indiqueront à votre application le numéro à appeler et votre application pourra envoyer des messages pour des événements tels que la fin de l'appel ou la déconnexion d'un utilisateur de votre service.

calling_iframe

Lors de la création de votre application, il est important de tenir compte des points suivants :

  • Vous devez disposer d'une application web qui peut être affichée dans un iFrame, car HubSpot ne traitera aucun contenu de l'iFrame. Ainsi, vous ne pouvez pas définir l'URL de l'iFrame sur un service SIP secondaire.
  • Les paramètres de hauteur et de largeur définis par l'API des paramètres déterminent la taille de l'iFrame. Des fenêtres avec une hauteur de 600 px et une largeur de 400 px sont optimales pour la plupart des fenêtres de navigateur, y compris sur les petits écrans.
  • Vérifiez que les conditions d'erreur apparaissent au sein de l'iFrame. Votre application peut ainsi alerter les utilisateurs sur les problèmes audio, les problèmes de réseau ou d'autres erreurs.

Test

Si votre application est en cours de création, vous pouvez définir manuellement l'URL d'iFrame pour votre navigateur en configurant une valeur localStorage. Vous pourrez ainsi définir une URL localhost pour un test en local.

Pour définir la valeur, ouvrez les outils de développeur pour votre navigateur et exécutez la commande JavaScript suivante dans la console de développeur :

localStorage.setItem('LocalSettings:Sales:CallingExtensions', '{"name": "Example Calling app Title", "url": "https://myWidgetUrl/path/"}')

La valeur name apparaîtra dans l'en-tête du widget d'appel et url sera l'URL utilisée pour l'iFrame. Lorsque cet élément est défini, la valeur name que vous avez définie apparaîtra comme une option pour le fournisseur d'appels lorsque vous cliquerez sur l'icône Appel. Le widget d'appel utilisera l'élément url de l'iFrame que vous avez défini.

Enregistrer l'appel dans HubSpot

Dans HubSpot, les appels sont enregistrés comme des objets d'engagement. Ces engagements sont utilisés pour afficher les détails de l'appel dans la chronologie de l'objet de CRM associé. Ils sont également utilisés pour les rapports de vente intégrés de HubSpot.

Lorsqu'un appel est effectué via votre application, HubSpot créera automatiquement l'objet d'engagement de base et enverra l'ID de cet engagement à votre application via le kit de développement logiciel pour les extensions d'appel. L'ID sera transmis à votre application via la fonction onEngagementCreated. HubSpot définira les informations de base de l'engagement, y compris le propriétaire, le type et les associations. Vous devez mettre à jour les détails dans les métadonnées de la fiche d'informations d'engagement pour définir la durée de l'appel, ainsi que les notes de l'appel dans le champ body. Si vous disposez d'un enregistrement de l'appel, vous pouvez également définir recordingUrl, qui permet aux utilisateurs HubSpot de lire l'enregistrement lorsqu'ils consultent la fiche d'informations du contact dans HubSpot.

Découvrez-en davantage sur la mise à jour des engagements dans la documentation sur les engagements de CRM.

Par exemple :

// { "engagement": { "timestamp": 1561953600000 // A millisecond timestamp of the time of the call. This will default to the time that the call was initiated, but can be updated if needed. }, "metadata": { // Details for the call "toNumber": "+1 (888) 482-7768", // The number that was called. Displayed as a string, with no further formatting. "durationMilliseconds": 38000, // The length of the call in milliseconds. "recordingUrl": "https://app.example.com/Recordings/callrecordpath", // A path to a recording of the call "body": "Call notes" // Details about the call, displayed as the description } }

Les détails ci-dessus entraînent un engagement qui s'affiche comme dans l'image ci-dessous dans HubSpot :

calling-sdk-engagement

Consultez Engagements de CRM pour plus de détails sur l'utilisation des engagements.


Cet article vous a-t-il été utile ? *
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.