SDKs
Edgewise offers two SDKs (PHP and JS) that reduce the amount of work required to use the Edgewise GraphQL API. Both require an API access token.
This is the recommended way to integrate Edgewise into your website.
PHP SDK
The Edgewise PHP SDK provides convenient access to the Edgewise GraphQL API from applications written in PHP (eg, WordPress).
For more information on installation and capability, visit our GitHub repo
JavaScript SDK
The Edgewise JavaScript SDK (edgewise.js) splits the difference between easily embedded WebComponents, and the fully featured GraphQL API. There are two main capabilities to the Edgewise JavaScript SDK:
- Edgewise Components
- Edgewise Analytics
Edgewise Components
The Edgewise JavaScript SDK provides the ability to programatically create UI components. Under the hood, these are exactly the same as the WebComponents; but without the ShadowDOM limitation.
Usage
To use Edgewise Components, you'll need to include our SDK library; which is hosted on our CDN. For example, put this script include in the header of your page:
<head>
<script src="https://libs.edgewise.cloud/edgewise.js@1"></script>
</head>
In the body of the page, you now have access to the Edgewise JS SDK.
If your website has multiple pages and you wish to capture UTM information no matter which page they initially land on, include this script on every page of your website, and initialize the library.
<script src="https://libs.edgewise.cloud/edgewise.js@1"></script>
<script>
Edgewise()
</script>
This is an example of a contact form created using our Edgewise SDK.
<body>
<div id="contact"></div>
<script>
Edgewise()
.components()
.create('ProjectContactForm', {
projectId: 'ID_OR_SLUG_GOES_HERE'
})
.mount('#contact')
</script>
</body>
This is an example of an inventory list created using our Edgewise SDK.
<body>
<div id="inventory-list"></div>
<script>
var edgewise = Edgewise()
var components = edgewise.components()
components
.create('ProjectInventoryList', {
projectId: 'ID_OR_SLUG_GOES_HERE'
})
.mount("#inventory-list")
</script>
</body>
Component Names
ProjectOpenHouseFlash
ProjectInventoryGrid
ProjectInventoryList
ProjectContactForm
ProjectDocuments
UnitBuyNowButton
Edgewise Analytics
If you are familiar with Google Analytics or Facebook Pixel, then Edgewise Analytics should look familiar. Once the SDK library is included in the page and initialized, you can start tracking events.
The tracking "push" method has two arguments:
- Required: the event name (eg
PageView
, orContact form submit
) - Additional event properties
By default, the SDK will track page detail like the URL, browser, screen size, etc.. Unlike some tracking libraries, we do not track the page view by default. So you will need to manually track.
Usage
To use Edgewise Analytics, you need to first create a tracker in Edgewise (Seller Central). This provides the necessary tracker ID. You can create a tracker under organization settings.
Once you have a tracker, you'll need to include our SDK library; which is hosted on our CDN. If you're already including the code elsewhere on the page (eg for components), then you do not need to include it again. For example, put this script include in the header of your page:
<head>
<script src="https://libs.edgewise.cloud/edgewise.js@1"></script>
</head>
In the body of the page, you now have access to the Edgewise JS SDK.
<body>
<script>
var edgewise = Edgewise()
edgewise.analytics.init('[TRACKER ID]')
edgewise.analytics.push('PageView')
</script>
</body>
PageView
is a standard event. However, you can push arbitrary custom events as well. It is recommended that you start with the standardPageView
event before sending custom events.