Hello website owners, we are making our sales and pricing data visualisations for private property projects available to relevant websites! This means that if you have a website talking about Singapore property projects, you can now easily embed sales and pricing widgets to make your website even more informative and engaging! And in case you missed the main header of this post, this is FREE!
What information will the widget show?
- Last 3 years running (default, but can be configured) data for the project, always up-to-date and hands-free
- Sales trend + summary breakdown for “New Sale”, “Sub Sale” and “Resale”
- Average price and PSF trend
- Sales transactions records from URA
- Comparison of sales and PSF price trend between the selected project and 4 other nearest projects (within 2km)
- Comparison of rental and PSF price trend between the selected project and the same 4 nearest projects mentioned above
- Summary table of the sales and rental data comparisons
Here’s an example of how it will look like for the project Cyan @ Bukit Timah:
What part of the widget can be configured?
The following items can be configured to suit your website.
- Project name for which you want the widget to show data for
- Colour scheme (of 7 colours) for the bar and line charts
- Site domain (this is to identify the websites that have whitelisted with us to display the widget. More on this later)
Whitelisting your website
Note that you will need to whitelist your site before you will be able to use the widget. Why should you whitelist your site? This is to give us an idea of which sites are using our widget. We also want to be sure that the widgets are only used on relevant websites. To whitelist your site, please reach out to us at https://stackproperty.sg/contact.
How to configure the widget
The embedding of the widget is done via iframe and some basic Javascript. Here’s a quick code sample:
<script src="https://stackproperty.sg/js/iframeResizer.min.js"></script>
<iframe id="stackproperty" src="https://stackproperty.sg/widgets/private-project?site=stackproperty.sg&project=Cyan&cc1=786028&cc2=48446e&cc3=a57c1b&cc4=5e569b&cc5=d2980d&cc6=776bcd&cc7=ffb400" style="width:1px;min-width:100%;border:none;"></iframe>
<script>
var stkp = document.querySelector('#stackproperty');
stkp.onload = function() { iFrameResize({log:false}, '#stackproperty'); };
</script>
The configuration is done by making changes to the iframe src URL. In line 2 of the code above, pay attention to the part after the question mark (?) as this carries the configurable options of the widget. Each configuration option is denoted by a key=value pair. For instance, site=stackproperty.sg. In this case, “site” is the key and “stackproperty.sg” is the value assigned to it.
Now, let’s take a look at all the available configurable options:
| Key | Required? | Value |
| site | Yes. You must whitelist your site first. | The site domain without the “https://” part. eg; stackproperty.sg |
| project | Yes. | This is the name of the private property project that you wish to show in the widget. The name should be provided as per our records. See the full list of property projects per our records. |
| dr | Optional | This means date range for which the data should be based on. Defaults to “3y” (last running 3 years) if not set. Possible values are: – 3m (means last running 3 months) – 6m (means last running 6 months) – 1y (means last running 1 year) – 3y (means last running 3 years) – 5y (means last running 5 years) |
| cc1 | Optional | You can set up a scheme of 7 colours to suit the look and feel of your website. The bar and line charts will utilise the colours in order. Specify the desired hex colour code, without the “#”. eg; 336699 This represents custom colour #1. If not set, cc1 defaults to #786028 |
| cc2 | Optional | This represents custom colour #2. If not set, cc2 defaults to #48446e |
| cc3 | Optional | This represents custom colour #3. If not set, cc3 defaults to #a57c1b |
| cc4 | Optional | This represents custom colour #4. If not set, cc4 defaults to #5e569b |
| cc5 | Optional | This represents custom colour #5. If not set, cc5 defaults to #d2980d |
| cc6 | Optional | This represents custom colour #6 If not set, cc6 defaults to #776bcd |
| cc7 | Optional | This represents custom colour #7. If not set, cc7 defaults to #ffb400 |
That’s it! If you’ll like to whitelist your site or need some help in configuring this widget for your website, please reach out to us!
Other website widgets
In case you aren’t aware, we have 70+ other self-configurable, embeddable web widgets that you can use on your website. Check them out at https://stackproperty.sg/widgets.