{
    "id": 315,
    "date": "2025-11-19T20:52:10",
    "date_gmt": "2025-11-19T20:52:10",
    "guid": {
        "rendered": "https:\/\/staging.dialogcommerce.com\/?page_id=315"
    },
    "modified": "2025-11-19T20:52:10",
    "modified_gmt": "2025-11-19T20:52:10",
    "slug": "time-savings-calculator",
    "status": "publish",
    "type": "page",
    "link": "https:\/\/staging.dialogcommerce.com\/nl\/time-savings-calculator\/",
    "title": {
        "rendered": "Time Savings Calculator"
    },
    "content": {
        "rendered": "<section class=\"bde-section-315-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-code-block-315-101 bde-code-block\">\n\n  <!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <title>Dialog Email Time Savings Calculator - Dialog Commerce<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root {\n            \/* Brand Colors from JSON *\/\n            --cc-palette-strategic-blue: #0D2A4C;\n            --cc-palette-agent-teal: #00C49A;\n            --cc-palette-agent-teal-dark: #00A360;\n            --cc-palette-azure-blue: #2EA7C0;\n            --cc-palette-accent-red: #B14C4C;\n            --cc-palette-foundation-charcoal: #1A202C;\n            --cc-palette-support-gray: #A0AEC0;\n            --cc-palette-canvas-white: #F7FAFC;\n            --cc-palette-pure-white: #FFFFFF;\n            --bde-palette-navy-blue: #15344B;\n            \n            \/* Additional colors for highlights *\/\n            --success-light: #ECFDF5;\n            --border-light: #E2E8F0;\n        }\n        \n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        html, body {\n            overflow-x: hidden;\n            width: 100%;\n            position: relative;\n        }\n        \n        body {\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n            background-color: var(--cc-palette-canvas-white);\n            color: var(--bde-palette-navy-blue);\n            font-size: 18px;\n            font-weight: 400;\n            line-height: 1.6;\n        }\n        \n        .container {\n            width: 100%;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 48px 24px;\n        }\n        \n        .calculator-section {\n            background: var(--cc-palette-pure-white);\n            border-radius: 16px;\n            box-shadow: 0 10px 25px rgba(21, 52, 75, 0.08);\n            padding: 48px 24px;\n            position: relative;\n            overflow: hidden;\n            width: 100%;\n        }\n        \n        .calculator-section:before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 6px;\n            background: linear-gradient(90deg, var(--cc-palette-azure-blue) 0%, var(--bde-palette-navy-blue) 100%);\n        }\n        \n        .section-heading {\n            font-family: 'Inter', sans-serif;\n            font-size: 36px;\n            font-weight: 700;\n            color: var(--bde-palette-navy-blue);\n            margin-bottom: 24px;\n            position: relative;\n            text-align: center;\n            width: 100%;\n            line-height: 1.3;\n            letter-spacing: -1px;\n        }\n        \n        .section-heading:after {\n            content: '';\n            position: absolute;\n            bottom: -12px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 60px;\n            height: 4px;\n            background: var(--cc-palette-azure-blue);\n            border-radius: 2px;\n        }\n        \n        .calculator-description {\n            text-align: center;\n            width: 100%;\n            max-width: 100%;\n            margin: 32px auto;\n            color: var(--bde-palette-navy-blue);\n            font-size: 20px;\n            font-weight: 400;\n            line-height: 1.6;\n            padding: 0 12px;\n        }\n        \n        .solution-link {\n            color: var(--cc-palette-azure-blue);\n            text-decoration: none;\n            transition: all 0.3s ease;\n            border-bottom: 1px solid transparent;\n        }\n        \n        .solution-link:hover {\n            border-bottom: 1px solid var(--cc-palette-azure-blue);\n        }\n        \n        .solution-link:visited {\n            color: var(--cc-palette-azure-blue);\n        }\n        \n        .calculator-content {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 32px;\n            width: 100%;\n            max-width: 100%;\n            margin: 0 auto;\n        }\n        \n        .input-section, \n        .results-section {\n            background: var(--cc-palette-pure-white);\n            padding: 32px;\n            border-radius: 12px;\n            box-shadow: 0 4px 12px rgba(21, 52, 75, 0.06);\n            border: 1px solid var(--border-light);\n            width: 100%;\n            overflow: hidden;\n        }\n        \n        .results-section {\n            position: relative;\n        }\n        \n        .input-section h2,\n        .results-section h2 {\n            font-family: 'Inter', sans-serif;\n            font-size: 28px;\n            font-weight: 700;\n            color: var(--bde-palette-navy-blue);\n            margin-bottom: 24px;\n            padding-bottom: 12px;\n            border-bottom: 2px solid var(--border-light);\n            line-height: 1.3;\n            letter-spacing: -1px;\n        }\n        \n        .input-group {\n            margin-bottom: 24px;\n            width: 100%;\n        }\n        \n        .input-group label {\n            display: block;\n            font-family: 'Inter', sans-serif;\n            font-size: 16px;\n            font-weight: 600;\n            margin-bottom: 8px;\n            color: var(--bde-palette-navy-blue);\n        }\n        \n        .input-group .slider-value {\n            font-weight: 700;\n            color: var(--cc-palette-azure-blue);\n        }\n        \n        .input-group input[type=\"range\"] {\n            width: 100%;\n            height: 8px;\n            border-radius: 4px;\n            background: var(--border-light);\n            outline: none;\n            -webkit-appearance: none;\n            margin: 8px 0;\n        }\n        \n        .input-group input[type=\"range\"]::-webkit-slider-thumb {\n            -webkit-appearance: none;\n            appearance: none;\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            background: var(--cc-palette-azure-blue);\n            cursor: pointer;\n            box-shadow: 0 2px 8px rgba(46, 167, 192, 0.3);\n            transition: all 0.2s ease;\n        }\n        \n        .input-group input[type=\"range\"]::-webkit-slider-thumb:hover {\n            background: var(--bde-palette-navy-blue);\n            box-shadow: 0 4px 12px rgba(46, 167, 192, 0.4);\n        }\n        \n        .input-group input[type=\"range\"]::-moz-range-thumb {\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            background: var(--cc-palette-azure-blue);\n            cursor: pointer;\n            border: none;\n            box-shadow: 0 2px 8px rgba(46, 167, 192, 0.3);\n        }\n        \n        .range-labels {\n            display: flex;\n            justify-content: space-between;\n            font-size: 12px;\n            color: var(--cc-palette-support-gray);\n            margin-top: 4px;\n        }\n        \n        .efficiency-note {\n            font-size: 14px;\n            color: var(--cc-palette-support-gray);\n            margin-top: 12px;\n            font-style: italic;\n            line-height: 1.4;\n        }\n        \n        .results-box {\n            border-radius: 12px;\n            padding: 8px 0;\n            width: 100%;\n        }\n        \n        .results-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 16px;\n            width: 100%;\n        }\n        \n        .result-item {\n            padding: 20px;\n            border-left: 4px solid var(--border-light);\n            background: var(--cc-palette-canvas-white);\n            border-radius: 0 8px 8px 0;\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n        }\n        \n        .result-item.highlight {\n            border-left-color: var(--cc-palette-azure-blue);\n            background: var(--success-light);\n        }\n        \n        .result-label {\n            font-size: 14px;\n            font-weight: 400;\n            color: var(--cc-palette-support-gray);\n            margin-bottom: 8px;\n            line-height: 1.4;\n        }\n        \n        .result-value {\n            font-size: 24px;\n            font-weight: 700;\n            color: var(--bde-palette-navy-blue);\n            line-height: 1.2;\n        }\n        \n        .result-value.success {\n            color: var(--cc-palette-azure-blue);\n        }\n        \n        .chart-container {\n            margin: 32px 0;\n            height: 200px;\n            position: relative;\n            width: 100%;\n        }\n        \n        .cta-button {\n            display: inline-block;\n            background: var(--cc-palette-azure-blue);\n            color: var(--cc-palette-canvas-white) !important;\n            font-family: 'Inter', sans-serif;\n            font-size: 16px;\n            font-weight: 600;\n            padding: 16px 24px;\n            border-radius: 8px;\n            text-decoration: none;\n            margin-top: 24px;\n            width: 100%;\n            text-align: center;\n            transition: all 0.3s ease;\n            border: none;\n            cursor: pointer;\n            text-transform: none;\n        }\n        \n        .cta-button:hover {\n            background: var(--bde-palette-navy-blue);\n            color: var(--cc-palette-canvas-white) !important;\n            transform: translateY(-2px);\n            box-shadow: 0 8px 20px rgba(46, 167, 192, 0.25);\n        }\n        \n        .cta-button:visited,\n        .cta-button:link {\n            color: var(--cc-palette-canvas-white) !important;\n        }\n        \n        \/* Phone Portrait *\/\n        @media (max-width: 479px) {\n            body {\n                font-size: 16px;\n            }\n            \n            .container {\n                padding: 24px 12px;\n            }\n            \n            .calculator-section {\n                padding: 24px 16px;\n                margin: 0 4px;\n            }\n            \n            .section-heading {\n                font-size: 28px;\n                margin-bottom: 16px;\n            }\n            \n            .calculator-description {\n                font-size: 16px;\n                margin: 20px auto;\n                padding: 0 8px;\n            }\n            \n            .calculator-content {\n                gap: 24px;\n            }\n            \n            .input-section, \n            .results-section {\n                padding: 16px;\n            }\n            \n            .input-section h2,\n            .results-section h2 {\n                font-size: 20px;\n                margin-bottom: 16px;\n            }\n            \n            .input-group {\n                margin-bottom: 20px;\n            }\n            \n            .input-group label {\n                font-size: 14px;\n                margin-bottom: 6px;\n            }\n            \n            .result-item {\n                padding: 16px;\n            }\n            \n            .result-label {\n                font-size: 13px;\n                margin-bottom: 6px;\n            }\n            \n            .result-value {\n                font-size: 20px;\n            }\n            \n            .chart-container {\n                height: 150px;\n                margin: 20px 0;\n            }\n            \n            .cta-button {\n                padding: 14px 20px;\n                font-size: 15px;\n                margin-top: 20px;\n            }\n        }\n        \n        \/* Phone Landscape *\/\n        @media (min-width: 480px) and (max-width: 767px) {\n            .container {\n                padding: 48px 24px;\n            }\n            \n            .calculator-section {\n                padding: 32px 20px;\n            }\n            \n            .section-heading {\n                font-size: 32px;\n                margin-bottom: 20px;\n            }\n            \n            .calculator-description {\n                font-size: 18px;\n                margin: 28px auto;\n            }\n            \n            .calculator-content {\n                gap: 28px;\n            }\n            \n            .input-section, \n            .results-section {\n                padding: 24px;\n            }\n            \n            .input-section h2,\n            .results-section h2 {\n                font-size: 24px;\n                margin-bottom: 20px;\n            }\n            \n            .input-group {\n                margin-bottom: 22px;\n            }\n            \n            .result-item {\n                padding: 18px;\n            }\n            \n            .result-label {\n                font-size: 14px;\n            }\n            \n            .result-value {\n                font-size: 22px;\n            }\n            \n            .chart-container {\n                height: 180px;\n                margin: 28px 0;\n            }\n            \n            .cta-button {\n                padding: 15px 22px;\n                font-size: 15px;\n            }\n        }\n        \n        \/* Tablet Landscape *\/\n        @media (min-width: 768px) and (max-width: 1023px) {\n            .container {\n                padding: 64px 24px;\n            }\n            \n            .calculator-section {\n                padding: 40px 28px;\n            }\n            \n            .section-heading {\n                font-size: 36px;\n                margin-bottom: 24px;\n            }\n            \n            .calculator-description {\n                font-size: 19px;\n                max-width: 85%;\n                margin: 32px auto;\n            }\n            \n            .calculator-content {\n                gap: 32px;\n            }\n            \n            .input-section, \n            .results-section {\n                padding: 28px;\n            }\n            \n            .input-section h2,\n            .results-section h2 {\n                font-size: 26px;\n                margin-bottom: 22px;\n            }\n            \n            .input-group {\n                margin-bottom: 24px;\n            }\n            \n            .input-group label {\n                font-size: 15px;\n            }\n            \n            .results-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 16px;\n            }\n            \n            .result-item {\n                padding: 18px;\n            }\n            \n            .result-label {\n                font-size: 13px;\n            }\n            \n            .result-value {\n                font-size: 22px;\n            }\n            \n            .chart-container {\n                height: 200px;\n                margin: 32px 0;\n            }\n            \n            .cta-button {\n                padding: 16px 24px;\n                font-size: 16px;\n            }\n        }\n        \n        \/* Desktop *\/\n        @media (min-width: 1024px) {\n            .container {\n                padding: 96px 24px;\n            }\n            \n            .calculator-section {\n                padding: 48px 40px;\n            }\n            \n            .section-heading {\n                font-size: 44px;\n                margin-bottom: 28px;\n            }\n            \n            .calculator-description {\n                font-size: 20px;\n                max-width: 75%;\n                margin: 40px auto;\n            }\n            \n            .calculator-content {\n                grid-template-columns: 1fr 1fr;\n                gap: 40px;\n                max-width: 1000px;\n            }\n            \n            .input-section, \n            .results-section {\n                padding: 32px;\n            }\n            \n            .input-section h2,\n            .results-section h2 {\n                font-size: 26px;\n                margin-bottom: 24px;\n            }\n            \n            .input-group {\n                margin-bottom: 26px;\n            }\n            \n            .input-group label {\n                font-size: 16px;\n            }\n            \n            .results-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 18px;\n            }\n            \n            .result-item {\n                padding: 20px;\n            }\n            \n            .result-label {\n                font-size: 14px;\n            }\n            \n            .result-value {\n                font-size: 24px;\n            }\n            \n            .chart-container {\n                height: 220px;\n                margin: 36px 0;\n            }\n            \n            .cta-button {\n                padding: 16px 28px;\n                font-size: 16px;\n            }\n        }\n        \n        \/* Large Desktop *\/\n        @media (min-width: 1200px) {\n            .container {\n                padding: 96px 24px;\n            }\n            \n            .calculator-section {\n                padding: 64px 48px;\n            }\n            \n            .section-heading {\n                font-size: 48px;\n                margin-bottom: 32px;\n            }\n            \n            .calculator-description {\n                font-size: 20px;\n                max-width: 70%;\n                margin: 48px auto;\n            }\n            \n            .calculator-content {\n                max-width: 1000px;\n                gap: 48px;\n            }\n            \n            .input-section, \n            .results-section {\n                padding: 40px;\n            }\n            \n            .input-section h2,\n            .results-section h2 {\n                font-size: 28px;\n                margin-bottom: 28px;\n            }\n            \n            .input-group {\n                margin-bottom: 28px;\n            }\n            \n            .results-grid {\n                gap: 20px;\n            }\n            \n            .result-item {\n                padding: 22px;\n            }\n            \n            .result-value {\n                font-size: 26px;\n            }\n            \n            .chart-container {\n                height: 250px;\n                margin: 40px 0;\n            }\n            \n            .cta-button {\n                padding: 18px 32px;\n                font-size: 16px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <section class=\"container\">\n        <div class=\"calculator-section\" id=\"email-agent-time-savings-calculator\">\n            <h1 class=\"section-heading\">Dialog Email Time Savings Calculator<\/h1>\n            \n            <p class=\"calculator-description\">\n                Discover how much time you can reclaim with our <a href=\"https:\/\/staging.dialogcommerce.com\/nl\/dialog-email\/\" class=\"solution-link\">Dialog Email solution<\/a>.\n                Adjust the sliders below to see your potential productivity gains.\n            <\/p>\n            \n            <div class=\"calculator-content\">\n                <!-- Input Section -->\n                <div class=\"input-section\">\n                    <h2>Your Email Situation<\/h2>\n                    \n                    <div class=\"input-group\">\n                        <label for=\"emails\">Emails per day: <span id=\"emails-value\" class=\"slider-value\">50<\/span><\/label>\n                        <input type=\"range\" id=\"emails\" min=\"10\" max=\"200\" value=\"50\">\n                        <div class=\"range-labels\">\n                            <span>10<\/span>\n                            <span>200<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"input-group\">\n                        <label for=\"timePerEmail\">Average time per email (minutes): <span id=\"timePerEmail-value\" class=\"slider-value\">5<\/span><\/label>\n                        <input type=\"range\" id=\"timePerEmail\" min=\"1\" max=\"20\" value=\"5\">\n                        <div class=\"range-labels\">\n                            <span>1<\/span>\n                            <span>20<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"input-group\">\n                        <label for=\"daysPerWeek\">Working days per week: <span id=\"daysPerWeek-value\" class=\"slider-value\">5<\/span><\/label>\n                        <input type=\"range\" id=\"daysPerWeek\" min=\"1\" max=\"7\" value=\"5\">\n                        <div class=\"range-labels\">\n                            <span>1<\/span>\n                            <span>7<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <h2>Agent Efficiency<\/h2>\n                    \n                    <div class=\"input-group\">\n                        <label for=\"timeReduction\">Time savings with Agent (%): <span id=\"timeReduction-value\" class=\"slider-value\">60<\/span><\/label>\n                        <input type=\"range\" id=\"timeReduction\" min=\"20\" max=\"80\" value=\"60\">\n                        <div class=\"range-labels\">\n                            <span>20%<\/span>\n                            <span>80%<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <p class=\"efficiency-note\">\n                        Our users experience time savings between 20% and 80% depending on email volume and complexity.\n                    <\/p>\n                <\/div>\n                \n                <!-- Results Section -->\n                <div class=\"results-section\">\n                    <h2>Your Estimated Results<\/h2>\n                    \n                    <div class=\"results-box\">\n                        <div class=\"results-grid\">\n                            <div class=\"result-item\">\n                                <p class=\"result-label\">Current time spent on emails<\/p>\n                                <p class=\"result-value\" id=\"currentTime\">16.7 hours\/month<\/p>\n                            <\/div>\n                            \n                            <div class=\"result-item\">\n                                <p class=\"result-label\">Time with Dialog Email<\/p>\n                                <p class=\"result-value\" id=\"agentTime\">6.7 hours\/month<\/p>\n                            <\/div>\n                            \n                            <div class=\"result-item highlight\">\n                                <p class=\"result-label\">Hours saved per month<\/p>\n                                <p class=\"result-value success\" id=\"timeSaved\">10.0 hours<\/p>\n                            <\/div>\n                            \n                            <div class=\"result-item highlight\">\n                                <p class=\"result-label\">Working days saved per year<\/p>\n                                <p class=\"result-value success\" id=\"daysSaved\">15<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"chart-container\">\n                        <canvas id=\"timeChart\"><\/canvas>\n                    <\/div>\n                    \n                    <a href=\"https:\/\/staging.dialogcommerce.com\/nl\/contact\/\" class=\"cta-button\">Start Saving Time Today<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    \n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.7.1\/chart.min.js\"><\/script>\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Initialize variables\n            let timeChart;\n            \n            \/\/ Get elements\n            const emailsSlider = document.getElementById('emails');\n            const timePerEmailSlider = document.getElementById('timePerEmail');\n            const daysPerWeekSlider = document.getElementById('daysPerWeek');\n            const timeReductionSlider = document.getElementById('timeReduction');\n            \n            \/\/ Function to calculate and update results\n            function calculateResults() {\n                \/\/ Get values from sliders\n                const emails = parseInt(emailsSlider.value);\n                const timePerEmail = parseInt(timePerEmailSlider.value);\n                const daysPerWeek = parseInt(daysPerWeekSlider.value);\n                const timeReduction = parseInt(timeReductionSlider.value);\n                \n                \/\/ Calculate time results\n                const dailyEmailTime = emails * timePerEmail;\n                const monthlyTime = (dailyEmailTime * daysPerWeek * 4) \/ 60; \/\/ Convert to hours\n                const timeWithAgent = monthlyTime * (1 - timeReduction\/100);\n                const timeSaved = monthlyTime - timeWithAgent;\n                \n                \/\/ Calculate working days saved (assuming 8-hour workdays)\n                const workdaysSaved = Math.round((timeSaved * 12) \/ 8); \/\/ Annual hours saved \/ 8\n                \n                \/\/ Update result texts\n                document.getElementById('currentTime').textContent = monthlyTime.toFixed(1) + ' hours\/month';\n                document.getElementById('agentTime').textContent = timeWithAgent.toFixed(1) + ' hours\/month';\n                document.getElementById('timeSaved').textContent = timeSaved.toFixed(1) + ' hours';\n                document.getElementById('daysSaved').textContent = workdaysSaved;\n                \n                \/\/ Update chart\n                updateTimeChart(monthlyTime.toFixed(1), timeWithAgent.toFixed(1));\n            }\n            \n            \/\/ Function to update time comparison chart\n            function updateTimeChart(currentTime, agentTime) {\n                const ctx = document.getElementById('timeChart').getContext('2d');\n                \n                \/\/ Destroy existing chart if it exists\n                if (timeChart) timeChart.destroy();\n                \n                \/\/ Adjust font sizes and bar thickness based on screen width\n                const screenWidth = window.innerWidth;\n                let fontSize, maxBarThickness;\n                \n                if (screenWidth < 480) {\n                    fontSize = 9;\n                    maxBarThickness = 45;\n                } else if (screenWidth < 768) {\n                    fontSize = 10;\n                    maxBarThickness = 60;\n                } else if (screenWidth < 1024) {\n                    fontSize = 11;\n                    maxBarThickness = 80;\n                } else if (screenWidth < 1200) {\n                    fontSize = 12;\n                    maxBarThickness = 100;\n                } else {\n                    fontSize = 13;\n                    maxBarThickness = 120;\n                }\n                \n                \/\/ Create new chart\n                timeChart = new Chart(ctx, {\n                    type: 'bar',\n                    data: {\n                        labels: ['Without Agent', 'With Agent'],\n                        datasets: [{\n                            label: 'Hours per month',\n                            data: [currentTime, agentTime],\n                            backgroundColor: [\n                                '#A0AEC0',\n                                '#2EA7C0'\n                            ],\n                            borderColor: [\n                                '#718096',\n                                '#15344B'\n                            ],\n                            borderWidth: 1,\n                            maxBarThickness: maxBarThickness\n                        }]\n                    },\n                    options: {\n                        responsive: true,\n                        maintainAspectRatio: false,\n                        plugins: {\n                            legend: {\n                                display: false\n                            },\n                            tooltip: {\n                                callbacks: {\n                                    label: function(context) {\n                                        return context.parsed.y + ' hours\/month';\n                                    }\n                                },\n                                titleFont: {\n                                    size: fontSize,\n                                    family: 'Inter'\n                                },\n                                bodyFont: {\n                                    size: fontSize,\n                                    family: 'Inter'\n                                }\n                            }\n                        },\n                        scales: {\n                            y: {\n                                beginAtZero: true,\n                                title: {\n                                    display: screenWidth >= 480,\n                                    text: 'Hours per Month',\n                                    font: {\n                                        size: fontSize,\n                                        family: 'Inter',\n                                        weight: '600'\n                                    },\n                                    color: '#15344B'\n                                },\n                                ticks: {\n                                    font: {\n                                        size: fontSize,\n                                        family: 'Inter'\n                                    },\n                                    color: '#15344B'\n                                },\n                                grid: {\n                                    color: '#E2E8F0'\n                                }\n                            },\n                            x: {\n                                ticks: {\n                                    font: {\n                                        size: fontSize,\n                                        family: 'Inter',\n                                        weight: '600'\n                                    },\n                                    color: '#15344B'\n                                },\n                                grid: {\n                                    display: false\n                                }\n                            }\n                        }\n                    }\n                });\n            }\n            \n            \/\/ Add event listeners to sliders\n            emailsSlider.addEventListener('input', function() {\n                document.getElementById('emails-value').textContent = this.value;\n                calculateResults();\n            });\n            \n            timePerEmailSlider.addEventListener('input', function() {\n                document.getElementById('timePerEmail-value').textContent = this.value;\n                calculateResults();\n            });\n            \n            daysPerWeekSlider.addEventListener('input', function() {\n                document.getElementById('daysPerWeek-value').textContent = this.value;\n                calculateResults();\n            });\n            \n            timeReductionSlider.addEventListener('input', function() {\n                document.getElementById('timeReduction-value').textContent = this.value;\n                calculateResults();\n            });\n            \n            \/\/ Handle window resize for chart responsiveness\n            window.addEventListener('resize', function() {\n                calculateResults(); \/\/ This will also update the chart with proper sizing\n            });\n            \n            \/\/ Initial calculation\n            calculateResults();\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n\n<\/div><\/div>\n<\/section>",
        "protected": false
    },
    "excerpt": {
        "rendered": "<p>Dialog Email Time Savings Calculator &#8211; Dialog Commerce Dialog Email Time Savings Calculator Discover how much time you can reclaim with our Dialog Email solution. Adjust the sliders below to see your potential productivity gains. Your Email Situation Emails per day: 50 10 200 Average time per email (minutes): 5 1 20 Working days per [&hellip;]<\/p>",
        "protected": false
    },
    "author": 1,
    "featured_media": 0,
    "parent": 0,
    "menu_order": 0,
    "comment_status": "closed",
    "ping_status": "closed",
    "template": "",
    "meta": {
        "_breakdance_hide_in_design_set": false,
        "_breakdance_tags": "",
        "footnotes": ""
    },
    "class_list": [
        "post-315",
        "page",
        "type-page",
        "status-publish",
        "hentry"
    ],
    "_links": {
        "self": [
            {
                "href": "https:\/\/staging.dialogcommerce.com\/nl\/wp-json\/wp\/v2\/pages\/315",
                "targetHints": {
                    "allow": [
                        "GET"
                    ]
                }
            }
        ],
        "collection": [
            {
                "href": "https:\/\/staging.dialogcommerce.com\/nl\/wp-json\/wp\/v2\/pages"
            }
        ],
        "about": [
            {
                "href": "https:\/\/staging.dialogcommerce.com\/nl\/wp-json\/wp\/v2\/types\/page"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "https:\/\/staging.dialogcommerce.com\/nl\/wp-json\/wp\/v2\/users\/1"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "https:\/\/staging.dialogcommerce.com\/nl\/wp-json\/wp\/v2\/comments?post=315"
            }
        ],
        "version-history": [
            {
                "count": 4,
                "href": "https:\/\/staging.dialogcommerce.com\/nl\/wp-json\/wp\/v2\/pages\/315\/revisions"
            }
        ],
        "predecessor-version": [
            {
                "id": 319,
                "href": "https:\/\/staging.dialogcommerce.com\/nl\/wp-json\/wp\/v2\/pages\/315\/revisions\/319"
            }
        ],
        "wp:attachment": [
            {
                "href": "https:\/\/staging.dialogcommerce.com\/nl\/wp-json\/wp\/v2\/media?parent=315"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https:\/\/api.w.org\/{rel}",
                "templated": true
            }
        ]
    }
}