Beta Components
Not all components are created equal, which isn't a bad thing, but because of this we need to have a playground for these new components and need a place to document them as well. This is that place.
The components you see here are available for use but should be reviewed with the team/person who originally published them to make sure that you're doing so correctly. These components may or may not be destined for greatness or a trash bin, plan accordingly!
Warning!!
Floating ads, also referred to as page curls, are a newer component that is utilized to add a secondary goal to the page. This helpful little snippet in the bottom corner of the page gives the user a second call to action. It is subtle, but still helpful for overall goals of the page. For example, you could have a page whose goal is to sell product A, but needs a subtle call to product B, because it's totally in season.
Elements:
- Image - Required, custom image
- Header - Optional, but encouraged
- Body - Optional, but encouraged. This is where your link would go
{
"id": "floating_ad_block",
"property_content_type": "floating_ad_block",
"content": {
"floatingAd": {
"image": {
"url": "https://cdn.mutualofomaha.com/images/mutualofomaha/illustrations/home_shield.svg",
"alt": "home shield image"
},
"header": "Looking for Waffle Insurance?",
"body": "<a target='_blank' href='https://www.mutualofomaha.com/promo/life-insurance/457026?showFenat=true&showMonthly=true&lead_srcurl=mscurl&invsrc=wlg-ms-curl&utm_medium=cpc' id='FloatingAd-link' class='FloatingAd-link'>Learn About Why This Matters</a>"
}
}
}
There really isn't a difference between long and short form anymore. Because of how form block v2 is constructed, you are in control. You create the fields you need, how you need them to behave and then send it on its merry way. It's significantly more powerful but also prone to human error. Test this component before you send it out in the wild!
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
{
"id": "form_block-1",
"property_content_type": "form_block_v2",
"content": {
"thumbnail": {
"src": "",
"alt": "optional, custom image",
"title": "optional, custom image"
},
"reverse": false,
"headline": "required, alterable text",
"subhead": "optional, alterable text",
"paragraph_description": "optional, alterable text",
"instructions": "Optional, alterable text",
"request_type": "should be one of mailer, call or email",
"hasRequiredFields": boolean,
"fields": {
"allFields": [],
"key": {}
},
"endpoint": "endpoint for service to call when form is submitted",
"allowThankYou": true,
"thankYou": {
"message": {
"messageHeader": "Header for thank you message",
"messageBody": "Message text"
},
"image": {
"src": "image src",
"alt": "image alt text"
}
},
"disclaimer": "Optional, alterable text",
"button": "Required, text is alterable",
"hidden_inputs": [
{
"name": "input1",
"value": "value1"
},
{
"name": "input2",
"value": "value2"
}
]
}
}Fields:
- allFields - Required, a list of the elements by key name, maps order of keys
- YOUR-KEY-HERE! - Type Object, Required
- content_type - Required - [input, select, zip-input, state-select, radio, checkbox]
- content.name - Required, what the field will call itself when posted
- content.required - Boolean
- content.label - Required, what will display to the user
- content.error - Required, what will display to the user
- content.dataPattern - Required, helps with validation, alphaNum, number, email, phone and more
- content.length - Optional, sets max length (for phone number as an example)
Below would be an example of what is needed to make the traditional long form work. Because this has a lot of flexibility in it, if you feel overwhelmed, reach out to a developer friend and see if they can provide clarity.
{
"fields": {
"allFields":["firstName", "lastName", "streetAddress", "city", "state", "zipCode", "email", "phone"],
"firstName": {
"content_type": "input",
"content":{
"name": "firstname",
"required": true,
"label": "First Name",
"error": "Enter a first name",
"dataPattern": "alphaNum"
}
},
"lastName":{
"content_type": "input",
"content":{
"name": "lastname",
"required": true,
"label": "Last Name",
"error": "Enter a last name"
}
},
"streetAddress":{
"content_type": "input",
"content":{
"name": "addressLine1",
"required": true,
"label": "Address",
"error": "Enter an address"
}
},
"city":{
"content_type": "input",
"content":{
"name": "city",
"required": true,
"label": "City",
"error": "Enter a city"
}
},
"state":{
"content_type": "state-select",
"content":{
"name": "stateProv",
"label": "State"
}
},
"zipCode":{
"content_type": "zip-input",
"content":{
"name": "postalCode",
"label": "Zip Code",
"error": "Enter a zip code"
}
},
"email":{
"content_type": "input",
"content":{
"name": "email",
"required": true,
"label": "Email Address",
"error": "Enter a valid e-mail address",
"dataPattern": "email"
}
},
"phone":{
"content_type": "input",
"content":{
"name": "phone",
"required": true,
"label": "Phone Number",
"detail": "ex: XXX-XXX-XXXX",
"error": "Enter a valid phone number",
"dataPattern": "phone",
"maxlength": 14
}
}
}
The reviews block is currently a Senior Health only component. This is a legacy component that was brought over from the main marketing pages. It finds the zip code from the page and uses it, goes off, gets a few top-rated reviews that have been approved for use, then gives our Medicare products an over-all rating also returned from the same end point returning the top reviews.
Elements:
- Header - Required
- Subhead - Optional
- All Reviews Text - Required, 'link text' after component
{
"id":"reviews_callout",
"property_content_type":"reviews_callout_block",
"content":{
"header":"See what our customers are saying about our Medicare supplement insurance",
"subhead":"",
"allReviewsText":"Read All Reviews",
"showReviewsCallOut":true
}
}
The related articles block can support one of three resource types: video, article, calculator. The entire article is clickable but needs a screen reader text that is meaningful to the card so that the focus makes sense.
{
"id": "related_advice_resources-1",
"property_content_type": "related_advice_resources",
"content": {
"resources": [
{
"screenreader_text": "Text for aria-label ",
"url": "URL of resource",
"title": "Title of resource",
"image": {
"url": "Image for article"
},
"type": "Type of resource ex: article, video, calculator",
"button_text": "Text for button"
},
//example json
{
"screenreader_text": "Read about what to look for in Life Insurance after 50",
"url": "https://www.mutualofomaha.com/advice/understand-how-life-insurance-works/what-to-look-for-in-life-insurance-over-50",
"title": "What to Look for in Life Insurance Over 50",
"image": {
"url": "https://blogs.mutualofomaha.com/advice/files/2018/10/life-insurance-over-50.jpg"
},
"type": "article",
"button_text": "Read Article"
}
]
}
}
Tealium is a tool that is used to help aggregate and clean up data then take further actions as needed.
Two new keys were added to the object, both are to support getting extra data into Tealium so a marketer can make better decisions.
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
- sessionsVisitor_hidden_inputs - Optional
- leadAttrs_hidden_inputs - Optional
{
"id": "callout_box-1",
"property_content_type": "callout_box_tealium",
"content": {
"illustration": {
"circle": false,
"src": "https://cdn.mutualofomaha.com/images/mutualofomaha/illustrations/2021-medicare-guide.svg",
"alt": ""
},
"headers": {
"headline": "Help protect your kingdom by understanding Medicare."
},
"body": "Clear, reliable information can make all the difference in making sure you get the best Medicare plan for your needs. Our FREE Medicare Guide can help you better understand the most current Medicare information and differences in plans, and help you choose a path that can best protect your health and finances.",
"call_to_action": {
"is_tealium": true,
"link": "https://www.mutualofomaha.com/medicare-advantage-insurance/our-plans",
"additional_info": "By checking this box, I agree that I would like to receive additional information from Mutual of Omaha Insurance Company and its affiliates.",
"button": "Get the Guide",
"allowThankYou": true,
"tracker_hidden_inputs": [],
"sessionsVisitor_hidden_inputs": ["locale", "fromIp", "state", "stateName", "zipCode"],
"leadAttrs_hidden_inputs": ["APP_NAME", "LEAD_ID", "AUTHID", "CROSSKEY", "URL"],
"thankYou": {
"message": {
"messageHeader": "<h3 class="u-mB5 Cta-ThankYou-header">Thank you!</h3>",
"messageBody": "<p class="Cta-ThankYou-body">Your 2021 Medicare Guide is on its way to your inbox. We hope you find it useful in helping you protect your kingdom</p>"
},
"image": {
"src": "https://cdn.mutualofomaha.com/images/mutualofomaha/illustrations/flying-paper-airplane.svg",
"alt": ""
}
},
"analytics_object": {
"trackEventName": "trackVirtualPageview",
"trackEventVirtualPage": "/promo/protect-your-kingdom/health-and-finances/thank-you"
}
},
"reversed": true,
"server_error": {
"message": "<span class="u-h3">Something went wrong, please try again.</span>"
}
}
}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.
{
"properties": {
"template": "single-column",
"allowed_trackers": {
"cav_campaign": "tracker_hidden_inputs"
}
}
}
