Service page

A flexible landing page linking to informational and transactional resources that make up a program or service.

Why use this content type?

Service pages help Mass.gov visitors navigate the site by highlighting and organizing useful links. This visually-appealing content type is not designed to include a lot of text but does offer flexibility for displaying links through buttons and text links (Flexible Link Groups), and image links (Featured Item Mosaic).

Compare components available on Info Details, Organization, Promotional, and Service pages.

See examples of Service pages that you can use as models.

Alternatives to Service pages

Use a Promotional page if you need a navigational page for timely content and a single call to action. Use an Information Details page if you need a flexible content type to display informational content including lots of text.

Banner

Service name

This is your page’s title. It’s the first thing your audience will see, so make it clear and unique.

Short title

Optional. This field is used to shorten the full title of a page when displayed in a breadcrumb. First aim to shorten the actual page title if it’s long, but not so much that the title is no longer clear if someone comes directly to a page from a search engine.

Short description

Required. A high-level description of what’s on the page. Should expand upon the title, not repeat it.

Banner image

Optional. If you include a banner image, it will appear behind a transparent blue background at the top of the page in a desktop view. It will not appear on mobile devices with small screens.

If you choose to use an image, you can adjust the focal point to make sure the right part of the image remains in view on small screens (e.g. mobile phones). Once you’ve added an image, use the little white crosshair in the Banner image preview to pick the focus.

Minimum image size: 1600 x 400 pixels (256 MB limit). Allowed types: png, gif, jpg, jpeg.

Service page header with banner image in desktop view

Service page header without banner image in desktop view

Image credit(s)

Appears at the bottom of the page.

Parent page

The required Parent page field appears on all public-facing content types and it powers the breadcrumb-based navigation system.

The Mass.gov team prepopulated the field based on an analysis of which child pages belong to which parent pages. Each child page can be assigned only 1 parent, or higher level page.

These connections, displayed in the form of breadcrumbs (i.e., links) above the page title, will help Mass.gov visitors find their way to relevant information regardless of where they start on the site.

Organization(s)

You’ll find the Organization(s) field at the bottom of the first tab in every Mass.gov content type, and in documents. This field tells Mass.gov ’s search which pages belong to which organization. ‌ Making sure your Organization field is filled out correctly will help users who land on your content find their way to your Organization Page.

Intended audience

This field isn’t being used yet, so there’s no need to fill it in.

Labels

This is optional, however it is very helpful. Add one or more labels to be used to used for grouping and finding related content and documents within the CMS.

Start typing in the Label(s) field to choose an existing label from a dropdown menu that will appear or add a new label by entering it directly.

Collections

Optional. Most content will not be in a Collection. Only add content to a collection if the collection creator has approved it. In that case, select any collections, topics, and subtopics for this content.

If you later need to remove a page from a Collection, go back into the page and uncheck the box and select Save.

Learn more about collections.

Overview

A good overview tells readers what the service is and what its linked pages let them do. Here are 2 ways to think about what makes a good overview:

Write what users can do, as on this Unemployment Insurance for Workers page.
Summarize what users can do on the pages linked to the Service page, as on Freshwater Fishing Information.

Video links

This is a legacy field for adding a Youtube or Vimeo video near the top of your page, but we plan to phase out this field so don’t recommend using it. You can add videos further down on the page via the “Add Video” button under the “Content” tab and “Section content.”

Add URLs for organization social media accounts. Icons will appear alongside links anywhere on the page. You must also “Add social media” under the “Content” tab and “Section content” if you want social media links to appear. We suggest putting social links below your Contact information section.

First time guide

Optional on default link group Service pages. The First time guide field allows you to link Guides, which you can use as introductions or instruction manuals for your service.

Eligibility information

Optional on default link group Service pages. Add a link to a page that includes eligibility information, if relevant. A box will appear after the Overview section.

Contact information

You can tell users how to contact you in different ways. You can enter a Contact Information item in the Contact information field if you want the contact information to appear directly on the Service page.

You also may want to direct them back to your Organization page specified in your “Organization(s)” field.

Note: If you fill in the Contact information field you’ll also need to "Add contact” under the “Content” tab and “Section content” for the Contact information to appear on the page. Contact information by default will appear collapsed upon page load but can be expanded by clicking on it. You might consider including a header, such as “Contact Information,” to make clear what the section includes before it is expanded.

Here’s what Contact information looks like when expanded.Here’s what Contact information looks like when expanded.

Log in links

You can add up to 2 links to off-site applications that will appear as white icon buttons at the bottom of the blue Service page banner under the service name (aka, page title) and short description. The text in the buttons is customizable.

These links will also display behind the "Log In to..." link in the blue banner at the top of Service pages as well as most of their child pages. Once you click on "Log In to..." you'll see the links displayed under the heading “Log in links for this page." (Learn more about login links. Or, watch a video about Login Links.)

Underneath those links specific to the Service page are 3 top requested log-in links visible on all Mass.gov pages.

Content

The content added under this tab–mainly Service Sections– will make up the bulk of your Service page, largely in the form of different link displays. You can also add a Key Message, and we recommend not using more than one.

Service section

One or more Service sections can be added to the page, and each can include a variety of Section content. These sections can be moved up and down the page as needed (say you might want to put your Events section near the top of the page during the week of a big event). You can choose to have no header for a section if the elements within the section have their own headers, or you can select between a simple header (black text, white background) or enhanced header (thick blue banner, with gray background for content).

Section content

Select from a number of options:

Flexible Link Group

You can mix and match link styles, choosing between buttons and text links. You can customize the title text above your links, and add a description, which is especially useful for longer lists of links and documents.

If you select “Buttons” from the Flexible Link Group’s display type dropdown menu, you can check the “Featured” box to highlight some links in blue instead of white boxes.

If you select “Links” from the display type dropdown menu, you can choose to have your link group contract or expand upon page load.

Caspio Data Page

Add a data page using the Caspio tool.

Featured Item Mosaic

Highlight 5 key links in a visually appealing section featuring photos or graphics. You must include 1 highlight image that displays vertically (on desktops) and 4 other images that appear horizontally.

Events

If you associate 1 or more Event item with your Service page, you MUST include an Events section on your Service page to display these Events. Watch a video about adding Events links to Service and other content types.

If you want links from the Social Media field under the Overview tab to appear in a horizontal section on the page, you’ll need to add this Social Media section.

Locations

Add locations and a map by selecting one or more Location content type items from the autocomplete field. (To add a Location you’ll need to select from existing ones or create a new one.) If you do add locations, Mass.gov will automatically generate a listing page like this one for your Service page. Users will get to this listing page by clicking on the Location Details button.

Hint: Change the text on that button from the generic “Location Details” to something more specific. You can also change the short description text that appears above the button.

Tableau Visualization

Tableau visualizations with short pieces of text can be included on Service pages within the visual story subtype.

Video

You can either add an existing or new video in a simple format as you can also do under the Overview tab. In this case, you can locate the video anywhere on the page.

Custom search

Display a search box that gives access to resources in a Collection or at an external search destination. Learn more about custom search options.

Contact

Contact information will only appear on Service pages if you have filled out the Contact information field under the Overview tab AND select the “Add Contact” button under the “Content” tab and “Section content.” The Contact information by default will display in a streamlined format but can be expanded by clicking on it.

Key Message

The Key Message includes text that appears in a large rectangle that overlays a primary image or that displays against a solid background if no image is used. Since Key Messages are generally used to make a single call to action, we recommend using them in the middle or at the bottom of a Service page, not at the top.

Hint: Avoid using images that include text or are too busy - this impacts accessibility and readability of your key message

The Key Message consists of several fields (Key message title, Subtitle or Description, Button URL/Button text) that combine to convey your point. While we show all the options in this screenshot, we recommend using either the Subtitle or Description, not both, so as not to make your Key Message box too busy.

Key message title

You have up to 80 characters to get your main message across in a Key Message title.

Subtitle or Description

You can elaborate on your Key message title by using either a Subtitle or Description. This text will appear directly beneath the Key message title.

The Subtitle will display in larger font size than the Description, so generally looks better when used for a brief tagline or phrase.

The Description can include 1 or 2 sentences, but can also be used to create a horizontal list of terms.

To create the horizontal list:

Step 1: Type a list of terms into the Description box and highlight it.

Step 2: Select the bullets icon while list is highlighted. (Note: The bullets won't actually appear on the page.)

Step 3: Select the Styles icon while the terms are still highlighted, and choose "Horizontal list" from drop-down menu.

Step 4: Save the page.

Button

The "Button" is the small rectangle within the "Key Message" box that links to a resource on or off Mass.gov. It requires a Button URL and Button text. This is where you make a call to action, beginning with a verb, such as "Find Community Grants" or "Search Jobs." The text is limited to 50 characters. While the "Button" is optional, it is strongly encouraged since it's where you make your call to action.

Background

Single image background

You can display your "Key Message" on top of a single image that spans the width of the page or have it appear against a solid color background. If using an image, be sure to use a high quality one: Recommended image size is 2560 x 1280. Search the Image Library to find photos.

Solid color background

Another option is to display your "Key Message" against a solid color background.

Additional info

Use autocomplete fields to select related Service and Topic pages. The links will appear at the bottom of your Service page under the heading “Related Services.”