Guides

Spaces Installation & Configuration Guide

In this guide, you will find instructions on how to install, configure and place the Spaces plugin on your WordPress website.

Suggest Edits

Prefer to watch? Here’s the video version.

Overview

Before you begin, ensure you have received the following materials from your Engrain Implementation Specialist.

  • Spaces-Package.zip
  • SightMap API key
  • SightMap Embed URL
  • SightMap Asset ID
  • Color Configuration Guide
  • FAQs
  • Troubleshooting Guide

Contents

  1. Installation
  2. Configuration
  • Part One: Connecting Your Pricing and Availability Feed to Spaces
  • Part Two: Creating a New Asset
  1. Page Creation
  2. Customization
  • General
  • Floor Plan
  • Units
  • Advanced Options
  • Tags
  • Custom Filters
  1. Uninstall Process

Installation

Spaces requires a combination of plugins to become operational. You will need the Spaces-Package.zip — if you have not received this, please reach out to your Implementation Specialist.

  1. Extract the spaces-package.zip which contains two WordPress Plugins
    Advanced-custom-fields-pro
    Ecs-spaces
  2. Navigate to the website’s WordPress CMS admin dashboard and log in.
    Navigate to Plugins > Add New > Upload
    Install and activate advanced-custom-fields-pro if you do not already have the plugin installed with your theme.
    Install and activate ecs-spaces

Step One

Configuration: Connecting Your Property Management System Feed to Spaces

During the configuration phase, you will connect your pricing and availability feed to Spaces. You should have received the API key from your Implementation Specialist. If you have not received the API key, please reach out to your Implementation Specialist.

  1. Navigate to the Spaces menu item.
  2. Select SightMap API.
  3. Enter the corresponding SightMap API key, provided by your Implementation Specialist.
  4. Connect the desired property(ies).

  5. 📘

    Note: The Spaces plugin requires a pricing & availability process configured in Engrain’s systems in order to successfully connect the property in the WordPress site. Shortcode can be obtained from the Spaces Asset list on the backend.If you encounter an error, please contact your Implementation Specialist.

  6. Select Manage.
  7. Select the correct pricing and availability feed for your property.
  8. Wait until the Spaces plugin finishes importing the data.
  9. Select Manage.

  1. Click into the Pricing & Availability, Units and Floor Plans tabs to confirm the tables have been filled correctly. If when clicking on the unit or floor plan tabs, no data is present or an error is shown, retrigger the import function by clicking on the Import Now button. If this does not resolve the issue, please contact your Implementation Specialist.
  2. Successful imports will take you back to the original page. If your import was unsuccessful, you will see an error message. If you get an error message, contact your Implementation Specialist.
  • See example page after a successful import below

Step Two

Creating a New Asset

  1. Navigate to the Spaces menu item and select Assets. Click to access the settings.
  2. Click on Add New to create your property(ies) record.
  3. Enter your property's information:
    • Name. Your property's name. Example: The Milo
    • SightMap embed URL. Provided by the Engrain Implementation team.
    • Apply provider. Select your online leasing provider from the dropdown.
    • Revenue Management. Checkbox Available.
    • SightMap Asset ID. You should receive your Asset ID from the Engrain Implementation team. Alternatively to locate your SightMap Asset ID, navigate to Spaces > SightMap API. Click ‘Manage’ next to a selected property, and see ‘Asset Details’ in the box to the right

  4. To import your property's data, select Import Asset Data. The plugin will retrieve the floor plan and unit data from SightMap.com and automatically create records for them in the CMS.
  5. Select Publish to create your asset
  6. Navigate to Spaces > Global Settings > Customization. Then set Enable Customization to Use Global.

Page Creation

Now that you have installed the plugin and have your pricing and availability set up, it’s time to create a page for Spaces to operate on! Once the page has been created and Spaces is present, you will be able to customize the front end display to meet your needs and preferences.

To place Spaces on an Apartments page via WordPress shortcode, do the following:

  1. From the Wordpress dashboard, navigate to Pages.
  2. Click ‘Add New’
  3. Create a ‘Floor plans’ or ‘Apartments’ page that is compatible with a standard WordPress shortcode.
  4. Add the following shortcode to the desired section, using the Wordpress ID of the asset ID post in place of "YOUR-CMS-ASSET-ID":
    [spaces asset_id=”YOUR-CMS-ASSET-ID”]
  5. Publish your page and add it to the main navigation

Customization

Below are the options available for customizing the front end display for Spaces. Ensure that you select Update after any customization you make in the CMS. Any change you make during this process may take up to 15 minutes to display on the front end of your website. Engrain will provide a list of colors unique to your property. Once applied, the colors can be edited.

General:

  • In the Spaces > Global Setting > Customization section, first apply the 18 unique colors that are provided in your Color Configuration Guide. Engrain has pre-selected colors that ensure WCAG 2.1 compliance. Note that Spaces will populate with a default color palette applied until custom colors are selected. If you have not received a Color Configuration Guide, reach out to your Implementation Specialist.
  • Configure the Spaces Global Option Overrides settings:
  • To show all units per floor plan, enter -1 into the Max Units Per Floor Plan Display box. If you have a custom number of Max Units per Floor Plan you would like to display, enter that amount in the field.

Availability: The three options for display of availability are shown below.

Labels: This section allows for customizing the labels of the view tabs (seen below)

The view tab labels default to Unit, Plan, and Map. If you would like to customize these labels, there are fields available to do so. Options to:

  • Update the disclaimer and ‘no results’ messages here.
  • Disclaimer: The field allows for any custom copy to be entered as a disclaimer. This message will appear on all floor plan, unit, and detail tabs. You may also use an outbound link in this section.
  • Additional Status Text: Custom text in this field will appear next to the status count label on the unit/floor plan details view.

  • 📘

    Note: The CMS does not limit the amount of characters that you can add to the labels. However, note the space for button elements and labels are limited and adding too much text to these areas could adversely impact the front-end display. We recommend keeping the label to around 10 characters.

Filters: Manage the Price, Date, and Room filters.

  • Hide Price, Date, or Room filters based on preferences
  • Configure options such as price range options and set minimum and maximum ranges
  • Create new custom filters
  • This is especially useful when filtering out floor plans with dens or penthouses.

📘

Note: The Room filter is required and cannot be hidden.

Tabs: Customize the order that the Floor Plan, Units and Map tabs appear in. You can also hide the tabs all together by checking the ‘Hide Tab Switcher’ option.

Sorting: Select from the dropdown the desired default sort order for both floor plan and unit lists.

Plan Tab Options: By default, floor plan area displays the minimum area value of the units associated with it. Enable this setting to display the min-max range of all unit areas associated with the floor plan.

Custom Links: Enable the option to display additional call-to-action links at the unit level.

Modes: Debug Mode is reserved for troubleshooting typically by a website developer. This mode will log error information in the console and display on the front end.

Floor Plans

  1. Navigate to the Spaces menu item and select Floor Plans. Click to access the settings.
  2. Select the Floor plan you would like to customize by hovering over the floor plan name and clicking Edit.
  3. Customize your floor plans by selecting from the following options:
    • Features: Option to include a customized floor plan description. This is primarily used for highlighting any special features unique to that particular floor plan.
    • Floor plan Amenities: This allows you to add unique amenities to a floor plan. This will display on the floor plan details view.
    • 360 Tours: Include a link from any virtual tour provider.
    • Gallery: Add images specific to a floor plan. The gallery will be available on the floor plan view and the floor plan details page by clicking on the camera icon.
    • Spaces: This section will include your SightMap Floor Plan ID and the SightMap Asset ID.

    1. 📘

      Note: These fields are automatically populated during the import and should not to be altered.

    • Advanced: This field is dedicated toward assigning floor plans to a custom filter(s) that you would have created in past steps. If no custom filter(s) have been set up, this section does not apply. If you do have custom filters, reference the Additional Options section.

Units

  1. Navigate to the Spaces menu item and select Units. Click to access the settings.
  2. Select the Unit you would like to customize by hovering over the unit name and clicking Edit.
  3. Customize your units by selecting from the following options:
  • Unit Amenities: This allows you to add unique amenities to a specific unit.
  • Unit Specials: This allows for adding promotional content at the unit level and includes the option to set an expiration date. On the front end a ‘Special’ tag appears on the unit view and unit details view.
  • Unit Media: Add images and 360 tour links to a specific unit.
  • Advanced: This field is dedicated to assigning units a custom filter(s) that you would have created in past steps. If no custom filter(s) have been set up, this section does not apply. If you do have custom filters, reference the Advanced Options section.
  • Spaces: This section will include your SightMap Floor Plan ID, SightMap Unit ID, and SightMap Asset ID. _Note: These fields are automatically populated during the import and should not to be altered.
    Advanced Options
    Spaces Tags: These serve as unique markers for units and/or floor plans. Some examples of tags include: Den, Renovated, Balcony, etc.) These tags will appear on the unit view and unit/ floor plan detail view.
    Navigate to the Spaces menu item and select SpacesTags. Click to access the settings.
    Provide content for the Name, Slug, and Description for the tag.
    Click Add New Spaces Tag.
    The tag(s) you create should appear listed on the right side of your display.

  • 📘

    Note: There is also an option to quick enter a tag in the Spaces Tag module displayed on the right side of the Dashboard.

    Navigate to the Spaces menu item and select Units/Floor plans. Click to access the settings.
    Select the Unit / Floor Plans you would like to customize by hovering over the name and clicking Edit.
    Enter the intended tag(s) into the Spaces Tag module on the right hand side of the dashboard.

Custom Filters

  • These filters will appear on the filters modal on the unit/floor plan view.
  • Navigate to Spaces Global settings
  • Click on Filters tab > Custom Filters
  • Click Add Filter
  • Input your desired:
  • Filter Name: This serves as the front end label of the filter
  • Filter Type: Choose Select
  • Active: Check the box to display filter
  • Display as Core Filter: Leave unchecked
  • Filter Options: Click Add Option
  • Option Label: The name of the option that displays in the dropdown for this filter
  • Option Value: “.tag-[slug of tag]” Example: “.tag-balcony”
  • Continue to add more filter options as needed
  • When all filters have been created, click Update
  • Navigate to Spaces Asset
  • Click Edit
  • Click Clear Spaces Data Cache to see your changes updated immediately

Complete

You now have successfully installed, configured, and customized Spaces onto your website!

Uninstall Process

If for any reason you need to remove Spaces from your website, below are the instructions to do so.

  • Deactivate the Spaces plugin.
  • Only deactivate Advanced Custom Fields if it was not already present during install.

It’s now safe to delete the Spaces plugins, only delete ACF if it was deactivated in the previous step.

Updated about 1 month ago