Heroes and Headlines

Overview

Heroes add visual interest to a page and include the main headline for the page. All pages must have a hero or headline component.

The available types of heroes are listed below as well as guidance on how to use them.

Basic Hero

The Basic Hero, also referred to as the notch hero on the single column template, has very limited data that can be input. This is a great hero for getting your imagery out there then moving quickly on to the rest of your content. You can use it in the hero block on single column or primary column block in a side-burn template.

Elements:

  • Headline - Required, alterable text
  • Subhead - Optional, alterable text
  • Hero photo - Required, custom image


Call To Action Hero

The Call To Action Hero is a hero that includes some sort of primary call to action such as "Get a Quote" of "Call to Apply". They are generally not used on pages with a lead form as the primary call to action. Seriously, don't put multiple lead forms on your page.

Elements:

  • Headline - Required, alterable text
  • Subhead - Optional, alterable text
  • Hero photo - Required, custom image
  • CTA Headline - Required, alterable text
  • CTA Subheadline - Optional, alterable text
  • CTA Supporting paragraph text - Optional, alterable text
  • Button OR Phone number - MUST have one or the other (not both)
    • Button - Alterable text
    • Phone number - Alterable text
  • CTA Small text - Optional, alterable text


Lead Forms

Lead forms gather personal information from the user with the intent of starting a sale, relationship or transaction of some sort with that user.

Form Variations

Forms are a way of gathering personal information from the customer. Forms in the DLP work both independently and in tandem with heroes. A form can be either your CTA of a landing page, or you can have a simple or CTA hero and have a form lower in the page as its own separate component. Because every line of a form inherently accumulates more friction we have provided a couple of variations. Each variation allows for either a normal look or the inverted blue color, and can provide such things as a thumbnail or image for interest or incentive to ease friction.

Long Form Variations

Long forms are very versatile and can be used anywhere in both the forehead and sideburn templates. There are two color variation and a few template variations available to a from. They can be inverted and are set up to work on sideburn and single column templates. If the page offers the customer incentives such as a brochure, a thumbnail image of the item being offered can be included above the form. We tend to use these pages as lead forms to collect information for telephone calls and email remarketing.

Elements:

  • Thumbnail - Optional, custom image
  • Headline - Required, alterable text
  • Subhead - Optional, alterable text
  • Paragraph Description - Optional, alterable text
  • Requirements/Instructions - Optional (?), alterable text
  • Fields - At least one is required
  • Required Fields - First name, Last name, Address, City, State, ZIP
  • Optional Fields - DOB, Email, Phone number
  • Disclaimer - Optional, alterable text
  • Button - Required, text is alterable
  • Confidence tags - Required/Built in, not alterable


Call-out Box

Overview

Call-out boxes are used for reiterating the primary call-to-action or offering a second call-to-action. Call-out boxes can include a phone call-out, link/button call-out or “short form” – a one input form. Short forms are primarily used to gather a user’s email address for a mailing list.

Phone Call-out

Phone call-out box is a great way to pipe your customers straight into talking with someone. This component has enough flexibility around it to have just enough content and imagery to encourage your visitor to call!

Elements:

  • Illustration - Optional
  • Header - Required, alterable text
  • Subhead - Optional, alterable text
  • Body - Optional, alterable text
  • Call To Action - Required
  • Support Text - Optional
  • Reversed - Optional


Button Call-out

Button call-out box is an easy way to remind your users why they're on the page. You can strip these down or load them up with just the right of content to engage your user and convince them to click that button and start that journey!

Elements:

  • Illustration - Optional
  • Header - Required, alterable text
  • Subhead - Optional, alterable text
  • Body - Optional, alterable text
  • Call To Action - Required
  • Support Text - Optional
  • Reversed - Optional


Short Form Call-out

Short Form call-out box is the perfect way to capture your users email address without being intrusive. Sometimes we just need to get our user into the funnel with the intent of following up to further work that lead and this is the perfect approach.

This call out box does come with a lot of complexities. It can support campaign tracking codes, hidden inputs, server errors, thank you messages and additional information checkboxes. These things can / should be configured to get the best results out of this module. Currently it only supports interactions with Salesforce Marketing cloud but could be updated to support other API end points for more flexibility in its uses.

Elements:

  • Illustration - Optional
  • Header - Required, alterable text
  • Subhead - Optional, alterable text
  • Body - Optional, alterable text
  • Call To Action - Required
  • Support Text - Optional
  • Reversed - Optional
  • Trackers - Optional
  • Thank You - Optional
  • Analytics Object - Optional
  • Server Error - Optional

When using tracker_hidden_input, make sure to coordinate the allowed_trackers under properties to match. Without this, the trackers won't work. We do this intentionally as to not allow the users to be malicious and pipe in query parameters.


Simple Call To Action

Overview

Simple Call To Actions (or CTAs) are a great way to throw a pop of color and actionable block into your page. They come in a few different flavors, outline, grey and blue, that give you the opportunity to highlight something important, like getting a quote or calling a phone number without much else going on. Consider using these to break up long blocks of boring text or to sprinkle in a secondary action after your primary action of buying a thing we're selling. Pairs well with Lead Forms and Call-out Boxes!

Elements:

  • Style - Optional, defaults to outline
  • Header - Required, alterable text
  • is_phone_number - Boolean, false for button
  • Link - Required, where the button/link will take you
  • tty - Optional, used for is_phone true
  • Target - Optional, defaults to _self
  • Content - Required, inner of button or phone number


Reasons to Believe

The Reasons to Believe is why your customer should believe you. When putting together a promotional page, you may be targeting users that aren't familiar with the brand. This component gives you the chance to backup your claims and promises and highlight what makes the brand trustworthy and credible.

Overview

Reasons to Believe also known as RTB or sometimes mislabeled as reason to buy, give you an opportunity to put icons next to reasons to trust and believe in the brand. This is a flexible component, giving you two related, but different options.


Descriptive RTB

The RTB component is an embellished bullet list using spot illustrations to support each item. RTBs are a way to draw attention to a list of product features and selling points, or a list of reasons to consider Mutual of Omaha.

Elements:

  • Header - Required, alterable text
  • Subhead - Optional, alterable text
  • RTB Illustration - Required
  • RTB Subhead - Optional
  • RTB Description - Optional, need either subhead or description, can have both.


Highlight RTB

This component includes 3-6 reasons to buy. Each item only includes an illustration and a headline.

Elements:

  • Header - Required, alterable text
  • Subhead - Optional, alterable text
  • RTB Illustration - Required
  • RTB Subhead - Optional


Content Blocks

A definition is a styled overlay that displays an explanation of what a term or phrase means.

Overview

Content blocks can be used to accommodate images, body copy, bullet list, styled lists, and light amounts of custom HTML. They have baked in flexibility, but it's encouraged to be mindful of how you used them.

Basic Content Block

This component allows for headings, text, lists and hyperlinks.

Elements:

  • Value Prop - Optional
  • Subhead - Optional, alterable text
  • Content - Optional, alterable text


Content Block with Image

Content with image block allows you to have an image or infographic near your content to help illustrate your point. This block allows you to spice up your page for sure!

Elements:

  • Value Prop - Optional
  • Subhead - Optional, alterable text
  • Content - Optional, alterable text
  • Image - Required


Decorative List Content Block

Decorative List block allows you to call out major benefits in a nice concise way. There is no limit to the quantity of bullets you can have. It's encouraged that you don't overdo it though. Alternate SVG's can be used in the list if desired.

Elements:

  • Header - Optional
  • Subhead - Optional, alterable text
  • List Item - Required, alterable text
    • Icon - Optional
    • List Text - Required


Last Chance Row

Overview

The last chance row is exactly what it sounds – it’s one last chance to get a visitor to engage with a call-to-action before they hit the page’s footer. This element stretches the full width of the page and features either a phone number or a button.

Elements:

  • Headline - Required, alterable text
  • Description - Optional, alterable text
  • Call To Action - Required, alterable text
  • Reversed - Optional
  • Support Text - Optional, alterable text


Medicare Supplement Quoter

Overview

The Medicare Supplement Quoter block is an intricate block that takes in details about the user and gives them a quote for Medicare Supplement insurance products. Currently it is only used on the DLP pages, but we have hopes to migrate it.

The below fields are a baseline of what's needed to get the Medicare Supplement quoter working. This element doesn't have a ton of customization outside of content. It's meant to exist in the 'body' section of a forehead template or the 'primary-column' or 'body' section on a sideburn template.

Tracking and Attribution

To properly function, this block does need some extra data outside of the component. For the entire DLP page, there should be a property key towards the top. This is where things like template are defined. We will need to compliment this block with two new key value pairs.

As a baseline, we should use these and then work with our marketing friends (Kelly Giese and Charles Richardson as of right now), to verify the campaign codes. Some of the below values can differ, but as a baseline, this is very safe.

MS Quote questions

Questions block. Auto hits an end point to determine Household discount.

MS Quote results

Results block is formatted based on results json and not customizable here.

Titles and Navigation Bar

Overview

The existing title block is documented on the Templates Page. For more information go there.

In the near future, expect more documentation around the loaded header, which offers a button in addition to phone number for extra functionality.