Overview

You would like to set up the Contact button to display general information such as your business location, website URL, contact info (phone and email), and operating hours. You can set the Contact button to display Location details or Directory/Person feature type details.

Solution

The Contact Feature is recommended for the following industries:

Community/Directory
Retail/Restaurant Chains
Small Businesses

Adding the Contact Feature

Navigate to the Create -> Build section of your app dashboard.
Click Add Feature.
Choose the Contact feature from the menu, then click Select.
Name your feature, then click Add. Your new feature will now appear in the left-side menu.
Now you will be presented with the screen where you will be able to add content.

Adding Content to the Contact Feature

Having navigated to Create -> Build -> <Name_of_Contact_Feature> -> Content menu, you can rename the feature and add locations or contact persons.

Note: For all optional fields, if left blank or hidden, the attributing button or field will not be displayed in the app.

Under Screen Info, change your Screen / Feature Name or leave as-is. This is the name that will appear in the app's feature menu (e.g. Location instead of Contact).

Under Contact, click Add Contact. Complete the fields below, then click Add. Repeat this process for each location and directory/person feature type you are showcasing.

For Location:

Field	Description
Header Text Line 1 and Header Text Line 2 (requires Hazel or later)	Use these fields to name your location whatever you like (e.g. Mission Location and San Francisco). They will serve as the top and bottom lines of the location name.
Website (Optional field)	Enter the URL for the location’s website. This must start with the http:// prefix. If the client or business does not have an official website, a Yelp or Facebook page will work just as well.
Email (Optional field)	Input a valid email address for this location. When users click the one-touch Email button, this email address will auto-populate in the To field.
Telephone (Optional field)	Input a valid phone number for this location. When users click the one-touch Call button, this is the phone number it will dial.
Opening Times (Optional field)	Click Add Opening Times to select the location's operating hours. When you are done, click the green checkmark. If you choose not to input opening times, the Opening Times field will not show. Input Day: Specify the day of the week or your preferred text (e.g. Monday, Mon - Fri, Weekdays, etc.) Open From: Specify the opening time (e.g. 9 am or Noon) Open To: Specify the closing time (e.g. 5 pm or Sunset)
Address	Search for the address in the Enter a query field or enter the coordinates in the Latitude or Longitude fields. When you use the coordinates option, Google Maps will pull the nearest address.
Distance Type	Specify whether the distance should appear in Kilometers or Miles.
(Show images) Left Image and Right Image (Optional field)	Upload two images (288x144px in PNG format) for this location. These can be the logo, pictures of the location, or anything that represents the business. These images can also be linked to an internal app feature, or hyperlinked to a specific URL.

For Directory / Person:

Field	Description
Contact Name: Name Row 1 and Name Row 2	Enter the contact description names here; they will also be displayed on the header image overlay.
Website (Optional field)	Enter the URL for the location’s website. This must start with the http:// prefix. If the client or business does not have an official website, a Yelp or Facebook page will work just as well.
Email (Optional field)	Input a valid email address for this location. When users click the one-touch Email button, this email address will auto-populate in the To field.
Telephone (Optional field)	Input a valid phone number for this location. When users click the one-touch Call button, this is the phone number it will dial.
Mobile Header Image	Recommended size: 750px x 400px Note: On mobile devices, the thumbnail for this Contact is generated by the Mobile Header Image and thus it may be adjusted accordingly to fit. Please make sure that you choose an image that will look good both as a thumbnail and as a part of the header image of the contact
Tablet Header Image (Optional field)	Recommended size: 1536 x 636px Note: On tablet devices, the thumbnail for this Contact is generated by the Tablet Header Image and thus it may be adjusted accordingly to fit. Please make sure that you choose an image that will look good both as a thumbnail and as a part of the header image of the contact
Address (Optional field)	Enter a specific address here or enter the specific Latitude or Longitude values in the fields below.
Distance Type	Select between Kilometer and Mile for how distance will be viewed in the app.
(Show Images) Left Image and Right Image (Optional field)	Upload two images (288x144px in PNG format) for this location. These can be the logo, pictures of the location, or anything that represents the business. These images can also be linked to an internal app feature, or hyperlinked to a specific URL.
Description Field (Optional field)	Enter text within the WYSIWYG text editor to describe the directory/person.

Click Save on the top right-hand corner when you are done.

Custom Design

If you would like to create a custom design for this feature instead of using the Global Design, please refer to the article Overriding the Global Design for a specific App Feature via Custom Design.

Testing

By navigating to Create->Build-><Name_of_your_Contact_Feature> you will be able to see the Contact Feature you created.

For example, within the list view, the Contact Feature below called 'Location', will show a pin icon and the directory/person feature will show a thumbnail image of the header image pulled from the feature.

Articles in this section

Set Up the Contact Button