Skip to content

Commit f1fbf27

Browse files
dannyvankootendannyvankooten
committed
add prettier upsell sectionm to dashboard
1 parent 5e95133 commit f1fbf27

2 files changed

Lines changed: 103 additions & 13 deletions

File tree

‎src/Resources/views/dashboard-page.php‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -207,19 +207,7 @@
207207
<?php // show section about koko analytics pro unless on pro version already ?>
208208
<?php if (!defined('KOKO_ANALYTICS_PRO_VERSION')) : ?>
209209
<?php if (current_user_can('manage_koko_analytics')) : ?>
210-
<div class="p-3 rounded" style="background: #f5f8ff;">
211-
<h2 class="mt-0 mb-2"><?php esc_html_e('Unlock more insights with Koko Analytics Pro', 'koko-analytics'); ?></h2>
212-
<p class="mt-0 mb-2">
213-
<?php esc_html_e('Koko Analytics Pro adds country and device statistics, UTM tracking, custom event tracking and scheduled email reports. All while preserving privacy and not using any third-party services.', 'koko-analytics'); ?>
214-
</p>
215-
<p class="mt-0 mb-0">
216-
<a class="btn btn-sm btn-primary" href="https://www.kokoanalytics.com/pricing/?utm_source=koko-analytics&utm_medium=link&utm_campaign=free-plugin-dashboard-upgrade" rel="noopener noreferrer">
217-
<?php esc_html_e('View pricing', 'koko-analytics'); ?>
218-
</a>
219-
<span>&nbsp;</span>
220-
<a href="https://www.kokoanalytics.com/features/?utm_source=koko-analytics&utm_medium=link&utm_campaign=free-plugin-dashboard-upgrade#pro" rel="noopener noreferrer"><?php esc_html_e('Learn more about Pro', 'koko-analytics'); ?></a>
221-
</p>
222-
</div>
210+
<?php require __DIR__ . '/upsell.php'; ?>
223211
<?php else : ?>
224212
<div class="text-muted text-center mt-5 mb-3">
225213
<?php /* translators: %1s: opening anchor tag for Koko Analytics website. */ ?>

‎src/Resources/views/upsell.php‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<?php
2+
/**
3+
* Koko Analytics Pro upsell banner.
4+
*
5+
* Drop this file in your plugin (e.g. views/koko-pro-upsell.php) and render it
6+
* from your dashboard output with:
7+
*
8+
* $koko_pro_visitors = 622; // total visitors for the selected period
9+
* include __DIR__ . '/views/koko-pro-upsell.php';
10+
*
11+
* No JavaScript, no external assets. Flag glyphs are plain emoji.
12+
* All class names are prefixed with `koko-pro-` to avoid clashing with wp-admin.
13+
*/
14+
15+
if ( ! defined( 'ABSPATH' ) ) { exit; }
16+
17+
// Fallbacks so the file also renders standalone.
18+
$koko_pro_visitors = isset( $totals ) && is_object($totals) ? (int) $totals->visitors : 0;
19+
$koko_pro_price_url = 'https://www.kokoanalytics.com/pricing/?utm_source=koko-analytics&utm_medium=link&utm_campaign=free-plugin-dashboard-upgrade';
20+
$koko_pro_more_url = 'https://www.kokoanalytics.com/features/?utm_source=koko-analytics&utm_medium=link&utm_campaign=free-plugin-dashboard-upgrade#pro-features';
21+
?>
22+
<style>
23+
.koko-pro-wrap *{box-sizing:border-box}
24+
.koko-pro-wrap{container-type:inline-size;container-name:kokopro}
25+
.koko-pro-banner{position:relative;display:grid;grid-template-columns:1.35fr 0.95fr 320px;gap:34px;align-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1d2939;background:linear-gradient(105deg,#fbf8f7 0%,#f6f0ef 55%,#f2e9e8 100%);border:1px solid #eaddda;border-radius:10px;padding:30px 34px;margin:0 0 1.5rem;overflow:hidden}
26+
.koko-pro-brandrow{display:flex;align-items:center;gap:9px}
27+
.koko-pro-logo{width:26px;height:26px;flex:none;display:block;filter:drop-shadow(0 1px 1px rgba(140,2,4,.18))}
28+
.koko-pro-logo svg{width:100%;height:100%;display:block}
29+
.koko-pro-badge{display:inline-flex;align-items:baseline;gap:6px;color:#8a7778;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
30+
.koko-pro-badge b{color:#b60205;font-weight:700}
31+
.koko-pro-h{font-size:23px;line-height:1.22;font-weight:700;letter-spacing:-.01em;margin:14px 0 8px;color:#2a1416}
32+
.koko-pro-h em{font-style:normal;color:inherit;text-decoration:none}
33+
.koko-pro-sub{font-size:14px;line-height:1.55;color:#5a4b4c;max-width:44ch;margin:0}
34+
.koko-pro-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
35+
.koko-pro-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#4a3436;background:#fff;border:1px solid #ecd9d9;padding:6px 11px 6px 9px;border-radius:20px}
36+
.koko-pro-chip svg{flex:none}
37+
.koko-pro-peek{position:relative;background:#fff;border:1px solid #eddcda;border-radius:9px;padding:13px 15px 15px;box-shadow:0 1px 2px rgba(140,2,4,.05)}
38+
.koko-pro-peek-h{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#a08d8d;margin-bottom:10px}
39+
.koko-pro-lock{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#6a747e;background:#eef1f4;border:1px solid #dde3e9;padding:3px 8px;border-radius:20px}
40+
.koko-pro-prow{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #f6eeed}
41+
.koko-pro-prow:first-of-type{border-top:none}
42+
.koko-pro-flag{font-size:15px;line-height:1;width:20px;text-align:center}
43+
.koko-pro-pname{font-size:13px;color:#4a3a3b;flex:1}
44+
.koko-pro-pbar{height:7px;border-radius:4px;background:linear-gradient(90deg,#9aa4ae,#c6cdd4)}
45+
.koko-pro-pnum{font-size:12.5px;font-weight:700;color:#6a747e;font-variant-numeric:tabular-nums;width:34px;text-align:right}
46+
.koko-pro-blur{filter:blur(4px);opacity:.85;user-select:none;pointer-events:none}
47+
.koko-pro-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
48+
.koko-pro-price{font-size:14px;color:#42566b}
49+
.koko-pro-price b{font-size:20px;font-weight:800;color:#2a1416;letter-spacing:-.01em}
50+
.koko-pro-price .koko-pro-per{font-size:13px;color:#6a7d90;font-weight:500}
51+
.koko-pro-btn{display:inline-flex;align-items:center;gap:9px;background:#025fb6;color:#fff !important;text-decoration: none!important;font-size:15px;font-weight:700;padding:12px 22px;border-radius:7px;border:1px solid #024f97;box-shadow:0 1px 2px rgba(2,79,151,.25);text-decoration:none}
52+
.koko-pro-btn:hover,.koko-pro-btn:focus{background:#024f97;color:#fff}
53+
.koko-pro-link{font-size:13px;font-weight:600;color:#025fb6 !important;text-decoration:none!important;}
54+
.koko-pro-link:hover{text-decoration:underline}
55+
.koko-pro-proof{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#5a6e82;margin-top:2px}
56+
.koko-pro-stars{color:#e8a53d;font-size:13px;letter-spacing:1px}
57+
.koko-pro-reassure{display:flex;align-items:center;gap:7px;font-size:12px;color:#6a7d90;margin-top:14px}
58+
.koko-pro-reassure svg{flex:none}
59+
.koko-pro-lead,.koko-pro-cta,.koko-pro-peek{min-width:0}
60+
@container kokopro (max-width:1040px){.koko-pro-banner{grid-template-columns:1.4fr 280px}.koko-pro-peek{display:none}}
61+
@container kokopro (max-width:640px){.koko-pro-banner{grid-template-columns:1fr;gap:22px;padding:24px}.koko-pro-h{font-size:21px;margin-top:12px}.koko-pro-cta{align-items:stretch}.koko-pro-btn{width:100%;justify-content:center}}
62+
</style>
63+
64+
<div class="koko-pro-wrap">
65+
<div class="koko-pro-banner">
66+
<div class="koko-pro-lead">
67+
<div class="koko-pro-brandrow"><span class="koko-pro-logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="32" r="32" fill="#b60205"/><path d="M48.42 20.641a.6.6 0 0 0-.66.15L31.984 37.736l-7.36-7.36a.6.6 0 0 0-.848 0l-8.4 8.4a.6.6 0 0 0-.176.424v3.6a.6.6 0 0 0 .6.6h32.4a.6.6 0 0 0 .6-.6V21.2a.6.6 0 0 0-.38-.559z" fill="#fff"/></svg></span><span class="koko-pro-badge"><?php esc_html_e( 'Koko Analytics', 'koko-analytics' ); ?> <b><?php esc_html_e( 'Pro', 'koko-analytics' ); ?></b></span></div>
68+
<div class="koko-pro-h"><?php esc_html_e( "You're seeing half the story.", 'koko-analytics' ); ?> <em><?php esc_html_e( 'Unlock the other half.', 'koko-analytics' ); ?></em></div>
69+
<p class="koko-pro-sub">
70+
<?php
71+
printf(
72+
/* translators: %s: number of visitors */
73+
wp_kses_post( __( 'Your dashboard shows <b>%s visitors</b> this period, but not <b>where</b> they\'re from or <b>what</b> they used. Koko Analytics Pro adds geolocation, device stats, UTM campaigns and scheduled email reports.', 'koko-analytics' ) ),
74+
esc_html( number_format_i18n( $koko_pro_visitors ) )
75+
);
76+
?>
77+
</p>
78+
<div class="koko-pro-chips">
79+
<span class="koko-pro-chip"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#025fb6" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"/></svg><?php esc_html_e( 'Geolocation', 'koko-analytics' ); ?></span>
80+
<span class="koko-pro-chip"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#025fb6" stroke-width="2"><rect x="3" y="4" width="18" height="12" rx="1.5"/><path d="M8 20h8M12 16v4"/></svg><?php esc_html_e( 'Device stats', 'koko-analytics' ); ?></span>
81+
<span class="koko-pro-chip"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#025fb6" stroke-width="2"><path d="M4 12l4-4m-4 4l4 4m-4-4h11a5 5 0 015 5v1"/></svg><?php esc_html_e( 'UTM tracking', 'koko-analytics' ); ?></span>
82+
<span class="koko-pro-chip"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#025fb6" stroke-width="2"><path d="M9 11l3 3 8-8"/><path d="M20 12v6a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h9"/></svg><?php esc_html_e( 'Event tracking', 'koko-analytics' ); ?></span>
83+
<span class="koko-pro-chip"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#025fb6" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M4 7l8 6 8-6"/></svg><?php esc_html_e( 'Email reports', 'koko-analytics' ); ?></span>
84+
</div>
85+
<div class="koko-pro-reassure"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#5a8a5a" stroke-width="2"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg><?php esc_html_e( 'Still 100% cookieless. Still no third-party services. Your data stays on your server.', 'koko-analytics' ); ?></div>
86+
</div>
87+
<div class="koko-pro-peek">
88+
<div class="koko-pro-peek-h"><span><?php esc_html_e( 'Top countries', 'koko-analytics' ); ?></span><span class="koko-pro-lock"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#8a949e" stroke-width="2.5"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V8a4 4 0 018 0v3"/></svg><?php esc_html_e( 'Pro', 'koko-analytics' ); ?></span></div>
89+
<div class="koko-pro-blur" aria-hidden="true">
90+
<div class="koko-pro-prow"><span class="koko-pro-flag">🇺🇸</span><span class="koko-pro-pname">United States</span><span class="koko-pro-pbar" style="width:78px"></span><span class="koko-pro-pnum">103</span></div>
91+
<div class="koko-pro-prow"><span class="koko-pro-flag">🇩🇪</span><span class="koko-pro-pname">Germany</span><span class="koko-pro-pbar" style="width:61px"></span><span class="koko-pro-pnum">81</span></div>
92+
<div class="koko-pro-prow"><span class="koko-pro-flag">🇳🇱</span><span class="koko-pro-pname">Netherlands</span><span class="koko-pro-pbar" style="width:54px"></span><span class="koko-pro-pnum">71</span></div>
93+
<div class="koko-pro-prow"><span class="koko-pro-flag">🇬🇧</span><span class="koko-pro-pname">United Kingdom</span><span class="koko-pro-pbar" style="width:37px"></span><span class="koko-pro-pnum">49</span></div>
94+
</div>
95+
</div>
96+
<div class="koko-pro-cta">
97+
<a class="koko-pro-btn" href="<?php echo esc_url( $koko_pro_price_url ); ?>" target="_blank" rel="noopener"><?php esc_html_e( 'Upgrade to Pro', 'koko-analytics' ); ?><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="M5 12h13M13 6l6 6-6 6"/></svg></a>
98+
<a class="koko-pro-link" href="<?php echo esc_url( $koko_pro_more_url ); ?>" target="_blank" rel="noopener"><?php esc_html_e( 'See everything in Pro →', 'koko-analytics' ); ?></a>
99+
<div class="koko-pro-proof"><span class="koko-pro-stars">★★★★★</span><?php esc_html_e( 'Trusted by thousands of site owners', 'koko-analytics' ); ?></div>
100+
</div>
101+
</div>
102+
</div>

0 commit comments

Comments
 (0)