<!-- ROAS Calculator Tool - WordPress Embeddable --> <!-- Copy this entire code into a Custom HTML block in WordPress/Elementor --> <h1>ROAS Calculator</h1> <!-- Left Panel - Input Section --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> </svg> Campaign Data <label for="roasc-ad-spend">Total Ad Spend</label> $ <input type="number" id="roasc-ad-spend" placeholder="e.g. 1000" min="0" step="0.01"> <label for="roasc-revenue">Total Revenue (Conversion Value)</label> $ <input type="number" id="roasc-revenue" placeholder="e.g. 4500" min="0" step="0.01"> <button type="button" id="roasc-reset-btn"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> </svg> Reset </button> Visual Breakdown: Cost Profit <!-- Right Panel - Results Section --> ROAS (RETURN ON AD SPEND) 0.00x Enter campaign data ROAS % 0% ROI % 0% Total Net Profit $0.00 <style> /* ROAS Calculator Styles - High Specificity for WordPress */ #roasc-calculator-wrapper.roasc-calculator-wrapper { --roasc-primary: #4150F6; --roasc-primary-light: #6B77F8; --roasc-primary-dark: #2E3CD4; --roasc-bg: #FFFFFF; --roasc-surface: #F8F9FC; --roasc-border: #E2E8F0; --roasc-text: #1E293B; --roasc-text-muted: #64748B; --roasc-success: #10B981; --roasc-danger: #EF4444; --roasc-shadow: 0 4px 20px rgba(65, 80, 246, 0.08); --roasc-shadow-hover: 0 8px 30px rgba(65, 80, 246, 0.15); --roasc-radius: 12px; --roasc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; box-sizing: border-box !important; max-width: 940px !important; margin: 0 auto !important; padding: 20px !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } #roasc-calculator-wrapper.roasc-calculator-wrapper *, #roasc-calculator-wrapper.roasc-calculator-wrapper *::before, #roasc-calculator-wrapper.roasc-calculator-wrapper *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } #roasc-calculator-wrapper .roasc-title { font-size: 28px !important; font-weight: 700 !important; color: var(--roasc-text) !important; text-align: center !important; margin-bottom: 24px !important; letter-spacing: -0.5px !important; background: linear-gradient(135deg, var(--roasc-primary) 0%, var(--roasc-primary-light) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } #roasc-calculator-wrapper .roasc-container { display: flex !important; gap: 20px !important; width: 100% !important; min-height: 420px !important; } #roasc-calculator-wrapper .roasc-panel { background: var(--roasc-bg) !important; border-radius: var(--roasc-radius) !important; border: 1px solid var(--roasc-border) !important; box-shadow: var(--roasc-shadow) !important; transition: var(--roasc-transition) !important; padding: 24px !important; } #roasc-calculator-wrapper .roasc-panel:hover { box-shadow: var(--roasc-shadow-hover) !important; } #roasc-calculator-wrapper .roasc-input-panel { flex: 1 !important; display: flex !important; flex-direction: column !important; } #roasc-calculator-wrapper .roasc-results-panel { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; background: linear-gradient(180deg, var(--roasc-bg) 0%, var(--roasc-surface) 100%) !important; } #roasc-calculator-wrapper .roasc-panel-header { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 20px !important; } #roasc-calculator-wrapper .roasc-icon { width: 22px !important; height: 22px !important; color: var(--roasc-primary) !important; } #roasc-calculator-wrapper .roasc-panel-title { font-size: 18px !important; font-weight: 600 !important; color: var(--roasc-text) !important; } #roasc-calculator-wrapper .roasc-form-group { margin-bottom: 18px !important; } #roasc-calculator-wrapper .roasc-label { display: block !important; font-size: 15px !important; font-weight: 500 !important; color: var(--roasc-text) !important; margin-bottom: 8px !important; } #roasc-calculator-wrapper .roasc-input-wrapper { position: relative !important; display: flex !important; align-items: center !important; } #roasc-calculator-wrapper .roasc-currency { position: absolute !important; left: 14px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--roasc-text-muted) !important; pointer-events: none !important; } #roasc-calculator-wrapper .roasc-input { width: 100% !important; height: 46px !important; padding: 12px 14px 12px 32px !important; font-size: 15px !important; font-weight: 400 !important; color: var(--roasc-text) !important; background: var(--roasc-surface) !important; border: 1.5px solid var(--roasc-border) !important; border-radius: 10px !important; outline: none !important; transition: var(--roasc-transition) !important; font-family: inherit !important; } #roasc-calculator-wrapper .roasc-input:focus { border-color: var(--roasc-primary) !important; background: var(--roasc-bg) !important; box-shadow: 0 0 0 3px rgba(65, 80, 246, 0.12) !important; } #roasc-calculator-wrapper .roasc-input::placeholder { color: var(--roasc-text-muted) !important; opacity: 0.7 !important; } #roasc-calculator-wrapper .roasc-reset-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 44px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--roasc-text-muted) !important; background: var(--roasc-surface) !important; border: 1.5px solid var(--roasc-border) !important; border-radius: 10px !important; cursor: pointer !important; transition: var(--roasc-transition) !important; font-family: inherit !important; margin-top: 4px !important; margin-bottom: 18px !important; } #roasc-calculator-wrapper .roasc-reset-btn:hover { background: var(--roasc-bg) !important; border-color: var(--roasc-primary) !important; color: var(--roasc-primary) !important; } #roasc-calculator-wrapper .roasc-btn-icon { width: 16px !important; height: 16px !important; } #roasc-calculator-wrapper .roasc-breakdown { margin-top: auto !important; } #roasc-calculator-wrapper .roasc-breakdown-title { font-size: 15px !important; font-weight: 600 !important; color: var(--roasc-text) !important; } #roasc-calculator-wrapper .roasc-legend { display: flex !important; gap: 16px !important; margin-left: 8px !important; margin-bottom: 10px !important; margin-top: 10px !important; } #roasc-calculator-wrapper .roasc-legend-item { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 15px !important; color: var(--roasc-text-muted) !important; } #roasc-calculator-wrapper .roasc-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; } #roasc-calculator-wrapper .roasc-dot-cost { background: var(--roasc-danger) !important; } #roasc-calculator-wrapper .roasc-dot-profit { background: var(--roasc-success) !important; } #roasc-calculator-wrapper .roasc-progress-bar { display: flex !important; height: 10px !important; background: var(--roasc-surface) !important; border-radius: 6px !important; overflow: hidden !important; border: 1px solid var(--roasc-border) !important; } #roasc-calculator-wrapper .roasc-cost-bar { height: 100% !important; background: linear-gradient(90deg, var(--roasc-danger) 0%, #F87171 100%) !important; transition: width 0.5s ease !important; min-width: 0 !important; flex-shrink: 0 !important; } #roasc-calculator-wrapper .roasc-profit-bar { height: 100% !important; background: linear-gradient(90deg, #34D399 0%, var(--roasc-success) 100%) !important; transition: width 0.5s ease !important; min-width: 0 !important; flex-shrink: 0 !important; } #roasc-calculator-wrapper .roasc-main-result { text-align: center !important; padding: 20px 0 !important; } #roasc-calculator-wrapper .roasc-result-label { display: block !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1px !important; color: var(--roasc-text-muted) !important; text-transform: uppercase !important; margin-bottom: 8px !important; } #roasc-calculator-wrapper .roasc-roas-value { font-size: 52px !important; font-weight: 700 !important; color: var(--roasc-primary) !important; line-height: 1.1 !important; letter-spacing: -2px !important; transition: var(--roasc-transition) !important; } #roasc-calculator-wrapper .roasc-roas-value.roasc-positive { color: var(--roasc-success) !important; } #roasc-calculator-wrapper .roasc-roas-value.roasc-negative { color: var(--roasc-danger) !important; } #roasc-calculator-wrapper .roasc-result-hint { display: block !important; font-size: 15px !important; color: var(--roasc-text-muted) !important; margin-top: 8px !important; } #roasc-calculator-wrapper .roasc-metrics-row { display: flex !important; gap: 12px !important; width: 100% !important; } #roasc-calculator-wrapper .roasc-metric-card { flex: 1 !important; background: var(--roasc-surface) !important; border-radius: 10px !important; padding: 16px !important; text-align: center !important; border: 1px solid var(--roasc-border) !important; } #roasc-calculator-wrapper .roasc-metric-label { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--roasc-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 6px !important; } #roasc-calculator-wrapper .roasc-metric-value { display: block !important; font-size: 22px !important; font-weight: 700 !important; color: var(--roasc-text) !important; } #roasc-calculator-wrapper .roasc-profit-card { width: 100% !important; background: var(--roasc-surface) !important; border-radius: 10px !important; padding: 16px !important; text-align: center !important; border: 1px solid var(--roasc-border) !important; margin-top: 12px !important; } #roasc-calculator-wrapper .roasc-profit-label { display: block !important; font-size: 15px !important; font-weight: 500 !important; color: var(--roasc-text-muted) !important; margin-bottom: 6px !important; } #roasc-calculator-wrapper .roasc-profit-value { display: block !important; font-size: 26px !important; font-weight: 700 !important; color: var(--roasc-text) !important; transition: var(--roasc-transition) !important; } #roasc-calculator-wrapper .roasc-profit-value.roasc-positive { color: var(--roasc-success) !important; } #roasc-calculator-wrapper .roasc-profit-value.roasc-negative { color: var(--roasc-danger) !important; } /* Responsive Styles */ @media screen and (max-width: 768px) { #roasc-calculator-wrapper .roasc-container { flex-direction: column !important; min-height: auto !important; } #roasc-calculator-wrapper .roasc-title { font-size: 24px !important; margin-bottom: 20px !important; } #roasc-calculator-wrapper .roasc-panel { padding: 20px !important; } #roasc-calculator-wrapper .roasc-roas-value { font-size: 42px !important; } #roasc-calculator-wrapper .roasc-metric-value { font-size: 20px !important; } #roasc-calculator-wrapper .roasc-profit-value { font-size: 22px !important; } } @media screen and (max-width: 480px) { #roasc-calculator-wrapper.roasc-calculator-wrapper { padding: 12px !important; } #roasc-calculator-wrapper .roasc-title { font-size: 22px !important; } #roasc-calculator-wrapper .roasc-panel { padding: 16px !important; } #roasc-calculator-wrapper .roasc-panel-title { font-size: 16px !important; } #roasc-calculator-wrapper .roasc-roas-value { font-size: 36px !important; } #roasc-calculator-wrapper .roasc-metrics-row { gap: 8px !important; } #roasc-calculator-wrapper .roasc-metric-card { padding: 12px !important; } #roasc-calculator-wrapper .roasc-metric-value { font-size: 18px !important; } } /* Hide number input spinners */ #roasc-calculator-wrapper .roasc-input::-webkit-outer-spin-button, #roasc-calculator-wrapper .roasc-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } #roasc-calculator-wrapper .roasc-input[type=number] { -moz-appearance: textfield !important; } </style>
