Embed Web Component: moonshot-customers

Web component for displaying Moonshot org lists for commercial customers.

Install

Include the component library in the head of your HTML.

For example:

<head>
  ...
  <script src="lib/moonshot-customers.js"></script>
</head>

How to Use

To render a customers embed component, add the following HTML into the body of you web page:

<moonshot-customers />

This will display all commercial customers, using default settings.

Configuration Attributes

The customers embed supports multiple configration attributes. All are optional.

Option	Description
customerStatus	Filters the results by customer status (values: active, cancelled). If not provided, returns all.
cityAlias	Filters the results by city. A city alias has the format: `<city_name>-<state_code>`. Supports multiple with array. If not provided, returns all cities.
sectorAlias	Filters the results by sector. You must provide a valid sector alias. Supports multiple entries with array. If not provided, returns all sectors.
showHeader	Whether or not to show the header at the top, which includes the title, active filters, and a name search interface. Default is `true`.
showTitle	Whether or not to show the title (in the header at the top). Default is `true`.
showMoonshotCredit	Whether or not to show the "Powered by Moonshot" at the bottom. Default is `true`.
cardsPerRow	Specifies the cards to display per row (values: 1 - 5 are supported; default is `2`).
autoRefresh	Specifies an auto-refresh frequency (in seconds). If not provided or set to `0`, refresh will be disabled.
width	Specifies a hard-coded width. This effectively disables responsiveness, allowing you to control the space the list occupies.
borderColor	Overrides the default border color used by the component. Default is `#C9C9C9`.
borderColorActive	Overrides the default active border color used by the component (when hovered). Default is `#525252`.
fontColor	Overrides the main font color used by the component. Default is `#3B3B3B`.
debug	When set to `true`, outputs debug info to the console. This info is not sensitive.

Examples Using Configurable Options

This example renders all active commercial orgs in the sector "k12-education", within the city of Houston, TX.

It also disables the "Powered by Moonshot" credit and forces the component to render within 800px.

<moonshot-customers
  customerStatus="active"
  city="houston-tx"
  sector="k12-education"
  showMoonshotCredit="false"
  width="800px" />

This example specifies multiple cities and sectors as filters.

<moonshot-customers
  customerStatus="active"
  city="[houston-tx, austin-tx]"
  sector="[k12-education, hospitals, restaurants]"
  cardsPerRow="3" />

When providing multiple city or sector filters, the header component will display a drop-down menu for additionally viewing each filter individually.

Notes on Responsiveness

Currently, only the list is responsive, not the title header.

If you do not apply a width attribute, the cards will render in a responsive manner.

The cardsPerRow allows you to set that maximum cards per row the component will take, if permitted the viewport space.

You can either leverage the layout of your personal web page to control the space of the component, or use width to ensure the layout renders as expected.