Engagement Web Component

The Medical Engagement Web component is a platform-agnostic medical information experience that can be integrated into a customer's website. The component interfaces directly with Medical Information Cloud, giving customers access to key features such as medical inquiry submissions.

When integrated, the Engagement Web component will appear on the customer's website in a tile at the bottom right of the page. Clicking the tile opens the component and expands it into view.

Component integration

Once authenticated, the Medical Engagement Component Generator can be used to display a code snippet with selected CMT. This snippet can be copied directly to an html website to have the component load and display on that page. Example below.

<script type="module" src="https://d1mu6oy21or6o2.cloudfront.net/v1.0/bundle.js"></script>
<mic-mei-component client-id="00000000-0000-0000-0000-000000000000" config-name="MED_Komodo_Health_Template"/>

Alternatively, the script and component can be dynamically attached to the page from JavaScript or otherwise. Example below.

const script = document.createElement("script");
script.setAttribute("src", "https://d1mu6oy21or6o2.cloudfront.net/v1.0/bundle.js");
script.setAttribute("type", "text/javascript");
script.setAttribute("async", true);
document.body.appendChild(script);

// success event
script.addEventListener("load", () => {
  // Create the web component and attach it to the dom
  const component = document.createElement("mic-mei-component");
  component.setAttribute("config-name", "MED_Komodo_Health_Template");
  component.setAttribute("client-id", "00000000-0000-0000-0000-000000000000");
  document.body.appendChild(component);
});

Component styling

The styling of the Engagement Web Component component and Inquiry sub-component are customizable from the root CSS file. Re-usage of CSS variables both within the index.css file and throughout the app dictate text sizes and general colors.

Table 138. CSS variables

Variable	Usage
mei-primary-color	For use with color themes. Sets the default color for buttons, focused input borders & labels.
mei-background-color	The background color of all components.
mei-button-color	Color of submit & close buttons.
mei-button-hover color	Color of buttons when hovered.
mei-button-text-color	Color of the font on buttons.
mei-font-size-lg	Largest available font size to apply to text. Default for header.
mei-font-size-md	Font size for any medium-sized text. Default size for sub-header.
mei-font-size-sm	Font size for any small text. Default size for preamble.
mei-font-size-xs	Smallest font size available. Default for extra small text such as footer.
mei-input-label-font-family	Font family of labels on input fields.
mei-input-font-family	Font family of input text.
mei-input-label-color	Font color of text label for each input.
mei-input-focused-label-color	Font color of the label when focused.
mei-input-border-color	Color of input box borders.
mei-input-hover-border-color	Color of input box borders when hovered.
mei-input-focused-border-color	Color of input box borders when focused.
mei-border	Color and thickness of the outermost border.
mei-border-radius	The radius of the border edges (sharp vs rounded).
mei-box-shadow	Color and size of shadow effect behind the border.
mei-icon-background-color	Background color behind mei-icon. Defaults to transparent.
mei-icon-closed	A clickable component icon that displays when the component is closed.
mei-icon-expanded	A clickable component icon that displays when the component is expanded.
mei-header-font-size	The font size of the topmost header text. Defaults to font-size-lg.
mei-header-color	Color of header text. Defaults to mei-primary-font-color.
mei-subheader-font-size	The font size of the subheader. Defaults to font-size-md.
mei-subheader-color	Color of the subheader text. Defaults to mei-primary-font-color.
mei-preamble-font-size	The font size of the preamble. Defaults to font-size-sm.
mei-preamble-color	Color of preamble text. Defaults to mei-primary-font-color.
mei-footer-font-size	The font size of the footer text. Defaults to font-size-xs.
mei-footer-color	Color of footer text. Defaults to mei-primary-font-color.
mei-confirmation-font-size	The font size of the footer text. Defaults to font-size-md.
mei-confirmation-color	Color of confirmation text. Defaults to mei-primary-font-color.

Local overrides

In addition to configuration from custom metadata types, default values can be set by providing the component with an additional configuration attribute. See the Supported Field Types table for more information about valid default value definitions. This feature allows setting default values derived from the context of the hosting page or passing along additional field data that is not necessarily represented on the rendered form.

Note

Any valid field values provided this way take precedence over custom metadata type configured values.

Local overrides examples

// Directly in HTML
<script type="module" src="https: d1mu6oy21or6o2.cloudfront.net/v1.0/bundle.js"></script>
<mic-mei-component id="mei-component" client-id="00000000-0000-0000-0000-000000000000" config-name="MED_Komodo_Health_Template"
config='{"inquiryDefaults": {"MED_Requester_Name__c": "John Smith", "MY_Custom_Date_Field__c": "2023-08-22T16:00:00.000Z" } }'
/>

// Dynamically in javascript
const componentConfig = {
	"inquiryDefaults": {
		"MED_Requester_Name__c": "John Smith", // perhaps users name is known from website context 
		"MY_Custom_Date_Field__c": "2023-08-22T16:00:00.000Z",
		"MY_Custom_Website_Field__c": window.location.href
	}
};
document.getElementById("mei-component").setAttribute("config", JSON.stringify(componentConfig));

Warning

Field names are case-sensitive and must exactly match the Qualified API name of the field or they will be ignored.