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 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.
There are two ways to create components:
- Via the JS SDK (recommended).
- Using our WebComponent library.
The SDK option comes with additional functionality, and does not use a ShadowDOM – making them considerably easier to style as they do not require CSS variables.
Components
The syntax for components varies slightly between the SDK and WebComponents.
The SDK uses camelCase options (eg { itemsPerPage: 6 }, whereas the WebComponents
use kebab-case HTML element properties (eg items-per-page="6").
HTML does not accept array arguments, so all arrays should be passed as comma separated values.
Eg, { statusFilter: ['AVAILABLE', 'RESERVED'] } would be set as status-filter="AVAILABLE, RESERVED")
Since the SDK is the recommended option, the documentation is in camelCase.
Project Contact Form
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.
Project Inventory List
SDK: ProjectInventoryList
WebComponent: <ewc-project-inventory-list />
The inventory list component is best suited for condo projects with many units, or projects with units without individual images.
| 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). |
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
SDK: ProjectInventoryGrid
WebComponent: <ewc-project-inventory-grid />
| 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). |
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
SDK: ProjectLotsList
WebComponent: <ewc-project-lots-list />
The lots list component is best suited for projects with many lots, or projects with lots without individual images.
| 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). |
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. |
Unit Buy Now Button
SDK: UnitBuyNowButton
WebComponent: <ewc-unit-buy-now-button />
| Option | Type | Notes |
|---|---|---|
projectId | ID or slug | Required. The ID of the project. Alternatively, you can also use the project's "slug" (eg. the slug for "Acme Condos" is acme-condos). |
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. |
debug | Boolean | Optional. Outputs debugging info below the button. Make sure to disable in production. |
Project Open House Flash Banner
SDK: ProjectOpenHouseFlash
WebComponent: <ewc-project-open-house-flash />
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.
| Option | Type | Notes |
|---|---|---|
projectId | ID or slug | Required. The ID of the project. Alternatively, you can also use the project's "slug" (eg. the slug for "Acme Condos" is acme-condos). |
Project Documents
SDK: ProjectDocuments
WebComponent: <ewc-project-documents />
| 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). |
preloader | Boolean | Optional. Determines if loading... is shown while initializing the component. The default is true. |
Usage
SDK
<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>
WebComponent
To use Edgewise WebComponents, you need to include our web component library; which is hosted on our CDN. For example, put this script include in the header of your page:
<script src="https://libs.edgewise.cloud/components@1"></script>
In the body of the page, you can now use any of the Edgewise Web Components.
<ewc-project-open-house-flash project-id="8"> </ewc-project-open-house-flash>
<ewc-project-inventory-list project-id="8"> </ewc-project-inventory-list>
<ewc-project-inventory-grid project-id="8"> </ewc-project-inventory-grid>
<ewc-project-lots-list project-id="8"> </ewc-project-lots-list>
<ewc-project-documents project-id="8"> </ewc-project-documents>
<ewc-project-contact-form project-id="8"> </ewc-project-contact-form>
<ewc-unit-buy-now-button project-id="8"> </ewc-unit-buy-now-button>
Components are configured via their element attributes. For instance, the components above all require a project-id attribute; which corresponds to the ID in the Edgewise API. Similarly to the API, you can use the project's slug (url) as the ID.
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, set the theme squarespace will cascade the SquareSpace theme
into 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.
To set a theme on a WebComponent:
```html
<ewc-project-inventory-list theme="edgewise"></ewc-project-inventory-list>
WebComponents
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. While there are many shared css vars, some are component specific:
--font-family
--link
--accent
--button-color
--button-background-color
--button-border-color
--button-active-background-color
--button-active-border-color
--button-disabled-background-color
--form-label-color
--form-label-active-color
--form-label-text-transform
--form-label-font-weight
--form-input-color
--form-input-active-color
--form-input-background-color
--form-input-border-color
--form-input-active-border-color
--modal-background-color
--modal-header-border-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-list-pagination-color
--inventory-modal-header-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
--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
Caveats
WebComponents are a modern web feature. As such, older browsers have limited (or no) support for web components (see: caniuse web components). If you need support in older browsers (eg. IE11), you can try using web component polyfills.
For greater control, you can use our JS SDK (edgewise.js); which includes our Edgewise Components library. This lets you instantiate the same components, but programmatically. Components created via the JS SDK are not WebComponents, and so does not come with the same Shadow DOM / IE11 caveats. However, it does require more coding experience. Reach out to support@edgewise.io for more details.