The OC Service content type is used to help guide your community through completing tasks, whether online or offline. The content type is structured to give step-by-step instructions on various methods, as well as content such as contact details, location details, additional documents and links members of your community may need to access the service.
The most valuable part of the service pages are the Modes of Interaction which offer clearly defined and numbered instructions and can easily highlight Call-to-Action buttons.
The OC Service content type is formatted with 2 WYSIWYG areas – one above the Modes of interactions and one below them. We have seen great use of these to introduce the service in the top WYSIWYG and give any important details your community might need to complete the service (any important documents they need before trying to access the service, for example). The bottom WYSIWYG is useful for giving estimated wait times, or any other supplemental information your community might need. You could also use the Accordion panels in the Supporting information to add expandable accordions for FAQs about the service.
This video will take you through creating an OC Service page:
How to create an OC Service page
- Right-click in your site tree where you would like to create the page.
- Choose Create page
- Select OC Service as your content type
- Fill in the necessary fields
- Add any introductory or supplemental information to the WYSIWYG Editors
- Publish your page
What to include on your OC Service page
| Field | Function |
| Page name | Completes the unique page URL |
| Service title | The title displayed on listing pages, in search results and as the title of the page |
| Add service summary | A brief overview of the service for any listing pages and search results |
| Add image |
Main image for the service used in the listing page and the OC Service page |
| Show image on details page | Check this box to show the page image on your service page. Leaving it unchecked will ensure it only appears on listing pages and search results. |
| Modes of interaction | |
| Modes (separate each step of the mode with a 'Heading 3') | Add a panel here for each method of accessing the service. For more information about how to do this, see Modes of interaction below. |
| Number each step | Check this box to add numbers to each step of a Mode of interaction. These steps will correspond to each 'Heading 3' in the WYSIWYG content of each Mode. |
| Contact details | |
| Contact phone number | Phone number of the contact person or organization |
| Alternate phone number | Alternate phone number of the contact person or organization |
| Contact fax number | Fax number of the contact person or organization |
| Contact email | Email address of the contact person or organization |
| Location details | |
| Venue name | Name of the location for the service (if applicable) |
| Street address | Street location for Google maps |
| Locality | Suburb of the service for Google maps |
| Postal code | Post code or ZIP code of address for Google maps |
| Latitude Longitude (in decimal "lat,lon" format) | The latitude and longitude to determine the service's location on a map. You can add this yourself, or it will be automatically generated from the street address when the page is published.
We recommend manually entering the lat/long for services that don't have a fixed address. This will drop a map pin at the coordinates you specify. Note: if you are adding this manually, please ensure the 'Overwrite lat/long values when the page is published' setting is set to 'No'. Access this setting from More > Site Management > your site > Settings > Location |
| Supporting information | |
| Accordion panels |
Add additional content in a collapsible accordion panel by clicking the 'edit' icon to open a WYSIWYG Editor. Note: These accordions will appear at the bottom of the page below any supplemental WYSIWYG content. |
| Side panels |
Add additional side panel content by clicking the 'edit' icon to open a WYSIWYG Editor. Note: While these side panels will normally appear in the right-hand column, on a mobile device the side panel will appear at the bottom of the page below any supplemental WYSIWYG content and supporting Accordion panels |
| Add supporting links | Internal or external web links displayed in the 'Related information' section on the page. |
| Add supporting documents | Uploaded document displayed in the 'Related information' section on the page. |
| Add common search terms people would use when looking for this content | Keywords or metadata to boost page to appear in search results |
| Content labels | These labels organize your content internally (i.e. your site visitors won’t see the labels). You can also make content lists out of these labels. |
Modes of interaction
Modes of interaction refer to each method your community can use to complete a service. They are presented in a tab structure in the main content area.
To add a Mode:
- Expand the Mode of interaction accordion menu in the Overview tab of your page admin
- Select Add to open the Panel Title options
- Add a title for the mode of interaction in the text box area
- Click on the 'Edit' icon to open a WYSIWYG Editor for that mode of interaction and use the editor to explain one method for your community to access your service. Separate each definitive step with a Heading 3 style if you will be numbering your steps.
Note: avoid adding any interactive content, such as forms, maps, calendars or images, as tabbed content is suited for static content. Instead, we recommend adding any relevant Call-to-Action buttons to any suitable Modes of Interaction - Select Save Content and Close to close the WYSIWYG Editor
- Add any additional Modes by following steps 2-5
Note: we recommend no more than 5 Modes of interaction, or the tab structure will be stacked. This stacked presentation will also present on mobile devices with more than 3 Modes of interaction. Additionally, it is best to keep your tab titles as short as possible, as long tab titles will lead to tabs being stacked on desktop. - Check the Number each step box, if you wish to separate and automatically number each step
- Save your page
Are you using OC Service pages in conjunction with OpenForms? Any Call-to-action buttons can be used to link to embedded OpenForms. Then, set up your OpenForm to redirect to a page in OpenCities with a content list with related content to complete the user's journey through the service. Learn how to do this and help residents discover related content and stay on your site with the help of content lists based on content labels.
Troubleshooting and tips
- If your Modes of interaction are showing in a stacked format, it's because the tabs are expanding beyond the main content area of the page. We recommend using between 2-4 different modes, to ensure that the tabs will display properly.
- Try to avoid using tables or interactive content, such as forms, maps or calendars, in your Modes of interaction. Tables have a tendency to override the proper presentation of tabs, and affect how the information in each mode displays. Tables are also not responsive in tabbed content, which will not meet accessibility requirements.
- If your service page is not displaying in navigation menus and landing pages, make sure the 'Hide this page from navigation menus' box in the Settings tab is unchecked.
- If you're using a listing page for your services, make sure they are not hidden from search. Go to the Settings tab and ensure that the 'Hide this page from search' in unchecked.
- If your numbered steps are not showing, first ensure that the Number each step box in the Modes of interaction menu is checked. If they're still not showing, go into the WYSIWYG Editor for the Mode of interaction and make sure there are no extra tags surrounding the H3 heading in the HTML. Look for extraneous <div> tags, as there are in this example:
For this example, the numbered steps will only present if the HTML looks like this: