How to Configure the Room Booking Web Part

Use the Room Booking web part to quickly see rooms which are available and be able to book them out.

This webpart is part of the Percy Web Parts app which is included in the Percy site templates. If you do not see this webpart, add the Percy Web Parts app to your site.

A benefit of this webpart is it gives people a visual representation of where the room they are booking is located. The Room Booking component requires the following pieces in order to work:

  1. Microsoft Visio: Visio is used to create the diagram you want to display on the page. Visio is a useful tool which includes the necessary shapes and images in order to build scaled diagrams of a room or Office spaceResource Booking Web Part
  2. SVG: An SVG is used as a two-dimensional graphic so that you can make it interactive/clickable. Once you have created your diagram in Visio, you can export the diagram as an SVG so that it becomes interactive when uploaded to your Intranet. As an example, you will notice when I hover over the meeting rooms in the diagram, you can see they become selectable with a dark grey tint
    Resource Booking Web Part 2
  3. Room/Equipment Mailbox: In order to make a conference room bookable, you need a way to make those rooms. The best way to do this is to create a room/equipment mailbox.
    The component we have built will need to link the diagram to the necessary room/equipment mailbox that’s been created by your IT Administrators. For example, in order to complete my setup of the resource booking component, I will need a room mailbox set up for Gabba, Trent Bridge and the Newlands meeting rooms.

    Resource Booking Web Part - Room Manager

    The following sections will run through the process of setting up your Visio diagram and exporting to SVG before configuring the component on your Intranet.

Adding the Web Part

Use the Room Booking web part to quickly see rooms which are available and be able to book them out. This component also provides a nice graphic of the rooms to give users a better idea on what to expect. Below will outline the steps for adding the web part to the page and linking it up with your graphic and meeting rooms

For a full guide on the Room Booking component from creating the Visio Diagram to uploading and configuring the web part, see here

  1. If you're not in edit mode already, click Edit at the top right of the page.

    Resource Booking Web Part - Edit Banner
  2. Hover your mouse above or below an existing web part or under the title region and click the plus sign and then select the Room Booking web part
    Resource Booking Web Part - Plus Web Part
    roombooking-setup-1
  3. Click on the edit pen in the top left corner of the web part to configure it.
    Resource Booking Web Part - Resource Book Edit
  4. The details pane will then appear on the right hand side. Providing the following options:
    1. Manage Plans: Upload an SVG file of the plan you want to display.
    2. Availability start hour: This will be the start time from when users are able to book the resource
    3. Availability end hour: This will be the end time for when resources are available to book
    4. Availability interval: This will be the interval of meetings created. Meetings can be longer than what you set here, and will take up multiple slots as required.
      Resource Booking Web Part - Resource Book Config 2
  5. Manage Plans: Upload an SVG file of the plan you want to upload. Once uploaded, name the plan which will appear as the heading.
  6. By clicking on manage rooms, you can set which email addresses should be linked to this resource.
    Resource Booking Web Part - Resource Book Manager
  7. Once saved, you will see the SVG appear with the tile you gave it in manage plans. People can now start booking rooms.