Call Now Button - Version 1.3.1

Version Description

Minor bugfixes and UI improvements

Release Info

Developer	jasperroel
Plugin	Call Now Button
Version	1.3.1
Comparing to
See all releases

Code changes from version 1.3.0 to 1.3.1

Files changed (5) hide show

call-now-button.php +3 -3
readme.txt +12 -7
resources/js/domain-upgrade.js +4 -0
src/admin/button/CnbButtonView.php +10 -10
src/admin/domain/partials/CnbDomainViewUpgradeOverview.php +159 -142

call-now-button.php CHANGED Viewed

	@@ -3,8 +3,8 @@
3	Plugin Name: Call Now Button
4	Plugin URI: https://callnowbutton.com
5	Description: Shows a <strong>Call Now Button</strong> to your mobile visitors. Easy to use but flexible to meet more demanding requirements. Change placement and color, hide on specific pages, track how many people click them or conversions of your Google Ads campaigns. Create an account to enable extra actions such as <strong>WhatsApp</strong>, <strong>Messenger</strong>, <strong>Telegram</strong>, <strong>Signal</strong>, <strong>Email</strong>, <strong>SMS</strong>, <strong>Maps</strong> and <strong>links</strong>. Also offers additional functionality such as advanced display rules, scheduling, geo rules, appear after scrolling, button animations and much more.
6	- Version: 1.3.0
7	- Author: ~~Jerry & Jasper~~
8	Author URI: https://nowbuttons.com
9	GitHub Plugin URI: https://github.com/callnowbutton/wp-plugin
10	License: GPL2
	@@ -26,7 +26,7 @@ License: GPL2
26	Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
27	*/
28
29	- define('CNB_VERSION', '1.3.0');
30	define('CNB_NAME', 'Call Now Button');
31	define('CNB_CLOUD_NAME', 'NowButtons for WordPress');
32	define('CNB_BASENAME', plugin_basename(__FILE__));


3	Plugin Name: Call Now Button
4	Plugin URI: https://callnowbutton.com
5	Description: Shows a <strong>Call Now Button</strong> to your mobile visitors. Easy to use but flexible to meet more demanding requirements. Change placement and color, hide on specific pages, track how many people click them or conversions of your Google Ads campaigns. Create an account to enable extra actions such as <strong>WhatsApp</strong>, <strong>Messenger</strong>, <strong>Telegram</strong>, <strong>Signal</strong>, <strong>Email</strong>, <strong>SMS</strong>, <strong>Maps</strong> and <strong>links</strong>. Also offers additional functionality such as advanced display rules, scheduling, geo rules, appear after scrolling, button animations and much more.
6	+ Version: 1.3.1
7	+ Author: NowButtons.com
8	Author URI: https://nowbuttons.com
9	GitHub Plugin URI: https://github.com/callnowbutton/wp-plugin
10	License: GPL2

26	Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
27	*/
28
29	+ define('CNB_VERSION', '1.3.1');
30	define('CNB_NAME', 'Call Now Button');
31	define('CNB_CLOUD_NAME', 'NowButtons for WordPress');
32	define('CNB_BASENAME', plugin_basename(__FILE__));

readme.txt CHANGED Viewed

	@@ -5,7 +5,7 @@ Tags: call button, click to call, convert, call now button, contact button
5	Requires at least: 4.1
6	Requires PHP: 5.4
7	Tested up to: 6.1
8	- Stable tag: 1.3.0
9	License: GPLv2 or later
10	License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
	@@ -33,30 +33,32 @@ Under the Presentation tab you can change the colors of the button, move it
33	In the Settings menu you'll find a bunch of features such as click tracking in Google Analytics, fire a conversion tag so a call is registered as a conversion in Google Ads, adjust the size of the button or move the button further backwards in case you want something else to sit on top of it (e.g. your privacy notice). Here you can also enable the connection to our _Cloud service_.
34
35	### Connecting to NowButtons.com
36	- Connect the plugin to our cloud service NowButtons.com is ~~super~~ ~~easy~~ ~~and enables extra actions &~~ features. Here's an overview:
37
38	* ⚡ More actions: SMS/Text, Email, Maps, URLs, Scroll to top
39	- * 🤗 Social ~~chat~~: WhatsApp, Messenger, Telegram, Signal
40	* 🆕 Create 5 different buttons (instead of 1)
41	* 🎯 Create smarter rules to decide where buttons should appear
42	- * 🗂️ ~~Multi~~ ~~action~~ ~~buttons~~

43
44	- ### ~~Call~~ ~~Now Button~~ PRO
45	We also offer a paid version of NowButtons which you can try 14 days for free!
46
47	The PRO plan offers the following extras:
48
49	* 🧳 Create 100 unique buttons
50	* 💬 WhatsApp chat window
51	- * ~~🖥️Desktop/laptop~~ ~~and~~ ~~mobile~~ ~~support~~
52	* 🕘 Scheduler: create a weekly schedule for your buttons

53	* 👋 Add extra attention grabbing animations
54	* 🎨 Icon picker
55	* 👽 3rd party integrations
56	* ✨ Slide-in Content Windows
57	* 📷 Use custom images on buttons
58	* 🌍 Include and exclude countries
59	- * ↕️ ~~Set~~ ~~scroll~~ ~~height for buttons to appear~~
60	* 🔌 Intercom integration
61
62
	@@ -130,6 +132,9 @@ Yes, you can connect the plugin to our cloud service NowButton.com. That already
130
131
132	== Changelog ==



133	= 1.3.0 =
134	* Cloud becomes NowButtons
135	* UI improvements


5	Requires at least: 4.1
6	Requires PHP: 5.4
7	Tested up to: 6.1
8	+ Stable tag: 1.3.1
9	License: GPLv2 or later
10	License URI: http://www.gnu.org/licenses/gpl-2.0.html
11

33	In the Settings menu you'll find a bunch of features such as click tracking in Google Analytics, fire a conversion tag so a call is registered as a conversion in Google Ads, adjust the size of the button or move the button further backwards in case you want something else to sit on top of it (e.g. your privacy notice). Here you can also enable the connection to our _Cloud service_.
34
35	### Connecting to NowButtons.com
36	+ Connect the plugin to our cloud service NowButtons.com to unlock more features. Here's an overview:
37
38	* ⚡ More actions: SMS/Text, Email, Maps, URLs, Scroll to top
39	+ * 🤗 Social actions: WhatsApp, Messenger, Telegram, Signal
40	* 🆕 Create 5 different buttons (instead of 1)
41	* 🎯 Create smarter rules to decide where buttons should appear
42	+ * 🖥️Desktop/laptop and mobile support
43	+ * 👁️️Live preview
44
45	+ ### NowButtons PRO
46	We also offer a paid version of NowButtons which you can try 14 days for free!
47
48	The PRO plan offers the following extras:
49
50	* 🧳 Create 100 unique buttons
51	* 💬 WhatsApp chat window
52	+ * 🗂️ Multi action buttons
53	* 🕘 Scheduler: create a weekly schedule for your buttons
54	+ * 🎯 Advanced rules to decide where buttons should appear
55	* 👋 Add extra attention grabbing animations
56	* 🎨 Icon picker
57	* 👽 3rd party integrations
58	* ✨ Slide-in Content Windows
59	* 📷 Use custom images on buttons
60	* 🌍 Include and exclude countries
61	+ * ↕️ Appear after scrolling
62	* 🔌 Intercom integration
63
64

132
133
134	== Changelog ==
135	+ = 1.3.1 =
136	+ * Minor bugfixes and UI improvements
137	+
138	= 1.3.0 =
139	* Cloud becomes NowButtons
140	* UI improvements

resources/js/domain-upgrade.js CHANGED Viewed

	@@ -30,6 +30,10 @@ function cnb_domain_upgrade_currency() {
30	});
31	}
32




33	/**
34	* Request a Stripe Checkout Session ID for a given domain and a selected plan
35	*


30	});
31	}
32
33	+ function cnbShowStarterFeatures() {
34	+ jQuery(".cnb-starter").show();
35	+ }
36	+
37	/**
38	* Request a Stripe Checkout Session ID for a given domain and a selected plan
39	*

src/admin/button/CnbButtonView.php CHANGED Viewed

	@@ -142,7 +142,7 @@ class CnbButtonView {
142	$faq_url = $cnb_utils->get_support_url( 'wordpress/#faq', 'promobox-need-help', 'FAQ' );
143	if ( isset( $upgrade_url ) && $upgrade_url ) {
144	echo '<div class="cnb-postbox-container cnb-side-column"> <!-- Sidebar promo boxes -->';
145	- if ( $domain !== null && ! ( $domain instanceof WP_Error ) && $domain->type ~~===~~ '~~STARTER~~' ) {
146	$promoboxes = range(1,3);
147	shuffle($promoboxes);
148	$promoItem = array_rand($promoboxes);
	@@ -152,9 +152,9 @@ class CnbButtonView {
152	( new CnbAdminFunctions() )->cnb_promobox(
153	'green',
154	'Schedule your buttons',
155	- '<h4>Show a call button during office hours</h4>' .
156	'<div class="cnb-center" style="padding: 10px 30px"><img src="' . esc_url( $schedule_illustration ) . '" alt="Upgrade your domain to PRO with an extra discount" style="max-width:300px; width:100%; height:auto;" /></div>' .
157	- '<p>A mail button when ~~your~~ off.</p>' ,
158	'clock',
159	'Try PRO 14 days free',
160	'Upgrade',
	@@ -164,13 +164,13 @@ class CnbButtonView {
164	( new CnbAdminFunctions() )->cnb_promobox(
165	'green',
166	'Professional features',
167	- '<p~~>⏱️~~ Button scheduler<br>
168	- 📷 Icons & custom images on buttons<br>
169	- 👮 Advanced display rules<br>
170	- 🌍 Geo targeting<br>
171	- ↕️ Set scroll height for buttons to appear<br>
172	- ⚡ Slide-in content windows<br>
173	- 🔌 Integrate your Intercom chat</p><h3>And much more!</h3>',
174	'performance',
175	'<strong>Try it 14 days free!</strong>',
176	'Upgrade',


142	$faq_url = $cnb_utils->get_support_url( 'wordpress/#faq', 'promobox-need-help', 'FAQ' );
143	if ( isset( $upgrade_url ) && $upgrade_url ) {
144	echo '<div class="cnb-postbox-container cnb-side-column"> <!-- Sidebar promo boxes -->';
145	+ if ( $domain !== null && ! ( $domain instanceof WP_Error ) && $domain->type !== 'PRO' ) {
146	$promoboxes = range(1,3);
147	shuffle($promoboxes);
148	$promoItem = array_rand($promoboxes);

152	( new CnbAdminFunctions() )->cnb_promobox(
153	'green',
154	'Schedule your buttons',
155	+ '<h4 class="cnb-center">Show a call button during office hours</h4>' .
156	'<div class="cnb-center" style="padding: 10px 30px"><img src="' . esc_url( $schedule_illustration ) . '" alt="Upgrade your domain to PRO with an extra discount" style="max-width:300px; width:100%; height:auto;" /></div>' .
157	+ '<h4 class="cnb-center">A mail button when you\'re off.</h4>' ,
158	'clock',
159	'Try PRO 14 days free',
160	'Upgrade',

164	( new CnbAdminFunctions() )->cnb_promobox(
165	'green',
166	'Professional features',
167	+ '<p><span class="dashicons dashicons-yes cnb-green"></span> Button scheduler<br>
168	+ <span class="dashicons dashicons-yes cnb-green"></span> Icons & custom images on buttons<br>
169	+ <span class="dashicons dashicons-yes cnb-green"></span> Advanced display rules<br>
170	+ <span class="dashicons dashicons-yes cnb-green"></span> Geo targeting<br>
171	+ <span class="dashicons dashicons-yes cnb-green"></span> Set scroll height for buttons to appear<br>
172	+ <span class="dashicons dashicons-yes cnb-green"></span> Slide-in content windows<br>
173	+ <span class="dashicons dashicons-yes cnb-green"></span> Integrate your Intercom chat</p><h3>And much more!</h3>',
174	'performance',
175	'<strong>Try it 14 days free!</strong>',
176	'Upgrade',

src/admin/domain/partials/CnbDomainViewUpgradeOverview.php CHANGED Viewed

	@@ -73,8 +73,8 @@ class CnbDomainViewUpgradeOverview {
73	?>
74	</div>
75	<div class="cnb-welcome-blocks">
76	- <h1>~~Feature~~ ~~comparison~~</h1>
77	- <h3>An overview of the features that are included in the ~~Starter~~ ~~(free) and Pro plans~~.</h3>
78	<?php
79	$this->render_pro_feature_comparison();
80	?>
	@@ -196,7 +196,7 @@ class CnbDomainViewUpgradeOverview {
196	class="cents">.<?php echo esc_html( $plan_y ) ?></span><span class="timeframe">/month</span>
197	</div>
198	<div class="billingprice">
199	- <span class="">Billed €<?php echo esc_html( number_format( $plan_year->price, 2, '.', '' ) ); ?> every 12 months.<br>VAT may apply</span>
200	</div>
201
202	<?php if ( $plan_year->trialPeriodDays && $plan_year->trialPeriodDays > 0 ) { ?>
	@@ -221,16 +221,16 @@ class CnbDomainViewUpgradeOverview {
221	class="cents">.<?php echo esc_html( $plan_y ) ?></span><span class="timeframe">/month</span>
222	</div>
223	<div class="billingprice">
224	- <span class="">Billed monthly.<br>VAT may apply</span>
225	</div>
226
227	<?php if ( $plan_year->trialPeriodDays && $plan_year->trialPeriodDays > 0 ) { ?>
228	- <a class="button button-primary button-upgrade powered-by-eur-~~yearly~~" href="#"
229	- onclick="cnb_get_checkout('<?php echo esc_js( $~~plan_year~~->id ) ?>')">Try <?php echo esc_html( $plan_year->trialPeriodDays ) ?>
230	days free</a>
231	<?php } else { ?>
232	- <a class="button button-primary button-upgrade powered-by-eur-~~yearly~~" href="#"
233	- onclick="cnb_get_checkout('<?php echo esc_js( $~~plan_year~~->id ) ?>')">Upgrade now</a>
234	<?php } ?>
235	</div>
236
	@@ -252,7 +252,7 @@ class CnbDomainViewUpgradeOverview {
252	class="cents">.<?php echo esc_html( $plan_y ) ?></span><span class="timeframe">/month</span>
253	</div>
254	<div class="billingprice">
255	- <span class="">Billed $<?php echo esc_html( number_format( $plan_year->price, 2, '.', '' ) ); ?> every 12 months.<br>VAT may apply</span>
256	</div>
257
258	<?php if ( $plan_year->trialPeriodDays && $plan_year->trialPeriodDays > 0 ) { ?>
	@@ -278,16 +278,16 @@ class CnbDomainViewUpgradeOverview {
278	class="cents">.<?php echo esc_html( $plan_y ) ?></span><span class="timeframe">/month</span>
279	</div>
280	<div class="billingprice">
281	- <span class="">Billed monthly.<br>VAT may apply</span>
282	</div>
283
284	<?php if ( $plan_year->trialPeriodDays && $plan_year->trialPeriodDays > 0 ) { ?>
285	- <a class="button button-primary button-upgrade powered-by-usd-~~yearly~~" href="#"
286	- onclick="cnb_get_checkout('<?php echo esc_js( $~~plan_year~~->id ) ?>')">Try <?php echo esc_html( $plan_year->trialPeriodDays ) ?>
287	days free</a>
288	<?php } else { ?>
289	- <a class="button button-primary button-upgrade powered-by-usd-~~yearly~~" href="#"
290	- onclick="cnb_get_checkout('<?php echo esc_js( $~~plan_year~~->id ) ?>')">Upgrade now</a>
291	<?php } ?>
292	</div>
293
	@@ -397,57 +397,62 @@ class CnbDomainViewUpgradeOverview {
397
398	public function render_pro_feature_comparison() {
399	?>














400	<div class="cnb-block">

401	<table class="cnb-nb-plans">
402	<thead>
403	<tr>
404	<td></td>
405	- <th><h3>Starter ~~(Free)~~</h3></th>
406	<th><h3>Pro</h3></th>
407	</tr>
408	</thead>
409	<tbody>
410	<tr class="line">
411	<td> </td>
412	- <td></td>
413	<td></td>
414	</tr>
415	<tr>
416	<th>No. of buttons</th>
417	- <td class="value">5</td>
418	<td class="value">100</td>
419	</tr>
420	- <tr>
421	- <th>Multiple buttons per page
422	- <span class="cnb-tooltip-icon">?</span>
423	- <div class="cnb-tooltip-text">
424	- PRO users can add up to 8 buttons on a single page.
425	- </div>
426	- </th>
427	- <td>𐄂</td>
428	- <td class="yes">✓</td>
429	- </tr>
430	- <tr class="line">
431	<td> </td>
432	- <td></td>
433	<td></td>
434	</tr>
435	- <tr>
436	<th>Phone</th>
437	- <td class="yes">✓</td>
438	<td class="yes">✓</td>
439	</tr>
440	- <tr>
441	<th>SMS/Text</th>
442	- <td class="yes">✓</td>
443	<td class="yes">✓</td>
444	</tr>
445	- <tr>
446	<th>Email</th>
447	- <td class="yes">✓</td>
448	<td class="yes">✓</td>
449	</tr>
450	- <tr>
451	<th>Maps
452	<span class="cnb-tooltip-icon">?</span>
453	<div class="cnb-tooltip-text">
	@@ -455,15 +460,15 @@ class CnbDomainViewUpgradeOverview {
455	the input of an origin to give travel directions.
456	</div>
457	</th>
458	- <td class="yes">✓</td>
459	<td class="yes">✓</td>
460	</tr>
461	- <tr>
462	<th>URLs</th>
463	- <td class="yes">✓</td>
464	<td class="yes">✓</td>
465	</tr>
466	- <tr>
467	<th>Scroll to point
468	<span class="cnb-tooltip-icon">?</span>
469	<div class="cnb-tooltip-text">
	@@ -471,281 +476,293 @@ class CnbDomainViewUpgradeOverview {
471	page to a selected point.<br><br>E.g. a Back-to-top button
472	</div>
473	</th>
474	- <td class="yes">✓</td>
475	<td class="yes">✓</td>
476	</tr>
477	- <tr>
478	<th>WhatsApp
479	<span class="cnb-tooltip-icon">?</span>
480	<div class="cnb-tooltip-text">
481	A WhatsApp button that starts a conversation with you directly in the WhatsApp app.
482	</div>
483	</th>
484	- <td class="yes">✓</td>
485	<td class="yes">✓</td>
486	</tr>
487	- <tr>
488	<th>Messenger
489	<span class="cnb-tooltip-icon">?</span>
490	<div class="cnb-tooltip-text">
491	A button that opens the Messenger app and starts a conversation with you.
492	</div>
493	</th>
494	- <td class="yes">✓</td>
495	<td class="yes">✓</td>
496	</tr>
497	- <tr>
498	<th>Telegram
499	<span class="cnb-tooltip-icon">?</span>
500	<div class="cnb-tooltip-text">
501	A button that opens the Telegram app and starts a conversation with you.
502	</div>
503	</th>
504	- <td class="yes">✓</td>
505	<td class="yes">✓</td>
506	</tr>
507	- <tr>
508	<th>Signal
509	<span class="cnb-tooltip-icon">?</span>
510	<div class="cnb-tooltip-text">
511	A button that opens the Signal app and starts a conversation with you.
512	</div>
513	</th>
514	- <td class="yes">✓</td>
515	<td class="yes">✓</td>
516	</tr>
517	<tr class="line">
518	<td> </td>
519	- <td></td>
520	<td></td>
521	</tr>
522	- <tr>
523	- <th>~~WhatsApp~~ ~~Chat~~ ~~window~~
524	<span class="cnb-tooltip-icon">?</span>
525	<div class="cnb-tooltip-text">
526	- A ~~button~~ ~~that~~ ~~fires~~ ~~a WhatsApp chat window right~~ on ~~your~~ ~~website~~ ~~where you can greet the~~
527	- visitor. You can automate multiple speech bubbles which appear in sequence.<br>The WhatsApp
528	- app is opened once the visitor engages in the conversation.
529	</div>
530	</th>
531	- <td~~>𐄂</~~td>
532	<td class="yes">✓</td>
533	</tr>
534	- <tr>
535	- <th>~~Intercom~~ ~~chat~~ ~~(integration)~~
536	<span class="cnb-tooltip-icon">?</span>
537	<div class="cnb-tooltip-text">
538	- ~~Create~~ a ~~button~~ to ~~open~~ ~~the~~ ~~Intercom~~ ~~chat~~ ~~window.~~ ~~This~~ ~~way~~ ~~the~~ ~~Intercom~~ ~~button~~ ~~will~~ ~~match~~
539	- ~~nicely~~ ~~with~~ your ~~other buttons and allows you to combine it with the scheduler~~. ~~You can also~~
540	- place it inside a Multibutton or Buttonbar.
541	</div>
542	</th>
543	- <td~~>𐄂</~~td>
544	<td class="yes">✓</td>
545	</tr>
546	- <tr>
547	- <th>~~Content~~ ~~Windows~~
548	<span class="cnb-tooltip-icon">?</span>
549	<div class="cnb-tooltip-text">
550	- ~~Opened~~ by a ~~button,~~ ~~the~~ ~~Content~~ ~~Window~~ ~~enables~~ ~~you~~ to ~~add~~ ~~any~~ ~~content~~ to a ~~small window that~~
551	- ~~slides into~~ the ~~screen.<br><br>A~~ ~~great~~ ~~use-case~~ is ~~showing~~ a ~~booking form without sending~~
552	- visitors off the page.
553	</div>
554	</th>
555	- <td~~>𐄂</~~td>
556	<td class="yes">✓</td>
557	</tr>
558	- <tr>
559	- <th>~~Tally~~ ~~Form window~~
560	<span class="cnb-tooltip-icon">?</span>
561	<div class="cnb-tooltip-text">
562	- ~~With~~ ~~this~~ ~~integration~~ ~~you~~ ~~only~~ ~~need~~ a ~~form~~ ID to ~~place~~ a ~~Tally~~ ~~contact~~ ~~form~~ ~~inside a~~
563	- ~~slide-in~~ ~~Content~~ ~~Window~~.
564	</div>
565	</th>
566	- <td~~>𐄂</~~td>
567	<td class="yes">✓</td>
568	</tr>
569	- <tr class="line">
570	<td> </td>
571	- <td></td>
572	<td></td>
573	</tr>
574	- <tr>
575	- <th>~~Change~~ button ~~icons~~</th>
576	- <td~~>𐄂</~~td>
577	<td class="yes">✓</td>
578	</tr>
579	- <tr>
580	- <th>~~Custom~~ ~~button~~ ~~images~~
581	<span class="cnb-tooltip-icon">?</span>
582	<div class="cnb-tooltip-text">
583	- ~~Instead~~ of an ~~icon~~ ~~you~~ ~~can~~ ~~add~~ ~~your~~ ~~own~~ ~~image~~ to ~~your~~ ~~button.<br><br>E.g.~~ ~~add~~ a ~~headshot~~ of
584	- the ~~person~~ ~~answering~~ the ~~phone~~ to ~~make~~ it ~~more~~ ~~personal~~.
585	</div>
586	</th>
587	- <td~~>𐄂</~~td>
588	<td class="yes">✓</td>
589	</tr>
590	<tr>
591	- <th>~~Appear~~ ~~after scrolling~~
592	<span class="cnb-tooltip-icon">?</span>
593	<div class="cnb-tooltip-text">
594	- ~~Set~~ ~~the~~ ~~number~~ of ~~pixels~~ ~~your~~ ~~visitors have~~ to ~~scroll~~ ~~down before the button~~
595	- appears.<br><br>E.g. combine it with the Scroll-to-point action to create a back-to-top
596	- button.
597	</div>
598	</th>
599	- <td>𐄂</td>
600	<td class="yes">✓</td>
601	</tr>
602	- <tr class="line">
603	- <td> </td>
604	- <td></td>
605	- <td></td>
606	- </tr>
607	<tr>
608	- <th>~~Single button</th>~~
609	- <td class="~~yes~~"~~>✓</td~~>






610	<td class="yes">✓</td>
611	</tr>
612	<tr>
613	- <th>~~Buttonbar~~ ~~(single~~ ~~action)~~
614	<span class="cnb-tooltip-icon">?</span>
615	<div class="cnb-tooltip-text">
616	- ~~The~~ ~~Buttonbar~~ is a ~~bar~~ of ~~one~~ ~~or more~~ buttons ~~that~~ ~~sits~~ at ~~the top or bottom of your screen~~.
617	- In the Starter plan the Buttonbar only offers a single action.
618	</div>
619	</th>

620	<td class="yes">✓</td>




621	<td class="yes">✓</td>
622	</tr>
623	<tr>
624	- <th>~~Buttonbar~~ ~~(multi-action)~~
625	<span class="cnb-tooltip-icon">?</span>
626	<div class="cnb-tooltip-text">
627	- ~~The~~ ~~multi-action~~ ~~Buttonbar~~ can ~~hold~~ up to 5 ~~actions~~.

628	</div>
629	</th>
630	- <td>𐄂</td>
631	<td class="yes">✓</td>
632	</tr>
633	<tr>
634	- <th>~~Multibutton~~
635	<span class="cnb-tooltip-icon">?</span>
636	<div class="cnb-tooltip-text">
637	- ~~The~~ ~~Multibutton~~ ~~shows~~ a ~~single~~ ~~circular~~ ~~button~~ ~~but~~ ~~expands~~ ~~into multiple buttons when~~
638	- clicked.
639	</div>
640	</th>
641	- <td>𐄂</td>
642	<td class="yes">✓</td>
643	</tr>

644	<tr class="line">
645	<td> </td>
646	- <td></td>
647	<td></td>
648	</tr>
649	<tr>
650	- <th>~~Mobile~~ + ~~Desktop~~
651	<span class="cnb-tooltip-icon">?</span>
652	<div class="cnb-tooltip-text">
653	- ~~Buttons~~ ~~can~~ be ~~displayed~~ on ~~all~~ ~~screen~~ ~~sizes.~~


654	</div>
655	</th>
656	- <td class="~~yes~~"~~>✓</~~td>
657	<td class="yes">✓</td>
658	</tr>
659	<tr>
660	- <th>~~Scheduler~~
661	<span class="cnb-tooltip-icon">?</span>
662	<div class="cnb-tooltip-text">
663	- ~~Schedule~~ ~~your~~ ~~buttons~~ to ~~appear~~ on the ~~right~~ ~~days~~ ~~and~~ the ~~right~~ ~~times.<br>The~~ ~~scheduler~~ ~~can~~
664	- be ~~used~~ on ~~each~~ ~~action,~~ so you ~~can~~ ~~change~~ ~~the~~ ~~contents~~ of ~~multi-action~~ ~~buttons~~ ~~throughout~~ ~~the~~
665	- ~~day.<br><br>E.g.~~ a ~~phone~~ ~~button during working hours and~~ a ~~contact~~ ~~form~~ ~~when you're closed~~.
666	</div>
667	</th>
668	- <td>𐄂</td>
669	<td class="yes">✓</td>
670	</tr>
671	<tr>
672	- <th>~~Button~~ ~~animations~~
673	<span class="cnb-tooltip-icon">?</span>
674	<div class="cnb-tooltip-text">
675	- ~~Draw~~ ~~more~~ ~~attention~~ to ~~your~~ ~~buttons~~ by ~~adding~~ ~~delicate~~ ~~animations.~~


676	</div>
677	</th>
678	- <td>𐄂</td>
679	<td class="yes">✓</td>
680	</tr>
681	<tr>
682	- <th>~~Display~~ ~~rules~~ ~~(Basic)~~
683	<span class="cnb-tooltip-icon">?</span>
684	<div class="cnb-tooltip-text">
685	- ~~Create~~ ~~simple~~ ~~rules~~ ~~for~~ ~~where~~ ~~your~~ ~~buttons~~ ~~should~~ ~~appear.~~ ~~They~~ ~~can~~ ~~match~~ an ~~exact~~ ~~url,~~ a
686	- ~~path~~ or ~~if the url contains a string~~.
687	</div>
688	</th>

689	<td class="yes">✓</td>
690	- ~~<td class="yes">✓</td~~>




691	</tr>
692	<tr>
693	- <th>~~Display rules (Advanced)~~
694	<span class="cnb-tooltip-icon">?</span>
695	<div class="cnb-tooltip-text">
696	- ~~With~~ ~~the~~ ~~advanced~~ ~~display~~ ~~rules~~ ~~you~~ ~~can~~ ~~set~~ ~~rules~~ on ~~parameters~~ ~~(great~~ in ~~combination~~ ~~with~~
697	- ~~PPC~~ ~~campaigns)~~ ~~and~~ ~~use~~ ~~RegEx~~ to ~~create~~ ~~even~~ ~~more~~ ~~powerful~~ ~~rules.~~

698	</div>
699	</th>
700	- <td>𐄂</td>
701	<td class="yes">✓</td>
702	</tr>
703	<tr>
704	- <th>~~Geo~~ ~~targeting~~
705	<span class="cnb-tooltip-icon">?</span>
706	<div class="cnb-tooltip-text">
707	- ~~Show~~ the ~~right~~ ~~contact~~ ~~options~~ to ~~the~~ ~~right~~ ~~people.~~ ~~With~~ ~~Geo~~ ~~display~~ ~~rules~~ ~~you tailor the~~
708	- ~~buttons~~ to the ~~visitor's~~ ~~country.~~

709	</div>
710	</th>
711	- <td>𐄂</td>
712	<td class="yes">✓</td>
713	</tr>
714	- <tr>
715	- <th>~~Click~~ ~~tracking~~ ~~in GA~~
716	<span class="cnb-tooltip-icon">?</span>
717	<div class="cnb-tooltip-text">
718	- ~~With~~ a ~~single~~ ~~click~~ ~~you~~ ~~can~~ ~~enable~~ ~~event~~ ~~tracking~~ in ~~Google~~ ~~Analytics~~ to ~~get~~ ~~insights~~ ~~into~~
719	- ~~button~~ ~~engagement~~ on ~~your~~ ~~website~~.
720	</div>
721	</th>
722	- <td class="yes">✓</td>
723	<td class="yes">✓</td>
724	</tr>
725	<tr>
726	- <th>~~Google~~ ~~Ads~~ ~~conversion tracking~~
727	<span class="cnb-tooltip-icon">?</span>
728	<div class="cnb-tooltip-text">
729	- ~~Enable~~ ~~conversion~~ ~~tracking~~ on ~~your~~ ~~Google~~ ~~Ads~~ ~~landing~~ ~~pages~~ so ~~when~~ a ~~paid~~ ~~visitor~~ ~~clicks on~~
730	- ~~the~~ ~~button~~ ~~it's~~ ~~measured~~ as a ~~conversion~~.
731	</div>
732	</th>
733	- <td class="~~yes~~"~~>✓</~~td>
734	<td class="yes">✓</td>
735	</tr>
736	<tr>
737	- <th>~~Live~~ ~~preview~~
738	<span class="cnb-tooltip-icon">?</span>
739	<div class="cnb-tooltip-text">
740	- ~~Displays~~ a ~~real-time~~ ~~preview~~ of the ~~buttons~~ ~~your building~~. ~~PRO~~ ~~can~~ ~~simulate~~ ~~the~~ ~~day~~ ~~and~~ ~~time~~
741	- to ~~test~~ ~~scheduled~~ ~~buttons~~.
742	</div>
743	</th>
744	- <td class="~~yes~~"~~>✓</~~td>
745	<td class="yes">✓</td>
746	</tr>
747	</tbody>
748	</table>

749	</div>
750	<?php
751	}


73	?>
74	</div>
75	<div class="cnb-welcome-blocks">
76	+ <h1>All PRO features</h1>
77	+ <h3>An overview of the features that are included in the PRO plan.</h3>
78	<?php
79	$this->render_pro_feature_comparison();
80	?>

196	class="cents">.<?php echo esc_html( $plan_y ) ?></span><span class="timeframe">/month</span>
197	</div>
198	<div class="billingprice">
199	+ <span class="">Billed €<?php echo esc_html( number_format( $plan_year->price, 2, '.', '' ) ); ?> every 12 months.<br>Subscription applies to current domain.<br>VAT may apply</span>
200	</div>
201
202	<?php if ( $plan_year->trialPeriodDays && $plan_year->trialPeriodDays > 0 ) { ?>

221	class="cents">.<?php echo esc_html( $plan_y ) ?></span><span class="timeframe">/month</span>
222	</div>
223	<div class="billingprice">
224	+ <span class="">Billed monthly.<br>Subscription applies to current domain.<br>VAT may apply</span>
225	</div>
226
227	<?php if ( $plan_year->trialPeriodDays && $plan_year->trialPeriodDays > 0 ) { ?>
228	+ <a class="button button-primary button-upgrade powered-by-eur-monthly" href="#"
229	+ onclick="cnb_get_checkout('<?php echo esc_js( $plan->id ) ?>')">Try <?php echo esc_html( $plan_year->trialPeriodDays ) ?>
230	days free</a>
231	<?php } else { ?>
232	+ <a class="button button-primary button-upgrade powered-by-eur-monthly" href="#"
233	+ onclick="cnb_get_checkout('<?php echo esc_js( $plan->id ) ?>')">Upgrade now</a>
234	<?php } ?>
235	</div>
236

252	class="cents">.<?php echo esc_html( $plan_y ) ?></span><span class="timeframe">/month</span>
253	</div>
254	<div class="billingprice">
255	+ <span class="">Billed $<?php echo esc_html( number_format( $plan_year->price, 2, '.', '' ) ); ?> every 12 months.<br>Subscription applies to current domain.<br>VAT may apply</span></span>
256	</div>
257
258	<?php if ( $plan_year->trialPeriodDays && $plan_year->trialPeriodDays > 0 ) { ?>

278	class="cents">.<?php echo esc_html( $plan_y ) ?></span><span class="timeframe">/month</span>
279	</div>
280	<div class="billingprice">
281	+ <span class="">Billed monthly.<br>Subscription applies to current domain.<br>VAT may apply</span>
282	</div>
283
284	<?php if ( $plan_year->trialPeriodDays && $plan_year->trialPeriodDays > 0 ) { ?>
285	+ <a class="button button-primary button-upgrade powered-by-usd-monthly" href="#"
286	+ onclick="cnb_get_checkout('<?php echo esc_js( $plan->id ) ?>')">Try <?php echo esc_html( $plan_year->trialPeriodDays ) ?>
287	days free</a>
288	<?php } else { ?>
289	+ <a class="button button-primary button-upgrade powered-by-usd-monthly" href="#"
290	+ onclick="cnb_get_checkout('<?php echo esc_js( $plan->id ) ?>')">Upgrade now</a>
291	<?php } ?>
292	</div>
293

397
398	public function render_pro_feature_comparison() {
399	?>
400	+ <style>
401	+ tr.cnb-starter {display: none;}
402	+ td.cnb-starter, th.cnb-starter {display: none;}
403	+ table.cnb-nb-plans tbody th {
404	+ font-size: 15px;
405	+ padding: 3px 0;
406	+ }
407	+ table.cnb-nb-plans tbody th .cnb-tooltip-icon {
408	+ font-size: 13px;
409	+ }
410	+ .cnbShowStarterFeatures {
411	+ cursor: pointer;
412	+ }
413	+ </style>
414	<div class="cnb-block">
415	+
416	<table class="cnb-nb-plans">
417	<thead>
418	<tr>
419	<td></td>
420	+ <th class="cnb-starter"><h3>Starter</h3></th>
421	<th><h3>Pro</h3></th>
422	</tr>
423	</thead>
424	<tbody>
425	<tr class="line">
426	<td> </td>
427	+ <td class="cnb-starter"></td>
428	<td></td>
429	</tr>
430	<tr>
431	<th>No. of buttons</th>
432	+ <td class="value cnb-starter">5</td>
433	<td class="value">100</td>
434	</tr>
435	+ <tr class="line cnb-starter">










436	<td> </td>
437	+ <td class="cnb-starter"></td>
438	<td></td>
439	</tr>
440	+ <tr class="cnb-starter">
441	<th>Phone</th>
442	+ <td class="yes cnb-starter">✓</td>
443	<td class="yes">✓</td>
444	</tr>
445	+ <tr class="cnb-starter">
446	<th>SMS/Text</th>
447	+ <td class="yes cnb-starter">✓</td>
448	<td class="yes">✓</td>
449	</tr>
450	+ <tr class="cnb-starter">
451	<th>Email</th>
452	+ <td class="yes cnb-starter">✓</td>
453	<td class="yes">✓</td>
454	</tr>
455	+ <tr class="cnb-starter">
456	<th>Maps
457	<span class="cnb-tooltip-icon">?</span>
458	<div class="cnb-tooltip-text">

460	the input of an origin to give travel directions.
461	</div>
462	</th>
463	+ <td class="yes cnb-starter">✓</td>
464	<td class="yes">✓</td>
465	</tr>
466	+ <tr class="cnb-starter">
467	<th>URLs</th>
468	+ <td class="yes cnb-starter">✓</td>
469	<td class="yes">✓</td>
470	</tr>
471	+ <tr class="cnb-starter">
472	<th>Scroll to point
473	<span class="cnb-tooltip-icon">?</span>
474	<div class="cnb-tooltip-text">

476	page to a selected point.<br><br>E.g. a Back-to-top button
477	</div>
478	</th>
479	+ <td class="yes cnb-starter">✓</td>
480	<td class="yes">✓</td>
481	</tr>
482	+ <tr class="cnb-starter">
483	<th>WhatsApp
484	<span class="cnb-tooltip-icon">?</span>
485	<div class="cnb-tooltip-text">
486	A WhatsApp button that starts a conversation with you directly in the WhatsApp app.
487	</div>
488	</th>
489	+ <td class="yes cnb-starter">✓</td>
490	<td class="yes">✓</td>
491	</tr>
492	+ <tr class="cnb-starter">
493	<th>Messenger
494	<span class="cnb-tooltip-icon">?</span>
495	<div class="cnb-tooltip-text">
496	A button that opens the Messenger app and starts a conversation with you.
497	</div>
498	</th>
499	+ <td class="yes cnb-starter">✓</td>
500	<td class="yes">✓</td>
501	</tr>
502	+ <tr class="cnb-starter">
503	<th>Telegram
504	<span class="cnb-tooltip-icon">?</span>
505	<div class="cnb-tooltip-text">
506	A button that opens the Telegram app and starts a conversation with you.
507	</div>
508	</th>
509	+ <td class="yes cnb-starter">✓</td>
510	<td class="yes">✓</td>
511	</tr>
512	+ <tr class="cnb-starter">
513	<th>Signal
514	<span class="cnb-tooltip-icon">?</span>
515	<div class="cnb-tooltip-text">
516	A button that opens the Signal app and starts a conversation with you.
517	</div>
518	</th>
519	+ <td class="yes cnb-starter">✓</td>
520	<td class="yes">✓</td>
521	</tr>
522	<tr class="line">
523	<td> </td>
524	+ <td class="cnb-starter"></td>
525	<td></td>
526	</tr>
527	+ <tr class="cnb-starter">
528	+ <th>Mobile + Desktop
529	<span class="cnb-tooltip-icon">?</span>
530	<div class="cnb-tooltip-text">
531	+ Buttons can be displayed on all screen sizes.


532	</div>
533	</th>
534	+ <td class="yes cnb-starter">✓</td>
535	<td class="yes">✓</td>
536	</tr>
537	+ <tr class="cnb-starter">
538	+ <th>Click tracking in GA
539	<span class="cnb-tooltip-icon">?</span>
540	<div class="cnb-tooltip-text">
541	+ With a single click you can enable event tracking in Google Analytics to get insights into
542	+ button engagement on your website.

543	</div>
544	</th>
545	+ <td class="yes cnb-starter">✓</td>
546	<td class="yes">✓</td>
547	</tr>
548	+ <tr class="cnb-starter">
549	+ <th>Google Ads conversion tracking
550	<span class="cnb-tooltip-icon">?</span>
551	<div class="cnb-tooltip-text">
552	+ Enable conversion tracking on your Google Ads landing pages so when a paid visitor clicks on
553	+ the button it's measured as a conversion.

554	</div>
555	</th>
556	+ <td class="yes cnb-starter">✓</td>
557	<td class="yes">✓</td>
558	</tr>
559	+ <tr class="cnb-starter">
560	+ <th>Live preview
561	<span class="cnb-tooltip-icon">?</span>
562	<div class="cnb-tooltip-text">
563	+ Displays a real-time preview of the buttons your building. PRO can simulate the day and time
564	+ to test scheduled buttons.
565	</div>
566	</th>
567	+ <td class="yes cnb-starter">✓</td>
568	<td class="yes">✓</td>
569	</tr>
570	+ <tr class="line cnb-starter">
571	<td> </td>
572	+ <td class="cnb-starter"></td>
573	<td></td>
574	</tr>
575	+ <tr class="cnb-starter">
576	+ <th>Single button</th>
577	+ <td class="yes cnb-starter">✓</td>
578	<td class="yes">✓</td>
579	</tr>
580	+ <tr class="cnb-starter">
581	+ <th>Buttonbar (single action)
582	<span class="cnb-tooltip-icon">?</span>
583	<div class="cnb-tooltip-text">
584	+ The Buttonbar is a bar of one or more buttons that sits at the top or bottom of your screen.
585	+ In the Starter plan the Buttonbar only offers a single action.
586	</div>
587	</th>
588	+ <td class="yes cnb-starter">✓</td>
589	<td class="yes">✓</td>
590	</tr>
591	<tr>
592	+ <th>Buttonbar (multi-action)
593	<span class="cnb-tooltip-icon">?</span>
594	<div class="cnb-tooltip-text">
595	+ The multi-action Buttonbar can hold up to 5 actions.


596	</div>
597	</th>
598	+ <td class="cnb-starter">𐄂</td>
599	<td class="yes">✓</td>
600	</tr>





601	<tr>
602	+ <th>Multibutton
603	+ <span class="cnb-tooltip-icon">?</span>
604	+ <div class="cnb-tooltip-text">
605	+ The Multibutton shows a single circular button but expands into multiple buttons when
606	+ clicked.
607	+ </div>
608	+ </th>
609	+ <td class="cnb-starter">𐄂</td>
610	<td class="yes">✓</td>
611	</tr>
612	<tr>
613	+ <th>Multiple buttons per page
614	<span class="cnb-tooltip-icon">?</span>
615	<div class="cnb-tooltip-text">
616	+ PRO users can add up to 8 buttons on a single page.

617	</div>
618	</th>
619	+ <td class="cnb-starter">𐄂</td>
620	<td class="yes">✓</td>
621	+ </tr>
622	+ <tr>
623	+ <th>Change button icons</th>
624	+ <td class="cnb-starter">𐄂</td>
625	<td class="yes">✓</td>
626	</tr>
627	<tr>
628	+ <th>Custom button images
629	<span class="cnb-tooltip-icon">?</span>
630	<div class="cnb-tooltip-text">
631	+ Instead of an icon you can add your own image to your button.<br><br>E.g. add a headshot of
632	+ the person answering the phone to make it more personal.
633	</div>
634	</th>
635	+ <td class="cnb-starter">𐄂</td>
636	<td class="yes">✓</td>
637	</tr>
638	<tr>
639	+ <th>Button animations
640	<span class="cnb-tooltip-icon">?</span>
641	<div class="cnb-tooltip-text">
642	+ Draw more attention to your buttons by adding delicate animations.

643	</div>
644	</th>
645	+ <td class="cnb-starter">𐄂</td>
646	<td class="yes">✓</td>
647	</tr>
648	+
649	<tr class="line">
650	<td> </td>
651	+ <td class="cnb-starter"></td>
652	<td></td>
653	</tr>
654	<tr>
655	+ <th>WhatsApp Chat window
656	<span class="cnb-tooltip-icon">?</span>
657	<div class="cnb-tooltip-text">
658	+ A button that fires a WhatsApp chat window right on your website where you can greet the
659	+ visitor. You can automate multiple speech bubbles which appear in sequence.<br>The WhatsApp
660	+ app is opened once the visitor engages in the conversation.
661	</div>
662	</th>
663	+ <td class="cnb-starter">𐄂</td>
664	<td class="yes">✓</td>
665	</tr>
666	<tr>
667	+ <th>Intercom chat (integration)
668	<span class="cnb-tooltip-icon">?</span>
669	<div class="cnb-tooltip-text">
670	+ Create a button to open the Intercom chat window. This way the Intercom button will match
671	+ nicely with your other buttons and allows you to combine it with the scheduler. You can also
672	+ place it inside a Multibutton or Buttonbar.
673	</div>
674	</th>
675	+ <td class="cnb-starter">𐄂</td>
676	<td class="yes">✓</td>
677	</tr>
678	<tr>
679	+ <th>Content Windows
680	<span class="cnb-tooltip-icon">?</span>
681	<div class="cnb-tooltip-text">
682	+ Opened by a button, the Content Window enables you to add any content to a small window that
683	+ slides into the screen.<br><br>A great use-case is showing a booking form without sending
684	+ visitors off the page.
685	</div>
686	</th>
687	+ <td class="cnb-starter">𐄂</td>
688	<td class="yes">✓</td>
689	</tr>
690	<tr>
691	+ <th>Tally Form window
692	<span class="cnb-tooltip-icon">?</span>
693	<div class="cnb-tooltip-text">
694	+ With this integration you only need a form ID to place a Tally contact form inside a
695	+ slide-in Content Window.
696	</div>
697	</th>
698	+ <td class="cnb-starter">𐄂</td>
699	<td class="yes">✓</td>
700	+ </tr>
701	+ <tr class="line">
702	+ <td> </td>
703	+ <td class="cnb-starter"></td>
704	+ <td></td>
705	</tr>
706	<tr>
707	+ <th>Scheduler
708	<span class="cnb-tooltip-icon">?</span>
709	<div class="cnb-tooltip-text">
710	+ Schedule your buttons to appear on the right days at the right time.<br>The scheduler can
711	+ be used on each individual action, so you can change the contents of multi-action buttons throughout the
712	+ day.<br><br>E.g. a phone button during working hours and a contact form when you're closed.
713	</div>
714	</th>
715	+ <td class="cnb-starter">𐄂</td>
716	<td class="yes">✓</td>
717	</tr>
718	<tr>
719	+ <th>Appear after scrolling
720	<span class="cnb-tooltip-icon">?</span>
721	<div class="cnb-tooltip-text">
722	+ Set the number of pixels your visitors have to scroll down before the button
723	+ appears.<br><br>E.g. combine it with the Scroll-to-point action to create a back-to-top
724	+ button.
725	</div>
726	</th>
727	+ <td class="cnb-starter">𐄂</td>
728	<td class="yes">✓</td>
729	</tr>
730	+ <tr class="cnb-starter">
731	+ <th>Display rules (Basic)
732	<span class="cnb-tooltip-icon">?</span>
733	<div class="cnb-tooltip-text">
734	+ Create simple rules for where your buttons should appear. They can match an exact url, a
735	+ path or if the url contains a string.
736	</div>
737	</th>
738	+ <td class="yes cnb-starter">✓</td>
739	<td class="yes">✓</td>
740	</tr>
741	<tr>
742	+ <th>Display rules (Advanced)
743	<span class="cnb-tooltip-icon">?</span>
744	<div class="cnb-tooltip-text">
745	+ With the advanced display rules you can set rules on parameters (great in combination with
746	+ PPC campaigns) and use RegEx to create even more powerful rules.
747	</div>
748	</th>
749	+ <td class="cnb-starter">𐄂</td>
750	<td class="yes">✓</td>
751	</tr>
752	<tr>
753	+ <th>Geo targeting
754	<span class="cnb-tooltip-icon">?</span>
755	<div class="cnb-tooltip-text">
756	+ Show the right contact options to the right people. With Geo display rules you tailor the
757	+ buttons to the visitor's country.
758	</div>
759	</th>
760	+ <td class="cnb-starter">𐄂</td>
761	<td class="yes">✓</td>
762	</tr>
763	</tbody>
764	</table>
765	+ <p><a class=" button cnbShowStarterFeatures" onclick="cnbShowStarterFeatures()">Compare against features included in starter</a></p>
766	</div>
767	<?php
768	}