Content Marketing Calculator

The Content Marketing Calculator is an interactive live and gated calculator that includes values that correspond to movement along the slider. This ROI calculator is a single page experience where calculations happen at the blink of an eye as soon as changes to individual sliders are adjusted the final results change as well. The calculator includes tooltips to help users better understand their inputs as well as additional information displayed in an accordion below.

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.

Reveal

Reveal will allow you to create two-state interactive content. A use case for this would be an information tooltip, where in one state an information icon is seen but when hovered or clicked on, a second state is shown displaying the tooltip text.

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.

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.

Select the element that you would like to apply, remove, or change the animation of. Navigate to the Animations panel, and set the trigger. The trigger is when the animation will take place either on hover, scroll into view, etc. Then select the animation type which is the type of animation the element will perform. 

To edit the numerical symbol from a $, %, or etc., select the text, double click to open the text editor, and then select source. The source will display the html format for the text.

To add a numerical symbol before the value, add it before the <span> tag.

To add a numerical symbol after the value, add it after the </span> tag.

To make the result calculations more or less blurry when the form is incomplete, navigate to the page rules.

To make the gated result calculations more blurry, navigate to the Form Incomplete rule and set the ResultClass value to a higher pixel value. The higher the value the more blurry the result will be.

Reveal above - To change the text display from below to above, select the Reveal container and navigate to the Variables panel. Under the Position dropdown select Above.

Reveal container - The reveal container has a fixed width, if you would like the reveal container to be larger, select the container within the Reveal container. Navigate to the layout panel to adjust the width. The larger the value, the wider the tooltip will be when hovered over. Padding is the distance between the text and the end of the container that it is within.

To add or remove sections of the accordion, select the Accordion element. Navigate to the Variables panel and expand the section.

To add a section, select the next empty section. Add a section title by selecting +Label. Don’t forget to add a tag for behavioral tracking. Place text into the section by dragging in a text element into the accordion section.

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.