How to implement the Interactive Reservations Property Map (floorplan)
- If you are a designer/developer and have any questions about adding the Property Map, please reach out to us in Slack. If you aren't in our Slack channel, email support@commerce7.com for an invite.
- Check out the free and fast Reservation Map Generator developed by 5Forests. Upload your property map, add your tables, enter table codes and titles, copy the JSON code to your clipboard, paste into Commerce7.
Adding a Reservation Property Map
- In the Admin Panel, go to Developer > Reservation Property Map.
- Click the Add Reservation Map button.
- Give the Property Map a Title, (which is internal facing only). The Property Map Title typically corresponds to the Location name. This allows admins to easily switch between multiple Property Maps when needed.
- The next step is to plot where the tables are in the map image using Property Map Points. To do so, we create a JSON object as shown below:
- Use the "top" and "left" keys to plot where the tables are. The values for "top" and "left" should be in percentages. In the example above, Table 10 is located 43% from the top of the image and 7% from the left border of the image.
- Once you have plotted the tables, you will label them. The "code" and "title" keys can be filled in with any value you like to represent these tables. In general, it's filled with the table numbers.
- Create a JSON object for each table you have in the Map.
- Next, select Upload Image > select your floor plan image > select Upload.
- Click the Save button.
Tip: We would recommend cropping out any areas of the floor plan where there are no tables. The image uploaded should focus on the tables.
Creating Locations with Property Map Code
Once your tables are created, it's time to create Locations with the codes.
- Navigate to the Reservations Portal by clicking on the icon in the upper right. Choose Reservations.
- From the Reservations Dashboard, choose the Settings tab.
- Choose the Locations section.
- Click the Add Location button.
- !!IMPORTANT!! When adding the tables, ensure the Property Map Code field is filled in with the same exact code as the "code" key the JSON objects you have set up.
- Click the 'Add Table' link to add more.
- Once you've added all of the tables, click the Save button.
- If you need to make any edits/deletions, you can always go back to the Tables tab in the Location.
