A common need for 3rd-party CRM integrations is to embed a user interface to allow Agents to match customer profiles with CRM data. In Alcmeon, this is usually done by integrating an HTML-based iframe within a popin in the processing page for a specific message. To achieve this, 3rd-party developers must:

Register the url for their HTML-based UI with [email protected]
Use the Alcmeon Javascript SDK to access information about the message being currently processed
Use APIs specific to the 3rd-party CRM to search for user profiles
Display user profiles within the HTML view, allow the user to select one as a match, and provide a save button to push the match result to the 3rd-party CRM

Register the HTML view

Please contact [email protected] with the following information, for the initial configuration steps:

The label of the processing page button that will open the popin.
URL of the widget which will be hosted within the popin. (Only https urls that do not expose a self-signed certificate are supported)

A hello-world HTML view

The HTML view registered with [email protected] should include the Javascript SDK Reference as follows:

<script src="https://alcmeon.com/widget/1.0/sdk.js"></script>

Once included, the [alcmeon.subscribe](3pcrm-javascript-sdk-reference#subscribe) function allows the view to obtain access to the entire enclosing Context Data Model.

function handleContext(context) {
  document.querySelector('pre').innerHTML = JSON.stringify(context, null, 2);
}
alcmeon.subscribe(handleAlcmeonContext);

Sample code that illustrates the entire process is shown below.

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <title>MyCRM integration modal</title>
    <style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
}
header {
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 8px 24px;
  font-size: 24px;              
}
header .logo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAzFBMVEUAAABDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDwlRDw
lRDwlRDwlRDwlT/9OD48dm22qWZ0o7j6cn9897u7tLd58Wp1pv68tyf1JPy79Xq7M9axWHT47zG37L08NfZ5sDK4bVLw1nn682k1JaDzX5+y3pRxFtGw1bh6Me/3ayu2J6W0YyNz4V4ynZzynJsyG5hxmba5cLO4bnA3a283Kmz2aKY0Y1nx2n28NnB3a3
7kWjyAAAAF3RSTlMAAlFMW0GgVWBHPN8fBs2/DJd+cYswwmSejGIAAAI2SURBVFjD7ZZ7b5pgFIcVVKjWemt3fqKgoCKK93p3W9vt+3+nHSQmEOXdXDCzGc8/h+jj40neBEglJCT8a9Ry6i94rBYiviF6ypSvzqk5IooIMhW5fFUumysQE9kjb8viFduVy
Ceq5yef88U/WU71t/OJ7vnN2kvxd7WSl4su0hm52stjsZhOp08KXxbL5XxWVat+TRSkyzx9qTyriqLIclZVatVKLpcrlQp+TFikOLhlkOLhdkGKi1sFKT4+SZDi5P8MUrwEg3VgRR5NQAtK2+HINOyJr+idxfpMjgzaxOwQdpYmjvTnrHjok6AsDJoznlr
YWQHN8cSygZ+stLerLloBWRg0YPEc8dRaOPDlEMasA3tOTHvYd+toEFlwQrIg+IoB0QaLJjQLeo/cH9DWMPcBpcFlGCFZEGx0zB59x5Id10GbLJg9DaPQf1qag2FQFgb7XOnqe895RYsG/NO3cNCj2wvKwuAErSmHPGen6xsdG1pD/wgoHejLWUgWBsnQv
6LtOwccj5MP5eASM9Y0l0/ZQT8si4PfwIfhOw0A70S0Brrj6fsAXGLFAhohWRycAgPynXkHBnm06zhiu0fFhvMRlMVB6mJ8Chp4oyO7YdPstE577R205mE5HIzCQr1H1yEOLtCP9f61NYztfdxgP0Hw/h/0F4N38raUigzeyRtn6lZBRpLzSl6SMtJDVs5
KCk9ZfpAyp6lI/DFPSWJN5nlRTwVI+/AUEdLO9VRCQkJCQkKs/ALOvS8KUP55IwAAAABJRU5ErkJggg==');
  width: 48px;
  height: 44px;
  background-size: 100%;
}
header .close {
  cursor: pointer;
  border: 1px solid #a0a0a0;
  width: 24px;
  line-height: 25px;
  height: 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
main {
  padding: 16px;
}
main label {
  display: block;
  margin-bottom: 8px;
}
    </style>
  </head>

  <body>
    <header>
      <span class="logo"></span>
      <span class="title">Create case from conversation</span>
      <span class="close">X</span>
    </header>
    <main>
      <label>Received context:</label>
      <pre></pre>
    </main>
    <script src="https://alcmeon.com/widget/1.0/sdk.js"></script>
    <script>
(function(window, document) {

  function handleAlcmeonContext(context) {
    document.querySelector('pre').innerHTML = JSON.stringify(context, null, 2);
  }

  document.querySelector('header .close')
    .addEventListener('click', () => alcmeon.closeModal(), false);

  alcmeon.subscribe(handleAlcmeonContext);

})(window, document);
    </script>
  </body>
</html>