Marketing Automation Calculator

This Marketing Automation Calculator is a 3 question calculator that uses a story-like journey to ask questions and provide dynamic results and responses based on the user’s inputs. The experience uses several advanced building techniques such as: fixed positioning, a custom progress bar, 100% viewport height via CSS, the form field show and hide microtheme, and calculator logic via rules. This template also includes more common elements such as: dynamic text, flow components, animations, accordions, and fun illustrations.

COMPLEXITY

Expert

TYPE

Calculator

USE CASE

Sales Enablement

Features available

Here are the major features, abilities, and interactive elements used in this template.

Animation

Animation will allow you to animate elements via microthemes. A use case for this would be to have a section fade up and in to a page via scroll.

Flow

Flow will allow you to build step-based interactive elements, such as Tabs, Accordions, and other elements, with great customizability. Use cases and examples of it's power are the abiltiy to create a carousel of images all the way to a one page assessment that presents one question at a time.

Accordion

Accordion will allow you to organize content vertically into separate sections that expand and contract when clicked on. A use case for this would be to create a FAQ of product or service related questions, where each accordion label would have it's own questions and the answer within the accordion section.

Form

Form will allow you to build simple to complex forms that contain different types of inputs and toggles, and can be combined with rules to create logic based results. Use cases for a Form are quizzes, assessments, calcuators, and traditional forms.

Custom Code

Custom Code will allow you to add custom interactivity via Javascript or CSS to your creative. A use case for this would be this odometer script that is added to the page and text element in order to have it act as number counting up.

How-to use

Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.

To change or remove an animation select an element on the page that currently has one.

Go to the Animations section within the Edit tab remove an existing animation by clicking on the X.

You can also change the animation by going to the Animations dropdown to select a trigger, and then select a new animation from the second drop down menu.

If there is a delay on an animation you can remove that or change the timing in the same way you did the animation.

The custom CSS .fullHeight makes your Content container fill 100% of the browser from top to bottom. You can adjust or remove the custom CSS selector – .fullHeight – from the Content container by going into the Page tab

Click on Creative CSS and adjust the selector’s properties or delete it all together, and then click Ok to save your changes.

You can also keep the custom CSS in the Page’s Creative CSS section and just remove the class from the Content container by going to the Edit tab.

You can also keep the custom CSS in the Page’s Creative CSS section and just remove the class from the Content container by going to the Edit tab.

To customize the progress bar for experiences with fewer or more questions, find and select the container labeled “Progress Bar Fill” within the LG/MD Progress Bar Container.

With “Progress Bar Fill” selected go to the Edit tab open the Layout Dropdown and adjust the width’s percentage.

If you have ten questions, the width for the first progress bar should be 10% and the second page’s should be 20% and so on and so forth.

This will need to be done for each page’s Progress Bar Fill

You will also need to update the SM and XS Progress Bar Fills to match the ones on LG and MD

To update the content within your Flow, begin by selecting it on the canvas.

Within the Flow, locate the first Flow Step at the top. Within this Flow Step is a one Row and

At the very left of the Flow is a custom navigation made up of containers labeled Top, Middle, and Bottom that are used to navigate between the three Flow Steps. I would recommend keeping the text for these buttons to six characters or less.

Each flow step contains a header so that you have the ability to increase the progress bar width from flow step to flow step.

To update the image within the flow you will have to use the List panel on the right. With the List panel open and the image selected you will see the top funnel image is selected. Above in the list are a Mid funnel and Bottom Funnel. For this Creative all of the images are layered on top of each other in order for all of them to fade in individually and create the final result.

If you want to replicate something like this you can do so just keep in mind that the Bottom Funnel image is determining the height of the section, and the other images, Mid Funnel and Top Funnel, are Layered images using absolute positioning. (For the purposes of this presentation I have hidden the top two layers)

If you want to just use a single image, you may delete the Mid and Top Funnel images and just use the bottom funnel image.

To update the content within your Accordion, begin by selecting it on the canvas. 

As a side note you are able to edit the Settings for the Accordion itself by always having the first section expanded, tagging each accordion section when it is clicked on (which is done by default), and closing an accordion section when another is expanded.

Select an Accordion Section by clicking on it on the Canvas or by selecting in the Variables menu. Here in the Variables section you are able to update the Label for the specific Accordion Section, which is the front face title, and you are also able to provide it with a Tag.

With the Accordion Section expanded on the Canvas, you can double-click on and edit the Text element, or add or remove content from within the Section.

You can update your Data fields to a more descriptive Data field if you would like by selecting the Textbox on the page, going to the Edit tab, and clicking on the Data Field button.

With the Data field window open you can select your new Data field from the categories and available options within them.

Please keep in mind that by updating the Data field name you will be required to update them where they are found in the rules on various pages. For the quiz rules and logic please visit the logic section below.

Logic template

Here is the logic’s template and quick video tour to make it easier for you when handling this template, from overviewing the rules, to understanding the formulas, to editing the logic or equations as necessary.
Preview Logic TemplateOpens in a new window.Watch Logic Video TourOpens in a new window.

Content structure

Here is the content structure’s template to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.
Preview Content Writing TemplateOpens in a new window.

Best practices

Be sure to tag everything that is "taggable" so that you are able to review everything at a later time in your reports.

Reveals
Flows
Flowsteps
Links
Tabs
Accordions
Lightboxes
Rotators
Sliders

Your conversion point is the most important measurement in determining whether your creative is converting visitors. We recommend having one conversion point per creative. Here is the element and methods in which to set your conversions:

Links
Behaviors
Actions

Before going live with your experience, you want to run a final proofing process. This will review the experience as a whole, with any final revisions necessary. Here is the most important items to be reviewed before GoLive:

  • Review of any integrations
  • Review of conversion point
  • Review of tagging
  • External links are working correctly (opening in a new window)
  • Mark respondents as always new if used for conference or live event
  • Uncheck the robot meta directives (no archive, no follow, no index)
  • Remove path description (if applicable)
  • Make sure traffic source has been added to social share — og URL, twitter (create bit.ly), email share
  • Once live, debug on Facebook (if applicable)

Related templates

If you like this template, you might want to check out these other similar models.

Have a question?

Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions, so we can make sure to have this page constantly up to date.