B2B Customer Journey Dashboard
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>B2B Customer Journey Intelligence Dashboard</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> </head> <body> <div class="d-flex"> <!-- Sidebar --> <div class="sidebar d-none d-md-block col-md-3 col-lg-2"> <div class="px-3 mb-4"> <h4 class="text-center">RevIntel</h4> </div> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#"> <i class="mdi mdi-view-dashboard"></i> <span>Dashboard</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="mdi mdi-chart-line"></i> <span>Attribution Analysis</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="mdi mdi-account-multiple"></i> <span>Customer Journeys</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="mdi mdi-cash-multiple"></i> <span>Revenue Impact</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="mdi mdi-account-box-outline"></i> <span>Account Insights</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="mdi mdi-settings"></i> <span>Settings</span> </a> </li> </ul> </div> <!-- Main Content --> <div class="main-content col-12 col-md-9 col-lg-10"> <div class="container-fluid"> <!-- Header --> <div class="d-flex justify-content-between align-items-center mb-4"> <h2 class="mb-0">Customer Journey Intelligence</h2> <div> <select class="form-select form-select-sm" style="width: 200px; display: inline-block;"> <option>Last 30 Days</option> <option>Last Quarter</option> <option>Last 6 Months</option> <option selected>Last 12 Months</option> </select> <button class="btn btn-sm btn-primary ms-2"> <i class="mdi mdi-refresh"></i> Refresh </button> </div> </div> <!-- Metrics Row --> <div class="row mb-4"> <div class="col-md-3"> <div class="card metric-card"> <div class="metric-label">Total Opportunities</div> <div class="metric-value">1,248</div> <div class="text-success"> <i class="mdi mdi-arrow-up"></i> 12.5% from last period </div> </div> </div> <div class="col-md-3"> <div class="card metric-card"> <div class="metric-label">Average Deal Size</div> <div class="metric-value">$42.5K</div> <div class="text-success"> <i class="mdi mdi-arrow-up"></i> 8.3% from last period </div> </div> </div> <div class="col-md-3"> <div class="card metric-card"> <div class="metric-label">Avg. Sales Cycle</div> <div class="metric-value">87 days</div> <div class="text-danger"> <i class="mdi mdi-arrow-down"></i> 5.2% from last period </div> </div> </div> <div class="col-md-3"> <div class="card metric-card"> <div class="metric-label">Overall Conversion</div> <div class="metric-value">3.8%</div> <div class="text-success"> <i class="mdi mdi-arrow-up"></i> 1.1% from last period </div> </div> </div> </div> <!-- Main Charts Row --> <div class="row"> <!-- Conversion Rate by Journey Stage --> <div class="col-lg-6"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <span>Conversion Rate by Journey Stage</span> <div> <button class="btn btn-sm btn-outline-secondary">View Details</button> </div> </div> <div class="card-body"> <div class="journey-stage"> <div class="stage-header"> <span class="stage-name">Awareness</span> <span class="stage-conversion">12.5% →</span> </div> <div class="progress"> <div class="progress-bar bg-primary" role="progressbar" style="width: 12.5%" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="journey-stage"> <div class="stage-header"> <span class="stage-name">Consideration</span> <span class="stage-conversion">8.3% →</span> </div> <div class="progress"> <div class="progress-bar bg-primary" role="progressbar" style="width: 8.3%" aria-valuenow="8.3" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="journey-stage"> <div class="stage-header"> <span class="stage-name">Evaluation</span> <span class="stage-conversion">5.7% →</span> </div> <div class="progress"> <div class="progress-bar bg-primary" role="progressbar" style="width: 5.7%" aria-valuenow="5.7" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="journey-stage"> <div class="stage-header"> <span class="stage-name">Decision</span> <span class="stage-conversion">3.8% →</span> </div> <div class="progress"> <div class="progress-bar bg-primary" role="progressbar" style="width: 3.8%" aria-valuenow="3.8" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="mt-3"> <small class="text-muted">* Conversion rates show percentage moving to next stage</small> </div> </div> </div> </div> <!-- Attributed Revenue by Channel --> <div class="col-lg-6"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <span>Attributed Revenue by Channel (Last 12M)</span> <div class="btn-group btn-group-sm"> <button class="btn btn-outline-secondary active">First Touch</button> <button class="btn btn-outline-secondary">Last Touch</button> <button class="btn btn-outline-secondary">Linear</button> </div> </div> <div class="card-body"> <div id="revenueChart" style="min-height: 300px;"></div> <div class="mt-3"> <div class="row"> <div class="col-6"> <span class="badge-channel" style="background-color: #3498db; color: white;">Paid Search: $2.4M (28%)</span> <span class="badge-channel" style="background-color: #2ecc71; color: white;">Content: $1.8M (21%)</span> <span class="badge-channel" style="background-color: #f39c12; color: white;">Webinars: $1.2M (14%)</span> </div> <div class="col-6"> <span class="badge-channel" style="background-color: #9b59b6; color: white;">Email: $1.1M (13%)</span> <span class="badge-channel" style="background-color: #e74c3c; color: white;">Social: $0.9M (11%)</span> <span class="badge-channel" style="background-color: #1abc9c; color: white;">Direct: $0.6M (7%)</span> </div> </div> </div> </div> </div> </div> </div> <!-- Second Row --> <div class="row mt-4"> <!-- Customer Engagement Heatmap --> <div class="col-lg-6"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <span>Customer Engagement Heatmap Across Touchpoints</span> <div> <select class="form-select form-select-sm" style="width: 150px; display: inline-block;"> <option>All Segments</option> <option>SMB</option> <option>Mid-Market</option> <option>Enterprise</option> </select> </div> </div> <div class="card-body"> <div class="heatmap-container"> <div id="heatmapChart" style="min-height: 300px;"></div> </div> <div class="mt-3"> <small class="text-muted">* Heat intensity shows engagement level at each touchpoint in the journey</small> </div> </div> </div> </div> <!-- Predicted Path to Conversion --> <div class="col-lg-6"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <span>Predicted Path to Conversion (Active Opportunities)</span> <div> <button class="btn btn-sm btn-outline-secondary">See All</button> </div> </div> <div class="card-body"> <div class="path-node"> <div class="node-icon"> <i class="mdi mdi-account"></i> </div> <div class="node-content"> <div class="node-title">Acme Corp (75% win probability)</div> <div class="node-meta">Enterprise | $120K potential | 45 days in pipeline</div> </div> <div class="node-arrow"> <i class="mdi mdi-chevron-right"></i> </div> </div> <div class="path-node"> <div class="node-icon" style="background-color: #2ecc71;"> <i class="mdi mdi-email"></i> </div> <div class="node-content"> <div class="node-title">Initial email campaign</div> <div class="node-meta">Opened 3 times | 2 content downloads</div> </div> <div class="node-arrow"> <i class="mdi mdi-chevron-right"></i> </div> </div> <div class="path-node"> <div class="node-icon" style="background-color: #f39c12;"> <i class="mdi mdi-video"></i> </div> <div class="node-content"> <div class="node-title">Product webinar attended</div> <div class="node-meta">90% attendance duration | 3 questions asked</div> </div> <div class="node-arrow"> <i class="mdi mdi-chevron-right"></i> </div> </div> <div class="path-node"> <div class="node-icon" style="background-color: #9b59b6;"> <i class="mdi mdi-phone"></i> </div> <div class="node-content"> <div class="node-title">Discovery call completed</div> <div class="node-meta">45 mins | 2 stakeholders present</div> </div> <div class="node-arrow"> <i class="mdi mdi-chevron-right"></i> </div> </div> <div class="path-node"> <div class="node-icon" style="background-color: #e74c3c;"> <i class="mdi mdi-file-document"></i> </div> <div class="node-content"> <div class="node-title">Proposal sent</div> <div class="node-meta">Viewed 2 times | Follow-up scheduled</div> </div> </div> <div class="mt-3"> <div> <span class="attribution-badge" style="background-color: #e3f2fd; color: #1976d2;">Email: 32%</span> <span class="attribution-badge" style="background-color: #fff8e1; color: #ff8f00;">Webinar: 28%</span> <span class="attribution-badge" style="background-color: #f3e5f5; color: #8e24aa;">Sales Call: 25%</span> <span class="attribution-badge" style="background-color: #ffebee; color: #d32f2f;">Content: 15%</span> </div> <small class="text-muted">* Multi-touch attribution weights based on historical patterns</small> </div> </div> </div> </div> </div> <!-- Third Row - Opportunity Details --> <div class="row mt-4"> <div class="col-12"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <span>Top Opportunities - Recommended Next Actions</span> <div> <button class="btn btn-sm btn-outline-primary">Export</button> </div> </div> <div class="card-body"> <div class="table-responsive"> <table class="data-table"> <thead> <tr> <th>Account</th> <th>Stage</th> <th>Potential Value</th> <th>Days in Stage</th> <th>Next Best Action</th> <th>Attribution Mix</th> <th>Win Probability</th> </tr> </thead> <tbody> <tr> <td> <strong>Acme Corp</strong><br> <small>Enterprise</small> </td> <td>Proposal</td> <td>$120,000</td> <td>12</td> <td> <span class="badge bg-primary">Schedule executive alignment call</span> </td> <td> <div class="progress" style="height: 10px;"> <div class="progress-bar bg-success" style="width: 32%"></div> <div class="progress-bar bg-warning" style="width: 28%"></div> <div class="progress-bar" style="width: 25%"></div> <div class="progress-bar bg-danger" style="width: 15%"></div> </div> </td> <td> <div class="progress" style="height: 10px;"> <div class="progress-bar bg-success" style="width: 75%"></div> </div> <small>75%</small> </td> </tr> <tr> <td> <strong>Beta Solutions</strong><br> <small>Mid-Market</small> </td> <td>Evaluation</td> <td>$65,000</td> <td>18</td> <td> <span class="badge bg-info">Send case study + technical deep dive</span> </td> <td> <div class="progress" style="height: 10px;"> <div class="progress-bar bg-info" style="width: 40%"></div> <div class="progress-bar bg-warning" style="width: 35%"></div> <div class="progress-bar" style="width: 25%"></div> </div> </td> <td> <div class="progress" style="height: 10px;"> <div class="progress-bar bg-success" style="width: 60%"></div> </div> <small>60%</small> </td> </tr> <tr> <td> <strong>Gamma Industries</strong><br> <small>Enterprise</small> </td> <td>Discovery</td> <td>$220,000</td> <td>7</td> <td> <span class="badge bg-secondary">Invite to upcoming customer event</span> </td> <td> <div class="progress" style="height: 10px;"> <div class="progress-bar bg-success" style="width: 45%"></div> <div class="progress-bar bg-danger" style="width: 30%"></div> <div class="progress-bar" style="width: 25%"></div> </div> </td> <td> <div class="progress" style="height: 10px;"> <div class="progress-bar bg-success" style="width: 40%"></div> </div> <small>40%</small> </td> </tr> <tr> <td> <strong>Delta Tech</strong><br> <small>Mid-Market</small> </td> <td>Consideration</td> <td>$45,000</td> <td>22</td> <td> <span class="badge bg-warning text-dark">Schedule product demo</span> </td> <td> <div class="progress" style="height: 10px;"> <div class="progress-bar bg-danger" style="width: 50%"></div> <div class="progress-bar" style="width: 30%"></div> <div class="progress-bar bg-info" style="width: 20%"></div> </div> </td> <td> <div class="progress" style="height: 10px;"> <div class="progress-bar bg-success" style="width: 35%"></div> </div> <small>35%</small> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
CSS
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --dark-color: #2c3e50; --light-color: #ecf0f1; --warning-color: #f39c12; --danger-color: #e74c3c; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f7fa; } .card { border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 20px; border: none; } .card-header { background-color: white; border-bottom: 1px solid #e0e0e0; font-weight: 600; padding: 15px 20px; border-radius: 10px 10px 0 0 !important; } .navbar-brand { font-weight: 700; color: var(--dark-color); } .sidebar { background-color: white; height: 100vh; position: fixed; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); padding-top: 20px; } .sidebar .nav-link { color: var(--dark-color); margin-bottom: 5px; border-radius: 5px; padding: 10px 15px; } .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: var(--primary-color); color: white; } .sidebar .nav-link i { margin-right: 10px; } .main-content { margin-left: 250px; padding: 20px; background-color: #f5f7fa; } @media (max-width: 992px) { .sidebar { width: 70px; overflow: hidden; } .sidebar .nav-link span { display: none; } .sidebar .nav-link i { margin-right: 0; font-size: 1.2rem; } .main-content { margin-left: 70px; } } @media (max-width: 768px) { .sidebar { display: none; } .main-content { margin-left: 0; } } .metric-card { text-align: center; padding: 20px; } .metric-value { font-size: 2rem; font-weight: 700; margin: 10px 0; } .metric-label { color: #7f8c8d; font-size: 0.9rem; } .trend-up { color: var(--secondary-color); } .trend-down { color: var(--danger-color); } .heatmap-container { width: 100%; overflow-x: auto; } .journey-stage { padding: 15px; border-radius: 8px; margin-bottom: 15px; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .stage-header { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; } .stage-name { font-weight: 600; color: var(--dark-color); } .stage-conversion { background-color: var(--light-color); padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .progress { height: 8px; border-radius: 4px; } .path-node { display: flex; align-items: center; margin-bottom: 10px; } .node-icon { width: 30px; height: 30px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; margin-right: 10px; flex-shrink: 0; } .node-content { flex-grow: 1; } .node-title { font-weight: 600; margin-bottom: 2px; } .node-meta { font-size: 0.8rem; color: #7f8c8d; } .node-arrow { color: #bdc3c7; margin: 0 10px; } .attribution-badge { padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin-right: 5px; margin-bottom: 5px; display: inline-block; } .tooltip-inner { max-width: 350px; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e0e0e0; } .data-table th { font-weight: 600; color: var(--dark-color); background-color: #f8f9fa; } .data-table tr:hover { background-color: #f5f5f5; } .badge-channel { padding: 5px 10px; border-radius: 4px; font-weight: 500; font-size: 0.75rem; }
JavaScript
// Revenue by Channel Chart var revenueOptions = { series: [{ name: 'Attributed Revenue', data: [2400000, 1800000, 1200000, 1100000, 900000, 600000] }], chart: { type: 'bar', height: 350, toolbar: { show: false } }, plotOptions: { bar: { borderRadius: 4, horizontal: true, distributed: true, } }, colors: ['#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#e74c3c', '#1abc9c'], dataLabels: { enabled: false }, xaxis: { categories: ['Paid Search', 'Content', 'Webinars', 'Email', 'Social', 'Direct'], labels: { formatter: function(value) { return '$' + (value / 1000000).toFixed(1) + 'M'; } } }, yaxis: { labels: { style: { fontSize: '12px', fontWeight: 600 } } }, tooltip: { y: { formatter: function(value) { return '$' + (value / 1000).toFixed(0) + 'K'; } } } }; var revenueChart = new ApexCharts(document.querySelector("#revenueChart"), revenueOptions); revenueChart.render(); // Heatmap Chart var heatmapOptions = { series: [{ name: 'Awareness', data: generateHeatmapData(5, 8, 10) }, { name: 'Consideration', data: generateHeatmapData(5, 8, 20) }, { name: 'Evaluation', data: generateHeatmapData(5, 8, 30) }, { name: 'Decision', data: generateHeatmapData(5, 8, 40) }], chart: { height: 350, type: 'heatmap', toolbar: { show: false } }, dataLabels: { enabled: false }, colors: ["#f3f4f5", "#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8"], xaxis: { type: 'category', categories: ['Paid Ads', 'Organic Search', 'Content', 'Webinars', 'Email', 'Social', 'Sales Calls', 'Support'] }, title: { text: 'Engagement Intensity by Touchpoint', align: 'center', style: { fontSize: '14px', fontWeight: 'bold' } }, tooltip: { custom: function({ series, seriesIndex, dataPointIndex, w }) { const stages = ['Awareness', 'Consideration', 'Evaluation', 'Decision']; const touchpoints = ['Paid Ads', 'Organic Search', 'Content', 'Webinars', 'Email', 'Social', 'Sales Calls', 'Support']; const value = series[seriesIndex][dataPointIndex]; return `<div class="p-2"> <div><strong>${stages[seriesIndex]}</strong></div> <div>${touchpoints[dataPointIndex]}</div> <div>Engagement: ${value}%</div> </div>`; } } }; function generateHeatmapData(rows, cols, offset) { var data = []; for (var i = 0; i < cols; i++) { data.push({ x: 'Touchpoint ' + (i + 1), y: Math.floor(Math.random() * 50) + offset }); } return data; } var heatmapChart = new ApexCharts(document.querySelector("#heatmapChart"), heatmapOptions); heatmapChart.render();
Output Preview
Desktop
Mobile
Fullscreen