Edgewise Components
Edgewise Components are modern UI components that can be
easily and quickly embedded in your website. They use the Edgewise
API under the hood, and automatically update. They support styling
through CSS selectors, CSS variables, and themes. The default theme is generic,
and is intended as a base for your own styling. When using in a SquareSpace
website, set the theme to squarespace to adopt the website's styling.
Edgewise Components are accessible via the Edgewise JS SDK.
Usage
<head>
<script src="https://libs.edgewise.cloud/edgewise.js@1"></script>
</head>
<body>
<div id="inventory-list"></div>
<script>
Edgewise({ projectId: ID_OR_SLUG })
.components()
.create('ProjectInventoryList')
.mount('#inventory-list')
</script>
</body>
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 come standard with a basic style via the default theme. You can use it as-is, or apply your own styling.
If using SquareSpace, setting the theme to squarespace will apply the SquareSpace theme onto the Edgewise Component.
Themes
To set a theme via the SDK:
<script>
Edgewise({
projectId: ID_OR_SLUG,
theme: 'squarespace'
)
.components()
.create('ProjectInventoryList')
</script>
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 Variables
When using the SDK, you can target HTML elements directly with CSS. WebComponents use the Shadow DOM, which means very little of your page's styling will cascade into the component. This means that we need to explicitly "surface" styling options; which we do via CSS variables.
So when styling WebComponents, the only option is CSS variables. When using the SDK, you have the option of using CSS selector or CSS variables.
Below is a list of supported css variables:
--white
--light-accent
--accent
--dark-accent
--black
--font-family
--font-weight
--font-size
--letter-spacing
--link
--button-color
--button-background-color
--button-border-color
--button-active-color
--button-active-background-color
--button-active-border-color
--button-disabled-background-color
--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
--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
WebComponents
Edgewise WebComponents 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, it is strongly suggested to migrate to the SDK.