Edgewise Components
Edgewise Components are ready-to-use UI components for adding Edgewise functionality to your website. They are built on top of the Edgewise API and automatically stay up to date with data in Edgewise.
Components are available through the Edgewise JavaScript SDK and can be used for experiences such as lead registration forms, project inventory and availability, and Edgewise Messenger.
Usage
Once the Edgewise JavaScript SDK has been installed and initialized, you can create and mount a component anywhere on the page.
For example, to display a project's inventory:
<div id="inventory-list"></div>
<script>
window.edgewise
.components()
.create("ProjectInventoryList")
.mount("#inventory-list")
</script>
Components use the context provided when initializing the SDK, such as the current project:
<script>
window.edgewise = Edgewise({
projectId: ID_OR_SLUG
})
</script>
Components
Shared Options
All components have the following shared options:
| Option | Type | Notes |
|---|---|---|
projectId | ID or slug | Required. The ID of the project. You can also use the project's "slug" (eg. the slug for "Acme Condos" is acme-condos). Defaults to global config if set. |
debug | Boolean | Optional. Outputs debugging info. Make sure to disable in production. Defaults to global config if set. |
theme | String | Optional. Defaults to global config if set. |
Project Contact Form
ProjectContactForm
The Edgewise project contact form component makes it easy to register interest for your project on your marketing website (WordPress, SquareSpace, custom sites, etc.).
Learn more about the Edgewise Project Contact Form.
Messenger
Messenger
The Edgewise Intelligence powered chat. Messenger can answer project marketing questions, real-time inventory availability, and even pre-qualify leads. Leads will automatically register in the Edgewise CRM.
| Option | Type | Notes |
|---|---|---|
position | String | Optional. Defaults to bottom-right. |
Project Inventory List
ProjectInventoryList
The inventory list component is best suited for condo projects with many units, or projects with units without individual images.
| Option | Type | Notes |
|---|---|---|
thumb | drawing | image | Optional. Which image to use in medium and large sizes. Defaults to drawing. |
medium | Boolean | Optional. Use the "medium" size items. |
large | Boolean | Optional. Use the "large" size items. |
statusFilter | String | Optional. Determines which unit statuses will be shown. Defaults to ['AVAILABLE', 'RESERVED', 'SOLD']. |
collectionFilter | ID or name | Optional. Restrict inventory to the given collections. Defaults to all. |
floorPlanFilter | ID or title | Optional. Restrict inventory to the given floor plans. Defaults to all. |
itemsPerPage | Integer | Optional. Defaults to 10. |
Project Inventory Grid
ProjectInventoryGrid
| Option | Type | Notes |
|---|---|---|
thumb | drawing | image | Optional. Which image to use in medium and large sizes. Defaults to image. |
medium | Boolean | Optional. Use the "medium" size items. |
large | Boolean | Optional. Use the "large" size items. |
statusFilter | String | Optional. Determines which unit statuses will be shown. Defaults to ['AVAILABLE', 'RESERVED', 'SOLD']. |
collectionFilter | ID or name | Optional. Restrict inventory to the given collections. Defaults to all. |
floorPlanFilter | ID or title | Optional. Restrict inventory to the given floor plans. Defaults to all. |
itemsPerPage | Integer | Optional. Defaults to 8. |
Images shown will be prioritized in the following manner:
- Unit Images
- Floor Plan Images
- Project Images
If no Unit images exist, then the component will display Floor Plan images. If uploaded Floor Plans also don't have any associated images, the component will display the hero project image.
Project Lots List
ProjectLotsList
The lots list component is best suited for projects with many lots, or projects with lots without individual images.
| Option | Type | Notes |
|---|---|---|
itemsPerPage | Integer | Optional. Defaults to 10. |
statusFilter | String | Optional. Determines which lot statuses will be shown. Defaults to AVAILABLE, RESERVED, SOLD. |
priceVisible | Boolean | Optional. Defaults to true. |
specsVisible | Boolean | Optional. Defaults to true. |
Project Open House Flash Banner
ProjectOpenHouseFlash
A flash banner that will appear at the top of the page if an open house is less than 10 days away. It will hide itself after the open house has passed.
Project Documents
ProjectDocuments
| Option | Type | Notes |
|---|---|---|
preloader | Boolean | Optional. Determines if loading... is shown while initializing the component. The default is true. |
Unit Buy Now Button
UnitBuyNowButton
| Option | Type | Notes |
|---|---|---|
unitId | ID or title | Required. The ID of the unit in Edgewise. Alternatively, you can use the unit's title in Edgewise, or the MLS ID in Edgewise. Using the actual unit ID is preferred. |
Styling
Edgewise Components are designed to integrate with your website and can be customized using CSS selectors, CSS variables, and themes.
The default theme provides a generic starting point intended to be customized
to match your website. For Squarespace websites, use the squarespace theme
to inherit styling appropriate for Squarespace.
Themes
To set a theme via the SDK:
<head>
<script src="https://libs.edgewise.cloud/edgewise.js@1"></script>
<script>
window.edgewise = Edgewise({
projectId: ID_OR_SLUG,
theme: "squarespace"
})
</script>
</head>
<body>
<script>
window.edgewise
.components()
.create("ProjectInventoryList")
</script>
</body>
Setting the theme on the root Edgewise instance sets the theme on all children components. You can optional set on a per-component basis as well; which will override the root theme.
CSS
Edgewise Components are designed to be customized to match your website. Each component exposes CSS variables for common styling options, such as colors, typography, spacing, and other visual properties.
Components are rendered directly into your website and do not use the Shadow DOM or iframes. This allows them to inherit styles from your website and means their elements can be targeted directly using standard CSS selectors.
In most cases, we recommend using the provided CSS variables where available and CSS selectors for more specific customizations.
Below is a list of supported css variables:
--white
--light-accent
--accent
--dark-accent
--black
--font-family
--font-weight
--font-size
--letter-spacing
--link
--paragraph-color
--button-color
--button-background-color
--button-border-color
--button-active-color
--button-active-background-color
--button-active-border-color
--button-disabled-background-color
--button-border-radius
--button-text-transform
--button-letter-spacing
--form-label-color
--form-label-font-weight
--form-label-active-color
--form-label-text-transform
--form-input-color
--form-input-active-color
--form-input-background-color
--form-input-border-color
--form-input-active-border-color
--form-input-border-radius
--form-disclaimer-color
--modal-header-border-color
--modal-background-color
--modal-footer-background-color
--modal-close-button-color
--floor-plan-abstract-color
--floor-plan-abstract-icon-color
--floor-plan-abstract-uom-color
--lot-specs-color
--lot-specs-icon-color
--lot-specs-uom-color
--inventory-grid-item-background-color
--inventory-grid-item-border-color
--inventory-grid-item-button-background-color
--inventory-grid-item-button-color
--inventory-grid-item-title-color
--inventory-grid-item-color
--inventory-grid-item-price-color
--inventory-grid-pagination-color
--inventory-list-pagination-color
--inventory-modal-header-background-color
--inventory-modal-background-color
--inventory-modal-title-color
--inventory-modal-price-color
--inventory-modal-move-in-ready-background-color
--inventory-modal-floor-plan-abstract-color
--inventory-modal-floor-plan-abstract-icon-color
--inventory-modal-floor-plan-abstract-uom-color
--lot-modal-header-background-color
--lot-modal-background-color
--lot-modal-title-color
--lot-modal-price-color
--lot-modal-specs-color
--lot-modal-specs-icon-color
--lot-modal-specs-uom-color
--lots-list-pagination-color
--messenger-launcher-background-color
--messenger-launcher-border-color
--messenger-header-background-color
--messenger-header-border-color
--messenger-dialog-background-color
--messenger-chat-thread-background-color
--messenger-chat-thread-border-color
--messenger-avatar-background-color
--messenger-avatar-color
--messenger-avatar-self-background-color
--messenger-avatar-self-color
--messenger-footer-form-label-color
--messenger-footer-form-input-active-color
--open-house-flash-background-color
--unit-buy-now-button-available-background-color
--unit-buy-now-button-active-available-background-color
--unit-buy-now-button-reserved-background-color
--unit-buy-now-button-active-reserved-background-color
For the best forward compatibility, we recommend using CSS variables whenever possible. If you use extensive custom CSS selectors, consider pinning the SDK to the current minor version (for example,
@1.27). For maximum stability, pin to a specific patch version (for example,@1.27.3).We make every effort to maintain backwards compatibility with custom styling. However, some component changes may affect custom CSS. When we introduce styling changes that may affect customizations, we will bump the minor version.
You can inspect your browser's network traffic to determine the latest SDK version.
WebComponents
The Edgewise WebComponent library has been deprecated as of v1.15 (prior to the release of Edgewise Messenger component) and will not be updated moving forward. For a number of reasons (largely, the limitations of the ShadowDOM), it is strongly suggested to migrate to the SDK.