This WordPress plugin is an easy-to-use, easy-to-install marketing-calculator. After its activation, it can be displayed on any wp-preprocessed page with the shortcode [business-calculator]. or by calling the do_shortcode() php-directive.
The Minimum required PHP version is 8.0.
This plugin has the following dependencies, all of which are packed with the plugin:
- FontAwesome 6 Pro or later (css + webfonts)
- Bootstrap 5.0.2 (js+css)
The plugin is basically a wp-wrapper for the original js library, also written by me. Its specification can be found below.
If you use any of these plugins (WP-Rocket, Autoptimize etc), you have to add these files to the exception list for minifying (every file is minified by default), defering and delayed-executioning:
/wp-content/plugins/business-calculator-plugin/css/calculator.min.css/wp-content/plugins/business-calculator-plugin/css/all.min.css/wp-content/plugins/business-calculator-plugin/css/bootstrap.min.css/wp-content/plugins/business-calculator-plugin/js/calculator.min.js
If you are using any live-action editors like Oxygen or Elementor; you have to manually include the css files in the
<head>by a code snippet system. (e.g. Elementor's Custom Code, or Code Snippets plugin etc). It is needed, because these editors usually carry a custom-made resource loading system, and this plugin is only prepared for the usage of the default resource management system in WP -> the required css files will not be loaded correctly. A sample code which can be inserted into the head:<link rel="stylesheet" id="bc__core_css" href="/wp-content/plugins/business-calculator-plugin/css/calculator.min.css" media="all"><link rel="stylesheet" id="bc__fa" href="/wp-content/plugins/business-calculator-plugin/css/all.min.css" media="all"><link rel="stylesheet" id="bc__bootstrap_css" href="/wp-content/plugins/business-calculator-plugin/css/bootstrap.min.css" media="all">
This is a lightweight, fast Vanilla-javascript based BusinessCalculator script, with fully customizable elements.
You can find a working demo on the index.html file.
The calculator has one dependency, which is the FontAwesome iconset. You can specify with a flag if you want to use the Pro, or the Free version. Regardless, the CSS file/font files for FontAwesome has to be included in order for the icons to display correctly.
To use this calculator, you have to include/link two files above the dependency: the .js and the .css file:
<head>
...
<link rel="stylesheet" href="css/calculator.min.css">
...
</head>
<body>
...
<script src="js/calculator.min.js"></script>
</body>The calculator can be brought to life by initializing a BusinessCalculator object with the minimal reguired data, and then by calling its init() function:
const bc = new BusinessCalculator({
root: document.querySelector("rootElement"),
input: {
industry: {
industries: [
{
text: "Industry1",
percentage: 10
},
{
text: "Industry2",
percentage: 20
},
{
text: "Industry3",
percentage: 30
}
]
},
growth: {
buttons: [
{
text: "Conservative",
multiplier: 1
},
{
text: "Moderate",
multiplier: 1.5
}
]
}
}
});
bc.init()The options you can provide to the constructor have alot of non-required options, all of which are described in detail below. The absolute required are the
root, theindustriesand thegrowth>buttonsfrom the input. If any of these are not present, an error message will be thrown to the console, thus aborting the calculator's generator process
The constructor's syntax is as follows:
const bc = new BusinessCalculator( <options> ), where the options object has multiple key-value pairs, all of which are modifying the appearance and behaviour of the calculator.
| Key | Type | Required | Default value | Description |
|---|---|---|---|---|
| root | HTMLElement (object) | yes | null | The element, in which the calculator's HTML and structure will be generated. |
| heading | string | no | "Calculate your Budget" | The H2 heading of the calculator |
| currency | string | no | "$" | The currency symbol used by numeric money displays |
| colors | Object | no |
{
primary: "#0C92A8",
secondary: "#327773",
third: "#6EBDC1",
background: "#060E15",
foreground: "#E9EEEB",
foregroundAlternative: "#818181"
}
|
This object describes the colors used in the calculator. Its possible properties are primary`, |
| input | Object | yes (partially) | null | This object defines all the input elements present on the calculator. This includes the industry buttons, the revenue slider, and the growth buttons. Below you can find all these in detail |
| input: monthlyRevenue | Object | no |
{
heading: "Monthly Revenue",
tooltip: {
icon: "fa-light fa-circle-info",
text: "Your business' avreage gross monthy revenue - total brought on befire any expenses",
ariaLabel: "Open this tooltip to learn more about the Monthly Revenue"
},
slider: {
min: 0,
max: 1000000,
step: 5000
}
}
|
This object specifies the first section inside the inputs, the monthly revenue slider. All of its properties are optional, since all have a default value |
| input: industry | Object | yes (partially) |
{
heading: "Industry", // not required
tooltip: {
icon: "fa-light fa-circle-info",
text: "Select your business industry or closest match",
ariaLabel: "Open this tooltip to learn more about the Industries"
}, // not required
industries: [] // required, not populated by default
}
|
This object specifies the possible industries one can choose from, when calculating its budget. They basically determmine, that which percent of the whole revenue is planned to be spent on marketing. The object has one required property (hence the partial requirity), which is an array of objects in the following form: [
..,
{
text: "Industry Display Text",
percentage: 30 // this will be used for calculations
},
..
]
|
| input: growth | Object | yes (partially) |
{
heading: "Growth Goal", // not required
tooltip: {
icon: "fa-light fa-circle-info",
text: "Conservative: a more cautious approach, aiming for steady and sustainable growth. Moderate: balanced growth, combining stability with some expansion. Aggressive: rapid growth and expansion, even if it involves higher risk.",
ariaLabel: "Open this tooltip to learn more about the Growth Goals"
}, // not required
buttons: [] // required
}
|
This object specifies the possible growth buttons, from which the user can choose. They are basically multipliers, with which the per month marketing budget is multiplied as the calculator's ending operation. This object has one required property, which is an array of objects in the following form: [
..,
{
text: "Conservative",
multiplier: 1
},
..
]
|
| output | Object | no | null | This object defines all the output elements used by the calculator (we will refer to the area where these elements are displayed as the 'right column'). This includes the output heading, the texts and labels used in the right column, and the optional breakdown list |
| output: heading | Object | no |
{
text: "Your Recommended",
colored: "Marketing Spend"
}
|
This heading object determines the text displayed in the right column's top. The colored one has a linear gradient text color, constructed from the secondary and the third color |
| output: revenuePercentageLabel | string | no | "% of Revenue" | The text that displays next to the displayed percentage (which is the percentage of the selected industry) |
| output: perMonthLabel | string | no | "per month" | The text displayed under the total calculated amount |
| output: perMonthTooltip | Object | no |
{
icon: "fa-light fa-circle-info",
text: "This marketing budget could be allocated to salaries, specialist agency support and marketing initiatives, campaigns, ad spends and related expenses",
ariaLabel: "Open this tooltip to learn more about the Monthly Budget"
}
|
Tooltip, which displays next to the perMonth label |
| output: breakdown | Object | no |
{
heading: "Example Breakdown",
openIcon: "fa-regular fa-chevron-down",
listIcon: "f058",
breakdowns: [],
hint: "Adapt your budget based on campaign results and business goals, experimenting with tailored strategies and channels."
}
|
This object specifies the breakdown of the calculated marketing budget. The big difference here is the listIcon's value. Since that is displayed using css-pseudo code, the listIcon property must be given in unicode form (so that it can be used as content: '\listIcon')The breakdowns can be added by objects of the array breakdowns, in the following format:[
..,
{
text: "Breakdown1",
percentage: 20
},
..
]
One breakdown means, that for the specified purpose (text) the specified percentage of the revenue (percentage) should be used. |
| output: button | Object | no |
{
text: "See plans",
href: "#",
}
|
The button appearing under the breakdowns' list |
| output: endHint | Object | no | "Unsure where to allocate your marketing spend? <a href="#">Take the quiz</a>" | Little text appearing under the button |
If you want to use this calculator inside a typescript project, you can do so by using the .ts version of the calculator. The BC_Options interface describes the object you pass to the constructor (whose properties are detailed in the table above).
Typing informations for the typescript version:
interface BC_Options {
root: HTMLElement | null
heading?: string
currency?: string
currencyOrientation?: BC_Currency_Orientation
colors?: {
primary?: string
secondary?: string
third?: string
background?: string
foreground?: string
foregroundAlternative?: string
}
input?: {
monthlyRevenue?: {
heading?: string
tooltip?: BC_Tooltip
slider?: BC_Slider
}
industry: {
heading?: string
tooltip?: BC_Tooltip
industries: BC_Industry[]
}
growth: {
heading?: string
tooltip?: BC_Tooltip
buttons: BC_Growth_Button[]
}
}
output?: {
heading?: {
text?: string
colored?: string
}
revenuePercentageLabel?: string
perMonthLabel?: string
perMonthTooltip?: BC_Tooltip
breakdown?: {
heading?: string
openIcon?: string
listIcon?: string
breakdowns?: BC_Breakdown[]
hint?: string
}
button?: BC_Button
endHint?: string
}
}
enum BC_Currency_Orientation{
"BEFORE_TEXT",
"AFTER_TEXT"
}
interface BC_Tooltip {
icon: string
text: string
ariaLabel: string
}
interface BC_Slider {
min?: number
max?: number
step?: number
}
interface BC_Industry {
text: string
percentage: number
}
interface BC_Growth_Button {
text: string
multiplier: number
}
interface BC_Breakdown {
text: string
percentage: number
}
interface BC_Button {
text: string
href: string
}This calculator is under the MIT license. You can freely use this in open source projects, modify it on your own, or use it in your public webapps. Re-distributing however, is probihited, and in such case a legal action may be performed.
Borsodi Gergő (7digits) © 2024