Last active
December 2, 2024 15:07
-
-
Save cliffordp/aef8e1f9c8cc4768258721c2b74b5ce1 to your computer and use it in GitHub Desktop.
Missed Call Text Back Calculator by Jonny Avila
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Jonny Avila, video preview: https://www.facebook.com/groups/gohighlevel/posts/2316269752165880/ | |
| Instructions: https://docs.google.com/document/d/1HJZtesCocsTJHlqfzspThOsqTy3v294VBceD98Vj6Ls/preview | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Your Agency ROI Calculator</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Container Styles */ | |
| #roi-calculator-container { | |
| font-family: 'Poppins', sans-serif; | |
| max-width: 400px; | |
| margin: 50px auto; | |
| padding: 30px; | |
| text-align: center; | |
| border-radius: 10px; | |
| background: #f9f9f9; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Heading Styles */ | |
| #roi-calculator-container h1 { | |
| font-size: 28px; | |
| color: #333; | |
| margin-bottom: 10px; | |
| } | |
| #roi-calculator-container h2 { | |
| font-size: 32px; /* Larger font size */ | |
| font-weight: 700; /* Bolder font */ | |
| color: #5200a2; /* Updated purple color */ | |
| margin-bottom: 20px; | |
| } | |
| /* Input Field Styles */ | |
| #roi-calculator-container label { | |
| display: block; | |
| text-align: left; | |
| font-size: 14px; | |
| margin-bottom: 5px; | |
| color: #555; | |
| } | |
| #roi-calculator-container input { | |
| width: 100%; | |
| padding: 12px; | |
| margin-bottom: 20px; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| #roi-calculator-container input:focus { | |
| border-color: #6CBCA1; | |
| outline: none; | |
| } | |
| /* Button Styles */ | |
| #roi-calculator-container button { | |
| width: 100%; | |
| padding: 15px; | |
| font-size: 16px; | |
| background-color: #5200a2; /* Updated purple color for button */ | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| #roi-calculator-container button:hover { | |
| background-color: #3e0080; /* Darker purple on hover */ | |
| } | |
| /* Result Styles */ | |
| #roi-calculator-container h3 { | |
| margin-top: 30px; | |
| font-size: 20px; | |
| color: #5200a2; /* Updated purple color */ | |
| } | |
| #roi-calculator-container p { | |
| font-size: 16px; | |
| margin: 10px 0; | |
| color: #333; | |
| } | |
| #roi-calculator-container span.result { | |
| font-weight: 600; | |
| color: #333; | |
| } | |
| /* Custom Styles for Specific Text */ | |
| #monthlyLeftOnTable { | |
| color: green; | |
| } | |
| #amountCharged { | |
| color: red; | |
| } | |
| #roi { | |
| color: green; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 480px) { | |
| #roi-calculator-container { | |
| padding: 20px; | |
| } | |
| #roi-calculator-container h1 { | |
| font-size: 24px; | |
| } | |
| #roi-calculator-container h2 { | |
| font-size: 24px; | |
| font-weight: 600; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="roi-calculator-container"> | |
| <!-- Calculator Title --> | |
| <h1>Your Agency Name</h1> <!-- Updated Text --> | |
| <h2>ROI Calculator</h2> | |
| <!-- Input Fields --> | |
| <label for="averageClientValue">Average Client Value:</label> | |
| <input type="number" id="averageClientValue" placeholder="$"> | |
| <label for="missedCallsPerMonth">Missed Calls Per Month:</label> | |
| <input type="number" id="missedCallsPerMonth" placeholder="Enter number"> | |
| <label for="averageCloseRate">Average Close Rate (%):</label> | |
| <input type="number" id="averageCloseRate" placeholder="%"> | |
| <!-- Calculate Button --> | |
| <button onclick="calculateROI()">Calculate My ROI</button> | |
| <!-- Results --> | |
| <h3>Results:</h3> | |
| <p> | |
| Monthly Revenue Left on Table: <span id="monthlyLeftOnTable"></span> | |
| </p> | |
| <p> | |
| Monthly Subscription Fee: <span id="amountCharged">$297.00</span> | |
| </p> | |
| <p> | |
| ROI: <span id="roi"></span> | |
| </p> | |
| </div> | |
| <script> | |
| /* JavaScript for ROI Calculation */ | |
| function calculateROI() { | |
| var averageClientValue = parseFloat(document.getElementById("averageClientValue").value); | |
| var missedCallsPerMonth = parseFloat(document.getElementById("missedCallsPerMonth").value); | |
| var averageCloseRate = parseFloat(document.getElementById("averageCloseRate").value); | |
| var agencyFee = 297; // Agency Fee: $297/month | |
| var monthlyLeftOnTable = (missedCallsPerMonth * averageClientValue * (averageCloseRate / 100)) - agencyFee; | |
| var roi = ((monthlyLeftOnTable - agencyFee) / agencyFee) * 100; | |
| // Set the values and maintain the colors | |
| document.getElementById("monthlyLeftOnTable").innerHTML = "<span class='result' style='color:green;'>$" + monthlyLeftOnTable.toFixed(2) + "</span>"; | |
| document.getElementById("amountCharged").innerHTML = "<span class='result' style='color:red;'>$297.00</span>"; | |
| document.getElementById("roi").innerHTML = "<span class='result' style='color:green;'>" + roi.toFixed(2) + "%</span>"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment