# 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
```jsx
```
#### 2. Insert the custom element
```html
```
### Attributes
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 are `production` and `staging`. Defaults 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.
Consider that colours represent an object containing the value of the colours on hexadecimal value. Any valid CSS value for colour is accepted (rgb, rgba, hsl, etc):
```jsx
{
loadFonts: [
{
font: 'Inter',
weight: ['400', '500', '600', '700'],
},
],
font: {
sans: 'Inter, sans-serif',
},
colours: {
typography: {
lightest: colours['white'],
light: colours['hero-blue'][400],
base: colours['hero-blue'][500],
dark: colours['hero-blue'][700],
darkest: colours['hero-blue'][900],
},
primary: {
lightest: colours['hero-primary'][100],
light: colours['hero-primary'][400],
base: colours['hero-primary'][500],
dark: colours['hero-primary'][700],
darkest: colours['hero-primary'][900],
},
secondary: {
lightest: colours['hero-blue'][100],
light: colours['hero-blue'][400],
base: colours['hero-blue'][500],
dark: colours['hero-blue'][700],
darkest: colours['hero-blue'][900],
},
contrast: {
primary: {
lightest: '',
light: colours['hero-blue'][700],
base: colours['hero-blue'][700],
dark: colours['hero-blue'][700],
darkest: colours['hero-blue'][900],
},
secondary: {
lightest: '',
light: colours['white'],
base: colours['white'],
dark: '',
darkest: colours['white'],
},
},
background: {
primary: {
light: colours['hero-primary'][50],
base: colours['hero-primary'][100],
dark: colours['hero-primary'][200],
darkest: colours['hero-primary'][500],
},
secondary: {
light: colours['hero-blue'][50],
base: colours['hero-blue'][100],
dark: colours['hero-blue'][200],
darkest: colours['hero-blue'][500],
},
},
border: {
primary: {
light: colours['hero-primary'][100],
base: colours['hero-primary'][200],
dark: colours['hero-primary'][300],
darkest: colours['hero-primary'][700],
},
secondary: {
light: colours['hero-blue'][100],
base: colours['hero-blue'][200],
dark: colours['hero-blue'][300],
darkest: colours['hero-blue'][700],
},
},
success: {
typography: {
lightest: colours.green[100],
light: colours.green[400],
base: colours.green[500],
dark: colours.green[700],
darkest: colours.green[900],
},
background: {
light: colours.green[50],
base: colours.green[100],
dark: colours.green[200],
darkest: colours.green[500],
},
border: {
light: colours.green[100],
base: colours.green[200],
dark: colours.green[300],
darkest: colours.green[700],
},
},
failure: {
typography: {
lightest: colours.red[100],
light: colours.red[400],
base: colours.red[500],
dark: colours.red[700],
darkest: colours.red[900],
},
background: {
light: colours.red[50],
base: colours.red[100],
dark: colours.red[200],
darkest: colours.red[500],
},
border: {
light: colours.red[100],
base: colours.red[200],
dark: colours.red[300],
darkest: colours.red[700],
},
},
info: {
typography: {
lightest: colours.blue[100],
light: colours.blue[400],
base: colours.blue[500],
dark: colours.blue[700],
darkest: colours.blue[900],
},
background: {
light: colours.blue[50],
base: colours.blue[100],
dark: colours.blue[200],
darkest: colours.blue[500],
},
border: {
light: colours.blue[100],
base: colours.blue[200],
dark: colours.blue[300],
darkest: colours.blue[700],
},
},
warning: {
typography: {
lightest: colours.yellow[100],
light: colours.yellow[400],
base: colours.yellow[500],
dark: colours.yellow[700],
darkest: colours.yellow[900],
},
background: {
light: colours.yellow[50],
base: colours.yellow[100],
dark: colours.yellow[200],
darkest: colours.yellow[500],
},
border: {
light: colours.yellow[100],
base: colours.yellow[200],
dark: colours.yellow[300],
darkest: colours.yellow[700],
},
},
disabled: {
border: colours['hero-blue'][300],
background: colours['hero-blue'][50],
typography: colours['hero-blue'][400],
},
},
focus: {
border: {
size: '1px',
color: 'transparent',
},
outline: {
size: '2px',
color: colours['hero-blue'][500],
},
ring: {
size: '3px',
color: '#37ffdb',
},
},
radius: {
sm: '4px',
md: '6px',
lg: '8px',
xl: '12px',
},
spacing: {
xs: '4px',
sm: '8px',
md: '12px',
lg: '16px',
xl: '20px',
'2xl': '24px',
'3xl': '40px',
},
}
```
## 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
```jsx
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.