When launching Connect, you may tailor the experience for each of your users using query parameters or HTML attributes. Currently, Connect supports customizing Mode, Pinned Providers, and Segments.

Specify a Connect Mode

You may change Connect’s UX Flow or narrow the Provider Network offered to your Users by using any of the following values in the mode option:

auth: Serves the default Connect mode, which shows all available providers configured for your application.

covidVaccineSearch: Offers an optimized UX flow centered around retrieving COVID immunization records.

📘

Tip

Be aware that these values are case-sensitive.

Example HTML usage

<div class="hapi__token-container">
  <button
    data-hapi-token="<sessionToken>"
    data-hapi-mode="covidVaccineSearch"
  >Connect your health data</button>
</div>

Pin your Preferred Providers

If you’ve already identified a provider that most of your users will connect to (or if you want to promote a particular provider), you may launch Connect with a list of up to 6 comma-separated provider IDs as "Pinned Providers." Pinned Providers will show up first in a row of Popular Providers below the search box.

📘

Tip

Reach out to our Support team to get the Provider IDs of your preferred Providers.

Example usage

<div class="hapi__token-container">
  <!-- Starfleet Medical: 55a83bdc8d1eb1420aa1a71b -->
  <!-- Starfleet Pharmacy: 5b1daf3f079c652eaf41fd23 -->
  <!-- Starfleet Labs: 601880fc90ad299ccc7257bc -->
  <button
    data-hapi-token="<sessionToken>"
    data-hapi-pinned-providers="55a83bdc8d1eb1420aa1a71b,5b1daf3f079c652eaf41fd23,601880fc90ad299ccc7257bc"
  >Connect your health data</button>
</div>

Classify Users by Segments

If you’re currently receiving analytics reports from Human API, you may classify events by segment. A segment is any valid alphanumeric string you choose to break up your user base. Segments may also be helpful to identify metrics for multiple use cases or run A/B testing experiments.

Example usage

<div class="hapi__token-container">
  <button
    data-hapi-token="<sessionToken>"
    data-hapi-segment="international-traveler"
  >Connect your health data</button>
</div>