Embed

<!DOCTYPE html>
<html>
<head>
    <title>SDR Team ROI Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js">
if (!sessionStorage.getItem("hasReloaded")) {
    sessionStorage.setItem("hasReloaded", "true");
    window.location.reload();
}
</script>

<script>
    window.onload = function() {
        if (performance.navigation.type === 1) {
            console.log('Page reloaded due to browser refresh or user action');
        } else {
            window.location.reload();
        }
    }
</script>

    <style>
        .calculator-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: flex;
            padding: 20px;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            flex-direction: column; /* Align items vertically */
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: left;
            justify-content: left;
        }

        .input-field {
            margin-bottom: 10px;
        }

        label {
            display: block;
            margin-bottom: 20px;
        }

        input[type="number"], input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .calculator-button {
            background: #2F64AD;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 10px;
            padding: 10px; /* Adjust padding as needed */
            width: 35%;
            font-size: 16px; /* Optional: adjust the font size as needed */
        }

        .calculator-button:hover {
            background: #6B6B6B;
        }

        table {
            width: 100%;
            margin-top: 20px;
            margin-bottom: 20px;
            font-size: 0.9em;
            overflow-x: auto;
            padding: 10px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            text-align: right;
            padding: 10px;
        }

        th {
            background-color: #f2f2f2;
        }

        #calculatorSection {
            display: block;
        }

        .subheading {
            font-size: 1.2em; /* Smaller than the main heading */
            color: #666; /* Lighter color for the subheading */
            margin-top: 0; /* Removes any default top margin */
            margin-bottom: 20px; /* Adds some space below the subheading */
        }

        @media screen and (max-width: 600px) {
            table {
                font-size: 0.4em;
                margin-bottom: 20px; /* Adds some space below the subheading */
            }

            th, td {
                padding: 2px;
            }

            .input-field label, .input-field input {
                font-size: 0.8em;
            }
        }
    </style>
</head>
<body>
    <div class="calculator-container">
        <h2>SDR Team ROI Calculator</h2>
        <p class="subheading">Calculate the ROI that an SDR team can bring for your company</p>
        <div id="calculatorSection">
            
            <div class="input-field">
                <label for="callingHours">Actual Calling Hours per Month:</label>
                <input type="number" id="callingHours" name="callingHours" value="100"><br>
            </div>

            <div class="input-field">
                <label for="monthlyCost">Monthly Cost of SDR Operation:</label>
                <input type="number" id="monthlyCost" name="monthlyCost"><br>
            </div>

            <div class="input-field">
                <label for="callsPerHour">Calls per Hour:</label>
                <input type="number" id="callsPerHour" name="callsPerHour" value="10"><br>
            </div>

            <div class="input-field">
                <label for="dmMeetingRate">Meeting Setup Rate (%):</label>
                <input type="number" id="dmMeetingRate" name="dmMeetingRate" value="1.5"><br>
            </div>

            <div class="input-field">
                <label for="meetingToOpportunityRate">% of Meetings Attended and Turn into Opportunity (%):</label>
                <input type="number" id="meetingToOpportunityRate" name="meetingToOpportunityRate" value="50"><br>
            </div>

            <div class="input-field">
                <label for="opportunityToCloseRatio">Opportunity to Close Ratio (%):</label>
                <input type="number" id="opportunityToCloseRatio" name="opportunityToCloseRatio" value="30"><br>
            </div>

            <div class="input-field">
                <label for="averageSpendPerCustomer">Average Spend per Customer per Year ($):</label>
                <input type="number" id="averageSpendPerCustomer" name="averageSpendPerCustomer"><br>
            </div>

            <div class="input-field">
                <label for="salesCycle">Sales Cycle (Months):</label>
                <input type="number" id="salesCycle" name="salesCycle" min="0"><br>
            </div>
            
            <div class="input-field">
                <label for="numberOfSDRs">Number of Sales Reps:</label>
                <input type="number" id="numberOfSDRs" name="numberOfSDRs" min="1"><br>
            </div>

            <button class="calculator-button" onclick="calculateROI()">Calculate ROI</button>

            <div id="resultsSection" style="display:none;">
                <h3>Results:</h3>
                <table border="1">
                    <thead>
                        <tr>
                            <th>Month</th>
                            <th>Meetings Booked</th>
                            <th>Opportunities</th>
                            <th>Sales Won</th>
                            <th>Monthly ROI</th>
                            <th>Cumulative ROI</th>
                        </tr>
                    </thead>
                    <tbody id="resultsBody">
                        
                    </tbody>
                </table>
                <button class="calculator-button" id="exportPdf">Export to PDF</button>
            </div>
        </div>
    </div>
    <script>
       function calculateROI() {
            var callingHours = parseFloat(document.getElementById("callingHours").value);
            var monthlyCost = parseFloat(document.getElementById("monthlyCost").value);
            var callsPerHour = parseFloat(document.getElementById("callsPerHour").value);
            var dmMeetingRate = parseFloat(document.getElementById("dmMeetingRate").value) / 100;
            var meetingToOpportunityRate = parseFloat(document.getElementById("meetingToOpportunityRate").value) / 100;
            var opportunityToCloseRatio = parseFloat(document.getElementById("opportunityToCloseRatio").value) / 100;
            var averageSpendPerCustomer = parseFloat(document.getElementById("averageSpendPerCustomer").value);
            var salesCycle = parseInt(document.getElementById("salesCycle").value);
			var numberOfSDRs = parseInt(document.getElementById("numberOfSDRs").value);

            var resultsHtml = "";
            var cumulativeRevenue = 0;

            for (var month = 1; month <= 12; month++) {
                var rampUpFactor = month === 1 ? 0.15 : month === 2 ? 0.30 : month === 3 ? 0.40 : month === 4 ? 0.65 : month === 5 ? 0.85 : 1;
                var callsMade = callingHours * callsPerHour * numberOfSDRs * rampUpFactor;
                var meetingsBooked = callsMade * dmMeetingRate;
                var opportunities = meetingsBooked * meetingToOpportunityRate;
                var salesWon = month > salesCycle ? opportunities * opportunityToCloseRatio : 0;

                var revenue = month > salesCycle ? salesWon * averageSpendPerCustomer : 0;
                revenue -= monthlyCost;
                cumulativeRevenue += revenue;

                resultsHtml += "<tr><td>" + month + "</td><td>" + numberWithCommas(meetingsBooked.toFixed(2)) + "</td><td>" + numberWithCommas(opportunities.toFixed(2)) + "</td><td>" + numberWithCommas(salesWon.toFixed(2)) + "</td><td>" + numberWithCommas(revenue.toFixed(2)) + "</td><td>" + numberWithCommas(cumulativeRevenue.toFixed(2)) + "</td></tr>";
            }

            document.getElementById("resultsBody").innerHTML = resultsHtml;
            document.getElementById("resultsSection").style.display = "block";
            scrollToResults();
        }

        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        function scrollToResults() {
            document.getElementById("resultsSection").scrollIntoView({ behavior: 'smooth' });
        }

function exportTableToPDF() {
    const logoUrl = 'https://cdn.durable.co/blocks/14V9VsdJavZPcaSCPbmtZT4Jw0sotDdQBrEdfDh6qxJtwhMuWw3bOjg0lVWt4YPy.png'; // URL or path to your logo image
    const scaleFactor = .6; // Adjust this value as needed

    html2canvas(document.getElementById('resultsSection'), { scale: 1 }).then(function(canvas) {
        // Scale the canvas
        const canvasScaled = scaleCanvas(canvas, scaleFactor);

        const imgData = canvasScaled.toDataURL('image/png', 3.0);
        const pdf = new window.jspdf.jsPDF('l', 'pt', 'a4');  // Adjust as needed

        const logoImg = new Image();
        logoImg.src = logoUrl;
        logoImg.onload = function() {
            const pdfPageWidth = 842; // Width of an A4 page in landscape mode
            const logoWidth = 150; // Width of the logo
            const logoHeight = 100; // Height of the logo

            // Calculate x-coordinate to center the logo
            const xLogo = (pdfPageWidth / 2) - (logoWidth / 2);

            // Add centered logo to PDF
            pdf.addImage(logoImg, 'PNG', xLogo, 10, logoWidth, logoHeight);

            // Adjust the position of the table, moving it down to avoid overlapping the logo
            pdf.addImage(imgData, 'PNG', 60, 100, canvasScaled.width, canvasScaled.height);

            pdf.save('results.pdf');
        };
    });
}

function scaleCanvas(canvas, scaleFactor) {
    var scaledCanvas = document.createElement('canvas');
    scaledCanvas.width = canvas.width * scaleFactor;
    scaledCanvas.height = canvas.height * scaleFactor;

    var ctx = scaledCanvas.getContext('2d');
    ctx.scale(scaleFactor, scaleFactor);
    ctx.drawImage(canvas, 0, 0);

    return scaledCanvas;
}

// DOMContentLoaded event listener
        document.addEventListener('DOMContentLoaded', function() {
// Attach the calculateROI function to the click event of the button
    var calculatorButton = document.querySelector(".calculator-button");
    if (calculatorButton) {
        calculatorButton.addEventListener('click', calculateROI);
    }
// Event listener for the export button
            // Event listener for the export button
            document.getElementById('exportPdf').addEventListener('click', exportTableToPDF);
});
    </script>
</body>
</html>

Icebreaker Business Development