2. Building Your Property

Welcome to the Criton App Builder!


Now you're ready to start building your Property App, you will find yourself at the Criton App Builder Dashboard!

The App Builder Dashboard is where you create your App. It also acts as the base for your account and where you can access further support.

See below for a rundown of the features:

  1. Criton Link – click to get back to this dashboard
  2. Home Button – another way to link back to the dashboard
  3. Tutorial Videos – this will take you to our helpful video bank
  4. My Account – access all of your account details
  5. Log Out – log out of your Criton App Builder
  6. Visit Support Site – quickly link to our Support section on this site
  7. Add Your Property – select this to start creating your Pip app
  8. Live Chat – click for Live support!

 

The first step!

Add your Property

Once you’re ready to get started, click the Green “Add your Property” button and enter the Property name into the pop-out box. Don’t worry too much, you can always change this later!
Click "Add your Property" in the pop-out and you’ll see that your new app appears in your dashboard.

There’s no limit to how many Properties you create, and they will all be listed here.

You can view and control a lot from here, including:

  1. Delete – to remove your Property completely, click here and follow the instructions
  2. Edit – click here to start designing!
  3. Publish – choose this option when you’re ready to publish your Property to Pip
  4. Copy – helpful if you want to duplicate your complete Property
  5. Status – shows the current status of this Property App


Start building!

Once your ready, click Edit and we can start building your App!

The next page you'll see is the Criton App Builder itself and where you can build your Property by adding pages, features, images and text!

The main functions of the CMS are:

  1. Editor – this is where you start adding pages, designing and altering colours
  2. Advanced Settings – learn about adding advanced features
  3. Pages – here is where you start adding features
  4. Styling – add a logo or image for your Property
  5. Publish – get your Property live on Pip!
  6. Preview Phone – view the current state of your app live
  7. Add Pages – select the pages and features you wish to add

 

Adding pages

To start adding pages to your App, start clicking from the “Add pages” section.

We have a variety of different pages you can add, including pre-built pages in which we have offered some boxes for you to fill in, and Custom pages for you to build from scratch!

Edit & Move Pages

With all of the pages, there are a few sections that can be customised, including the page name and icon.

  1. Page Name – click in the box and type the name you wish to change it to
  2. Page Icon – clicking here changes the page icon image.

You can select a new icon from our Library.

When you click OK, the image will appear in the Feature Icons list and you can then click to add it to your app.


Once you’ve added your pages, you can change the order in which they appear in the app, hide them and delete.

When you hover over the page in the scrolling list at the top, more options appear.

  1. “+” – use this to move the page. Click on the plus sign then drag it along the list to reposition its order on your app.
  2. “x” – clicking this will delete the page. Don’t worry – you have to confirm the deletion before it disappears!
  3. “Show in app – tick box” – if you want to keep the page but not have it showing in your app, you can untick this box to hide the page. The box will turn grey but not be deleted.

 

The Different Pages



Custom Page: 
This is the most widely used and versatile page on the app builder. It offers the flexibility of adding text boxes, phone links, email links, URL weblinks, PDFs, location buttons, images and videos.

When you add a Page, you have a number of options to start building the content.

  1. Text Box – click to add text to your page
  2. Phone – allows you to have a link to a phone number
  3. Email – creates a link to send an email
  4. Link – adds a URL link for a website
  5. Attachment – attach a PDF document to the page
  6. Location – create a location pin to Google Maps and list address
  7. Single Image – add a single image to the page
  8. Gallery – add multiple thumbnail images to the page
  9. Slider Gallery – add multiple sliding images
  10. Video – embed an uploaded video or linked from a website



Custom List: 
The Custom List is widely used and allows the user to categorise sections of information. It works in a similar way to the Custom Page, where you can add text boxes and links, but you can add individual pages in list form.

When you add a Custom List, you have a couple of options to add the content.

  1. Group – choose to create a group
  2. Page – choose to create a page
  3. Enable search – select to enable search in the menu by text (titles) or added tags

If you want to group the pages in your Custom List together, you can select to create a Group. For example, if you wanted to create a page called “What’s Near Us”, you may want to create Groups called “Eating & Drinking”, “Local Shopping” & “Local Attractions”.

Within these Groups, you can then add Pages for each of the items listed.

To start, click to add a Group, then add a title.

You can add as many Groups as you need to.

  1. Add Page – click here to add a page to the Group
  2. Trash – click to delete Group
  3. "+" - select this to drag and move the order of the Groups

You can add a page by either selecting the Add Page button at the top, or add directly to a Group as above.

Once you’ve added a Page, you can add a page title, page subtitle and add any keywords if you have enabled the “Tags” checkbox at the top of the page. To access the Pages within the Group, or the information within the page itself, click the drop-down arrows   

You can also add an image – the minimum size for this is 80x80 pixels.

You can assign the Page to a pre-existing Group by selecting it from the drop down, or it can sit outside of a group.

If you choose to add it to a group, you will see it nested in the Group.

Again, you can add as any Pages as you need!

You’ll see it has also updated on the preview screen too.

You can view the content of the Group or the Page by clicking the Arrows on the top right of the page. And you can edit the Page itself by clicking the Pencil icon.

Once you come to edit the Page, you’ll see that it is the same as the Custom Page.




Pre-Built Template Pages:
We have a number of pre-built pages on the App Builder, allowing you to use our templates and customise them to suit your needs.

They are based on Custom Pages and Custom Lists and these pages have Text Boxes and Links already added, so all you need to do is fill in the boxes with your own information.

 Our pre-built pages are:

  • Accessibility
    - give any information for guests that may have accessibility requirements, such as disabled access
  • Contact
    - list all of the contact information for yourself or any key contacts
  • Emergency Services
    - guests might not be from your area or even country, so any emergency numbers are handy for them
  • Find Us
    - here you can add your address, a location button and other helpful tips to find your property
  • Getting Around
    - list any local public transport information, cycling routes and walking tours
  • How-to
    - helpful hints and guides for using appliances in your property
  • Places
    - guests will appreciate any tips on the local area you may be able to offer
  • Takeaway
    - for guests wanting a night in, list local takeaways and delivery companies
  • TripAdvisor
    - if you like you guest to leave a review, prompt them to visit your TripAdvisor page
  • Wifi Password
    - an important one for most guests!

When you add one of our pre-built pages, you have a number of options to start customising the content.

We have already added some boxes and links which you can edit and fill in with your own content.

You are also able to add further text boxes, links and images (as you would with Custom Pages).

 

Other Pages

We have a few other pages too that can be added to your app to offer different functionality.

 

Facebook: 
Among the features you can select is a Facebook feed on your app!

All you need to be able to do this is your Facebook Fan Page Id. This is normally the end of your Facebook URL – eg https://www.facebook.com/piptravelsHQ. You can also add the full URL.

 

Weather: 
A great and simple page to add to your app is the Weather page! It’s easy to add and allows your users to see the weather where your property is located.

To use, simply click to add the page, enter your Country, Postal code or city and unit you wish to display the weather (Fahrenheit or Centigrade), then press save!



Link Pages:
Another easy page to add is the Link feature. This is unique as rather than opening up a page on your app, when the user clicks it they will be taken straight to a specified URL which will open up in their phones browser.

They’re simple to add and you can use as many as you need.

As with all the pages, once you click to add the page you can change the icon and name - for example if you’d like to add a link to your Booking Site you can call the page “Book Direct”.

Once you’ve entered to URL you wish to link to, click “Save” and you’re done!

Please note that you won’t be able to view these links on your Phone Preview on screen.



 

Check In / Out Forms:
Two of our pre-built Forms assist with Check-in and Check-out. These forms allow your user to request an earlier Check-in or later Check-out, with custom display messages & replies to show once the form has been filled in.

The process to add them to your app is the same for both.

Select the page and click to add. As with all pages you can change the page name and image if you wish to.

Next, enter the email address where you want the requests to go to.

Now add a custom message that will displayed at the top of the form. This can be used to explain your normal Check-in/Check-out policy, along with any charges that may be incurred by varying them.

The reply message will appear on-screen once the form has been submitted. This can be to let users know that their request has been received and to expect a reply soon.

When all the fields are completed, click “Save”.



Forms: 
A handy feature to add to your app is the Form option. This is similar to the Early Check-in/Late Check-Out form, but it allows you to build your own content.

This can particularly helpful if you’d like to add a “Feedback Form” or offer a “Information Request” form.

To do this, select the Form page. Rename, add your own icon and start adding fields!

First click “Add a section” and add a title to your form.

Next add the Recipient email address. This is where you would like the Form to be sent once completed.

The next step is to add fields to your form. Click “Add a field” and start entering information into the pop-out box.

First choose a Field name. For example, “Your Room Number:”. Then select a Field Type.

You can also decide whether to make this field/question “required” so that the user has to answer it before submitting the form.

These are the responses to the question, and only one can be selected per question (excluding 7, 8 & 9).

The types are listed below:

  1. Single Line Text – useful for names
  2. Multi Line Text – a user can multiple lines of text to respond
  3. @ – prompts the user to add an email address
  4. 123 – allows the user to add a numerical response, for example a phone number
  5. Clock – lets the user add a time and date response using a calendar
  6. Map – prompts the user to share their location in their response
  7. Checkbox – multiple options can be added and the user can select as many options as required
  8. Radio Button – similar to checkboxes but a user can only select one response
  9. Drop Down – the same as 7 & 8 but the user can select a response from a drop down menu
  10. Image – gives the user the option to attach an image to their response


You can also add further Sections to the form if required.

Once you’ve added all of the questions, you’ll see the form built in the preview phone and be able to test it here too.



Bookings: 
Another great pre-built form - this allows you to take bookings directly to your property. 

Simply click the + button and fill in the location of your property and an email address where the request is to be sent, and the user can send a form with their booking requirements. You can use this too if you have multiple properties.



Images: 
If you'd like to have a page dedicated to you images of your property in a gallery, here is where you add it! 

Simply click on the "+" and select "My Images". Then give your Gallery a name and click on the "Send your pictures" link to upload the images you need. 

If you'd like multiple galleries (for example, "The Kitchen", "The Bedroom" "Surrounding Areas" etc) just click the "+" again to add a further gallery.


 

RSS Feed: 
One of our more unique pages is the RSS Feed. RSS (Rich Site Summary or Really Simple Syndication) allows you to display a simple version of a feed, with or without images. This is handy for blogs, event feeds and news websites.

The example below shows how to add a Sky News RSS Feed.

First of all, add the page to your app. Next you can choose to change the page icon and name to something more suitable.

Then search online for the RSS feed link you want to add. For example, in a search engine, “Sky News RSS” will direct to a page with the links you need.

Find the link you wish to add, the copy the URL, e.g feeds.skynews.com/feeds/rss/home.xml

Paste this URL into the relevant box on the CMS, choose whether you wish to display images and click “Save”!

 

About now, your app should be looking pretty complete, hopefully something like the one below...

Styling

Once you have added all of the pages you need, the next step is to add an image to the homepage of your Property.

To do this, simply select the Styling tab in the Editor menu on the left hand side.

Click on the image box and upload a picture from your computer. This needs to be at least 810 pixels wide and 423 pixels tall. It also needs to be in jpeg format or png.

 

Publish!



Congratulations, you're at the final step of getting your app live! Move onto Step 3 to find out how.