A Web Component is a reusable, encapsulated piece of code that provides specific functionality or UI elements for a web page. It allows developers to create custom HTML elements with their own behaviour, styles, and functionality, which can be easily reused across different web applications.
Check this document for more information.
Let's use the Message Builder as our example. To add the Message Builder to your application as a Web Component requires only two steps:
<script src="https://scripts.htech.app/message-builder/web-component/latest.js"></script><hh-message-builder jwt-token="youraccesstoken" tenant-id="yourtenantid"/>The Message Builder Web Component exposes the following attributes:
jwt-token: access token generated using target practice group API key;tenant-id: target practice group id;admin-id: the ID of the admin accessing the Message Builder. Optional.patient-id: opens the Message Builder for the loaded patient (if provided). Optional.env: define the environment, allowed values areproductionandstaging. Defaults tostaging.theme: an object containing the theme variables like colours and spacing. Optional. See the Theming section below.
The Message Builder utilizes a theming system based on semantic tokens. These tokens can be customized to match your brand identity. The default theme, as shown below, serves as a good starting point for creating your own.
Default theme
The Message Builder Web Component dispatches events to the global window object, which you can intercept using addEventListener. This allows you to add custom callbacks to handle these events and even perform actions such as redirects.
For a deeper understanding of how events work in the DOM, refer to this guide on MDN
| Event | Description |
|---|---|
| HHMB.MESSAGE_SENT | Dispatched on the confirmation page after the message is added to the queue to be sent. |
| HHMB.MESSAGE_SENT_CONFIRM | Dispatched on the confirmation page after the message is successfully delivered. |
| HHMB.MESSAGE_SEND_ERROR | Dispatched on the confirmation page if the message fails to process in the queue. |
| HHMB.MESSAGE_SAVED_TO_RECORD | Dispatched on the confirmation page if the message is successfully written to the record. |
| HHMB.MESSAGE_SAVE_TO_RECORD_ERROR | Dispatched on the confirmation page if the message fails to write to the record. |
window.addEventListener('HHMB.MESSAGE_SAVE_TO_RECORD_ERROR', ()=>alert('Saved to Record')API Key and Tenant ID access must be requested directly from Hero Health. Please note that this access is limited to partners only.
Ensure your network allows access to *.htech.app and herohealth.net domains. This means there are no firewall restrictions in place.