What is a Web Component?

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.

How to use our Web Components?

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:

1. Include the script tag

Copy

Copied

<script src="https://scripts.htech.app/message-builder/web-component/latest.js"></script>

2. Insert the custom element

Copy

Copied

<hh-message-builder api-key="yourapikey" tenant-id="yourtenantid" />

Attributes

The Message Builder Web Component exposes the following attributes:

api-key: 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 are production and staging. Default to staging.
theme: an object containing the theme variables like colours and spacing. Optional. See the Theming section below.

Theming

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

Events

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.

List of events

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.

Example

Copy

Copied

window.addEventListener('HHMB.MESSAGE_SAVE_TO_RECORD_ERROR', ()=>alert('Saved to Record')

Troubleshooting

Where can I find my API Key and Tenant ID?

API Key and Tenant ID access must be requested directly from Hero Health. Please note that this access is limited to partners only.

Firewall configuration

Ensure your network allows access to *.htech.app and herohealth.net domains. This means there are no firewall restrictions in place.