Calculator Option

Calculator Options allow you to create Javascript based calculators for calculating additional details to help your customers make a purchase. They can appear in a modal window or inline with the calculator.

Calculator Options include support for CSS and JavaScript. A Calculator option can appear as a modal or inline with your calculator.

When creating a Calculator Option for the first time you will see a Template dropdown where you can use one of our pre-build calculators. The calculator includes instructions to fully integrate with your parent calculator.

You can create your own or modify the calculator tempaltes as required.

Examples:
Room Calculator
Coverage Calculator

Calculator Options are an Ultra plan feature.



Calculator Option Types #

Calculator options can appear as a modal or inline.

Modal: Check Show in Popup Modal. An Icon and Link in the Calculator will show. When clicked, the calculator modal will appear. The link name is the value set in Display Name of the Option.


Inline: Uncheck Show in Popup Modal. The calculator appears inline with other calculator options.

Calculator Option Setup #

Display Name: Name that appears in Modal link.

Icon (SVG): Optional. Include an SVG image beside the modal Display Name of the Modal Option. Must be an SVG. If your SVG is not properly sized, you may need to adjust the SVG size attributes or you can try some CSS.

/* modal icon size */
.modal-icon svg {
width: 15px;
}

Modal Heading: Appears at the top of the modal window.

Modal Content (HTML): Content to display in the modal window.

Javascript: Include any Javascript required in the Modal.

CSS: Include any CSS required in the Modal.

Calculator Template: This dropdown has some pre-configured calcualtor configurations. These can be modified and some additional setup is required. See documentation at top of Javascript field.