Make sure you take a look at the Web Guide, Start a user session, and Retrieve User Access Token in order to learn the steps that need to be taken to set up Human API Connect

Usage

Using the Connect client inside a plain HTML page is simple.

Just add a class=hapi__token-container to the parent of the element that will be used to specify the data-hapi-token attribute.

You may also specify optional attributes data-hapi-mode, data-hapi-segment, and data-hapi-pinned-providers, for more information, take a look at Customize your Connect Integration .

<html>
<head>
  <title>Human API demo</title>
  <!-- include the Connect script -->
  <script src="https://cdn.humanapi.co/[email protected]"></script>
  <script>
    // Add an event listener for each lifecycle hook
    HumanConnect.on("close", (response) => {console.log("Connect closed", response)});
    HumanConnect.on("connect", (response) => {console.log("Source connected", response)});
    HumanConnect.on("disconnect", (response) => {console.log("Source disconnected", response)});
  </script>
</head>
<-- Add the class hapi__token-container -->
<body class="hapi__token-container">
  <h1>Human API demo</h1>
  <!-- Add a button with the data-hapi-token attribute to open Connect -->
  <button
    data-hapi-token="<your session token>"
    data-hapi-mode="auth"
    data-hapi-segment="<optional alphanumeric segment identifier>"
    data-hapi-pinned-providers="<optional comma-separated list of preferred provider IDs>"
  >Connect your health data</button>
  </body>
</html>