Introduction

PSE - Listings

Default embeded code to use the new PSE:

<script src="https://sdk.sharplaunch.com/sharplaunch_SDK.js"></script>
<div id="PSE"></div>
<script>
  SharpLaunch.PSE.create('CLIENT_API_KEY', {
    el: '#PSE',
    config: {
      // Runtime configuration options (see below)
    }
  });
</script>

Configuration options

Optimally, when rendering the main PSE this shouldn't be used. The most important parameters are set via the PSE Settings page. Keep in mind that any runtime option (e.g. filters:) defined within the embed code will override (and not merge) the config value.

Config values available:

{
    // `base_url` is the root URL path for the app, set it to /properties/ or other in case the PSE is served from a directory/permalink.
    "base_url": "/",
    // `router` - see options below at "Navigation"
    "router": "default", 
    "navigation_mode": "direct", // direct|iframe|disabled
    // `colors` define client's accent color
    "colors": {
        "accent": "#3b86f2",
        "text_on_accent": "white" // Computed automatically based on `colors.accent` if not defined
    },
    // `views` define the display modes
    "views": [
        "sidebar", // split view: map with a list on the left/right side
        "list", // list view
        "map" // fullscreen map
    ],
    // `status` define which properties to include in the PSE by their status. Not related to status filtering within the filter bar.
    "status": ["active", "closed", "escrow"],
    // `type` define which properties to include in the PSE by their type. Not related to type filtering within the filter bar.
    "type": [
        "retail",
        "special",
        "industrial",
        "medical",
        "other",
        "multifamily",
        "flex",
        "hospitality",
        "land",
        "mixed",
        "office",
        "farmranch"
    ],
    // `map_sidebar_position` define sidebar position on a `sidebar` view
    "map_sidebar_position": "left", // left | right
    // `map_tooltip_on_hover` display a small tooltip window when hovering over a map marker
    "map_tooltip_on_hover": false, // Boolean
    // `map_marker_style` @TODO: implement
    "map_marker_style": "default",
    // `map_marker_color`
    "map_marker_color": "#f50",
    /**
     *  `filters` Array of filters to display within the filter bar,
     *   see examples below.
     *
     *      - `name` id|slug of the filter
     *          For the Team/Brokers filter the value must be `team`
     *      - `label` displayed above the input field
     *         (if `filters.filters_show_labels == true`)
     *      - `placeholder` placeholder for the input field
     *      - `type` text | select | multiselect
     *      - `fields` it's an Array, although it only works with
     *        multiple values within the `type`: `text` search
     *      - `default` must match the value type on the website object:
     *          e.g. if property.type = [] 👉️ filters.$.default = []
     *          e.g. if property.state = "" 👉️ filters.$.default = ""
     *
     **/
    "filters": [
        {
            "name": "keyword",
            "label": "Keyword",
            "placeholder": "Keywords search ...",
            "type": "text",
            "fields": [
                "name",
                "state",
                "state_long",
                "city",
                "address",
                "description"
            ],
            "default": ""
        },
        {
            "name": "type",
            "label": "Type",
            "type": "select",
            "placeholder": "Any type",
            "fields": ["type"],
            "default": []
        },
        {
            "name": "location",
            "label": "Location",
            "placeholder": "Any state",
            "type": "select",
            "fields": ["state_long"],
            "default": ""
        },
        {
            "name": "status",
            "label": "Status",
            "placeholder": "Any status",
            "type": "select",
            "fields": ["status"],
            "default": ""
        },
        {
            "name": "transaction",
            "label": "Transaction",
            "placeholder": "Any Transaction",
            "type": "select",
            "fields": ["transaction"],
            "subfield": null,
            "default": ""
        },
        {
            "name": "team",
            "label": "Broker",
            "placeholder": "Any Broker",
            "type": "select",
            "fields": ["team"],
            "subfield": "name",
            "default": []
        },
        {
            "name": "price",
            "default": "",
            "options": [
                {
                    "value": "0-250000",
                    "label": "0 - $250,000"
                },
                {
                    "value": "250000-500000",
                    "label": "$250,000 - $500,000"
                },
                {
                    "value": "500000-1000000",
                    "label": "$500,000 - $1,000,000"
                },
                {
                    "value": "1000000-5000000",
                    "label": "$1,000,000 - $5,000,000"
                },
                {
                    "value": "5000000-10000000",
                    "label": "$5,000,000 - $10,000,000"
                },
                {
                    "value": "10000000-50000000",
                    "label": "$10,000,000 - $50,000,000"
                },
                {
                    "value": "50000000",
                    "label": "$50,000,000+"
                }
            ],
            "label": "Price",
            "placeholder": "Price",
            "type": "range_select",
            "fields": [
                "availabilities_min_rent",
                "availabilities_max_rent",
                "sale_price"
            ]
        },
        {
            "default": "",
            "name": "surface",
            "options": [
                {
                    "value": "0-2500",
                    "label": "0 - 2,500 SF"
                },
                {
                    "value": "2500-5000",
                    "label": "2,500 - 5,000 SF"
                },
                {
                    "value": "5000-10000",
                    "label": "5,000 - 10,000 SF"
                },
                {
                    "value": "10000-20000",
                    "label": "10,000 - 20,000 SF"
                },
                {
                    "value": "20000-50000",
                    "label": "20,000 - 50,000 SF"
                },
                {
                    "value": "50000-9999999",
                    "label": "50,000+ SF"
                }
            ],
            "label": "Surface (sqft)",
            "placeholder": "Any size",
            "type": "range_select",
            "fields": [
                "availabilities_min_surface_sqft",
                "availabilities_max_surface_sqft",
                "total_surface_sqft"
            ]
        }
    ],
    // `labels` label mapping for filters, see examples below
    "labels": {
        "type": {
            "special": "Special",
            "industrial": "Industrial",
            "medical": "Medical",
            "other": "Other",
            "multifamily": "Multifamily",
            "flex": "Flex",
            "hospitality": "Hospitality",
            "land": "Land",
            "mixed": "Mixed-use",
            "office": "Office",
            "retail": "Retail",
            "farmranch": "Farm & Ranch"
        },
        "status": {
            "active": "Active",
            "closed": "Closed",
            "escrow": "Escrow"
        }
    },
    // `filters_show_labels` show `filter.label` as a <label> above the filter input field
    "filters_show_labels": false, // Boolean
    // `filters_show_reset` although it shows only when there's an active filter you can disable it completely here
    "filters_show_reset": true, // Boolean
    // `list_heading` display a default heading on the `views.list` view
    "list_heading": true,
    // `list_layout` spacios | compact
    "list_layout": "spacious",
    "sort_by": "name",
    "sort_order": "desc",
    // `google_maps_key` provide custom Google Maps API key for the PSE
    "google_maps_key": null,
    /**
     * `google_maps_style` Array of styles,
     * see interface format at
     * https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyle
     **/
    "google_maps_style": [
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#e9e9e9"
                },
                {
                    "lightness": 17
                }
            ]
        }
    ],
    // `templates` (EXPERIMENTAL), will provide room for more detailed customizations through custom Vue <template>
    "templates": {
        "list_item": "<div style='color:blue;border:2px solid black;padding:20px'><div class='sl-font-bold'>{{property.name}} | {{property.city}}</div>{{property.description}}</div>"
    }
}

Default settings

This mode uses hash to navigate across pages and to track the listings page filters

{
  base: "/",
  history_mode: "hash",
  listings_route: "/listings/:property_slug",
  navigation_mode: "direct", // or "direct"
  router: "default"
}

HTML5 settings

In this mode you can host your PSE at URL https://yoursite.com/yoursubpage/ and generate https://yoursite.com/yoursubpage/listings/property-1. This is more SEO-friendly.

Just so you know, this config also needs server-side redirect settings to be configured.

{
  base: "/yoursubpage",
  history_mode: "html5",
  listings_route: "/listings/:property_slug",
  navigation_mode: "iframe", // or "direct"
  router: "default"
}

QueryString settings NEW!

UPDATE - 2024-05-14 Preferred mode, this will be the default in the next version

With this config, querystring takes over the routing to generate SEO-friendly URLs without additional server-side configuration.

This results in URLs like https://yoursite.com/listings/?listing=property-1

{
  base: "/",
  history_mode: "html5",
  navigation_mode: "iframe", // or "direct"
  router: "querystring"
}

PSE - Single site

Default call to get the data from the building site:

export async function getStaticPaths() {
    const res = await fetch(
        "https://pse-api.sharplaunch.com/data?entity=website",
        {
            headers: {
                "X-Api-Key": "CLIENT_API_KEY",
            },
        }
    ).then((res) => res.json());

    return res.items.map((item) => {
        item.id = item.username.toString(); // make sure the id is a string
        return {
            params: { id: item.username },
            props: { item },
        };
    });
}

Basic iframe to show the building website from the CMS:

<iframe
    src="{item.url}"
    style="width: 100%; height: 100%;"
    frameborder="0"
></iframe>

This call will return all the sites from your CMS, you just need to find the one you are interested to show and display the CMS website in the iframe using the URL inside the item.

Widget

Default embedded code to use the widget for featured properties from the CMS

    <script src="https://sdk.sharplaunch.com/sharplaunch_SDK.js"></script>
    <div id="featuredWidget"></div>
    <script>
        SharpLaunch.featuredWidget.create('CLIENT_API_KEY', {
            el: '#featuredWidget'
        })
    </script>
Last Updated:
Contributors: Carlos Jimenez Fabrgat, gabor-sl, Stefan Olaru