All Collections
Share & embed maps
Create personalized live maps that can be emailed or embedded to customer portals
Create personalized live maps that can be emailed or embedded to customer portals

This step-by-step guide will help you implement customer-tailored interactive maps and embed them into a portal

Sergey Shurygin avatar
Written by Sergey Shurygin
Updated over a week ago

This article will guide you through implementation of customer-specific maps that can be embedded into customer portals or sent to customers by email. A customer's personal map will show only records assigned to this particular customer and will update in real time as you update such assignments.

Implementation is included in your Mapsly subscription!

Your Mapsly subscription comes with implementation services, so we're inviting you to book a web call with our engineer today - to learn more about your use scenario and set up shared maps for you during the call. Start embedding live maps today. You may also ask us for help in chat any time 24/7.

The task

An example real-estate agency has a CRM where it keeps Properties and Customers records. Its account executive should be able to assign properties to a customer or removes existing assignments. One property can be assigned to multiple customers at once.

Each customer should be automatically provided access to the agency's customer portal that should contain a map showing only properties assigned to the currently logged in customer. As the account executive updates customer's assignments, the customer's map should automatically update to reflect the changes.

The customer should be able to schedule a visit to a property by clicking the Schedule visit button in the property popup on the map, which must create a Visit request record in the CRM and a task for the account executive assigned to the client.

Please note that we're using Properties and Customers only as examples - they can be any standard or custom objects.

Prerequisites

This example requires the Pro or Enterprise Mapsly subscription plan and can be implemented for any CRM, spreadsheet or any other data source.

High-level implementation plan (concept)

To implement the example, we'll need to do the following:

  1. Create a "linking" object (module) Properties X Customers that will store assignments of properties to customers: each record in this object will contain a reference (lookup) to the customer and a reference (lookup) to the property, as well as property fields that customers should be able to see on the map. (When a property is assigned to a customer, a new "linking" record is created in this object that "links" the assigned property to the customer,)

  2. Create a Mapsly workflow triggered when a new Properties X Customers record is created that will copy Property fields, like the Property name, to the linking record, so the linking record can act as a fully individual copy of the property record for the related customer.

  3. Create a shared map that only shows a map layer with Properties X Customers records that references the customer id from a URL parameter, while hiding all other objects/layers, as well as the Layers panel altogether.

  4. Create a workflow that will automatically generate a signed shared map link for every new customer by appending the customer ID to the shared map URL from #2 and signing the URL, and save it to the Map link custom field on the Customer.

  5. Create a Schedule visit custom button on the linking object with a custom form available on the shared map that will prompt the customer to indicate the desired visit time and will create the Visit request record and the Task record, and assign both of them to the Customer record owner.

  6. Configure a customer portal with automatic signup of new customers. The portal will have the Map webtab with the iframe that loads the personalized shared map URL created in #3. In this example, we'll be using the Zoho Creator Portal solution, but the same way you may use any other solution that supports registering users with custom fields through its API and embedding iframes with links that can be fetched from the portal's databased based on the logged in user's email address.

To assign properties to a customer, account executives can simply mass-update the Customer multi-select lookup field for the selected properties (for CRMs that support multi-select lookups like Zoho CRM), or create Assign to customer / Un-assign from customer buttons that leverage the Mapsly automation suite to create and remove linking records (outside of the scope of this guide).

(In Zoho CRM, every multi-select lookup field uses its linking module as well, so when a Mapsly user edits it, Mapsly implicitly creates or removes records in this module.)

Step-by-step implementation guide

In this implementation we'll be using Zoho CRM, but the same approach can be used with any other CRM, spreadsheet or any other data source connected via Zapier or Mapsly API.

Customers and Properties objects

In our example Zoho CRM we have the Properties and Customers custom objects that are set up like this:

1- Create a linking object (module) Properties X Customers

In Zoho CRM, which supports multi-select lookup field type out of the box, simply add such a field to the Customer and fill in its properties as shown below:

This will:

  • add a corresponding multi-select lookup field to the Properties object (module),

  • create a new module Properties X Customers, with 2 lookups - on the Customer and on the Property.

While we're here, let's add the Singleline-type Map link field on the Customer which we'll need in #2 to store the personalized map URL for every customer.

Now our Customers module looks like this:

Now, let's add some more fields to the Properties X Customers object so it has all the info about the related Property record that clients may want to see on the map. We need to do this because customers will be actually viewing Properties X Customers records on the map, not Property records, so they'll be only able to see fields from the Properties X Customers object.

For example, if you'd like to show customers the property name, add a Property name Singleline-type custom field to the Properties X Customers object:

Note #1. For other CRMs that don't support multi-select lookups resolved through a separate "linking" object, you would create a similar object with the two look-up fields - one on the Customer and one on the Property - and the Property name, and it will work the same way with Mapsly.

Note #2. For spreadsheets and CRMs that don't support either multi or single lookup fields, you would create a separate sheet (object) with two text fields that Mapsly will be used as lookups by storing the Customer and Property records IDs there.

Note #3. If your CRM or your plan doesn't support custom objects (for example, if you're using any HubSpot plan other than Enterprise), please contact Mapsly support - and we'll add the linking table to the Mapsly System object, which Mapsly will use the same way (since Mapsly can work with multiple data sources in a workflow at once).

2- Create a workflow to copy Property fields to Properties X Customers records

[Under construction...]

3- Create a personalized shared map

Following the this guide to create a shared map with the following configuration:

  • in #1 of the guide: grant access for the Shared map profile only to the Properties X Customers object (don't check the Layers panel setting - to keep it hidden).

  • in #3 of the guide: when configuring the map (being logged in as the shared map user "for setup"), create a map layer on Properties X Customers with the formula Customers equals to {{customer_id}}, where customer_id is a URL parameter. And uncheck the Other layer.


    In the result, when this shared map is opened with a customer_id in the URL, it will only show Properties X Customers records assigned to this customer.

  • IMPORTANT! in #5 of the guide: when creating your shared map, in its configuration popup check the URL signature box - to ensure that only map links that we will generate using workflows can be used in the portal and that end users will not be able to manually replace their customer_id in the URL thus getting access to other customers' maps or omit the customer_id URL parameter altogether thus being able to see ALL Properties X Customers records at once.

    The reason why the URL signature is crucially important here, is that - as described in the article about URL parameters - when a URL parameter used in a map layer is missing, Mapsly will omit the respective condition(s) in the formula thus showing a wider data set, which is NOT the desired behavior when a URL parameter is used to limit access to data for a particular end user.

4- Create a workflow to generate signed URLs for every customer

Create a new Mapsly workflow for the Customer object triggered when a new record is created, and add an Update record action to its condition/actions block. In the action's properties select the Map link field and enter the following target value:

{{SignUrl('your_shared_map_link?customer_id=' + record.id)}}

Here, replace your_shared_map_link with your shared map's URL.

The resulting Workflow and its Update record action will look like this:

5- Create a Schedule visit custom button

To allow customer to schedule visits to the properties they see on the map, create a button as shown on the screenshot below, and make it visible for the user profile of the user used in your shared map:

Add a Form to the button's condition/actions block that will be shown when a customer presses the button:

And add necessary actions to the OnClick's condition/actions block of the form's action button Schedule.

6- Configure a customer portal with the personalized map

Follow this guide to configure a customer portal with automatic signup of new customers. The portal will have the Map web tab with the iframe that will load the personalized map of the currently logged in customer.

In this example, we'll be using the Zoho Creator Portal solution, but the same way you may use any other solution that supports registering users with custom fields through its API and embedding iframes with links that can be fetched from the portal's database based on the logged in user's email address.

Did this answer your question?