Call Now Button - Version 0.4.0

Version Description

= * Tabbed admin interface * Google Ads conversion tracking * Text bubbles for standard circular buttons * 6 additional button placements * Hide button on the front page * Change the color of the icon * Small design changes * Other small plugin improvements

Download this release

Release Info

Developer jgrietveld
Plugin Icon 128x128 Call Now Button
Version 0.4.0
Comparing to
See all releases

Code changes from version 0.3.6 to 0.4.0

Files changed (4) hide show
  1. call-now-button.css +25 -8
  2. call-now-button.js +39 -25
  3. call-now-button.php +377 -200
  4. readme.txt +45 -22
call-now-button.css CHANGED
@@ -9,6 +9,15 @@
9
label.small-italic {
10
font-size: 12px;
11
}
12
.cnb-url a {
13
text-decoration: none;
14
font-weight: 200;
@@ -24,19 +33,18 @@ label.small-italic {
24
.cnb-container input[type="radio"] + label {
25
font-weight: 300;
26
}
27
- .cnb-container input[type="radio"]:checked + label {
28
font-weight: bold;
29
}
30
.radio-item {
31
margin: 10px 0;
32
}
33
- p.submit,
34
- #cnb_settings {
35
- display: inline-block;
36
}
37
- #cnb_settings {
38
- margin-left: 25px;
39
- cursor: pointer;
40
}
41
.check-settings,
42
.cnb-switch-back {
@@ -47,13 +55,19 @@ p.submit,
47
.red-background {
48
background-color: #ffdbdb !important;
49
}
50
- #cnb_slider_value {
51
font-weight: normal;
52
}
53
input[type='range'] {
54
position: relative;
55
top: 8px;
56
}
57
.cnb_slider_value {
58
font-weight: normal;
59
}
@@ -62,4 +76,7 @@ input[type='range'] {
62
.radio-item {
63
margin: 5px 0;
64
}
65
}
9
label.small-italic {
10
font-size: 12px;
11
}
12
+
13
+ table.form-table {
14
+ display:none;
15
+ }
16
+
17
+ table.form-table.nav-tab-active {
18
+ display: initial;
19
+ }
20
+
21
.cnb-url a {
22
text-decoration: none;
23
font-weight: 200;
33
.cnb-container input[type="radio"] + label {
34
font-weight: 300;
35
}
36
+ .cnb-container input[type="radio"]:checked + label,
37
+ .cnb-container input[type="checkbox"]:checked + label {
38
font-weight: bold;
39
}
40
.radio-item {
41
margin: 10px 0;
42
}
43
+ .cnb-extra-placement {
44
+ display: none;
45
}
46
+ .cnb-extra-placement.cnb-extra-active {
47
+ display: block;
48
}
49
.check-settings,
50
.cnb-switch-back {
55
.red-background {
56
background-color: #ffdbdb !important;
57
}
58
+ #cnb_slider_value,
59
+ #cnb_order_value {
60
font-weight: normal;
61
}
62
input[type='range'] {
63
position: relative;
64
top: 8px;
65
}
66
+ @-moz-document url-prefix() {
67
+ input[type='range'] {
68
+ top: 12px;
69
+ }
70
+ }
71
.cnb_slider_value {
72
font-weight: normal;
73
}
76
.radio-item {
77
margin: 5px 0;
78
}
79
+ }
80
+ .nounderscore {
81
+ text-decoration: none;
82
}
call-now-button.js CHANGED
@@ -1,38 +1,52 @@
1
jQuery(document).ready(function($){
2
$('.cnb-color-field').wpColorPicker();
3
- $("#cnb_settings").click(function() {
4
- $("#settings").slideDown();
5
- $("#cnb_settings").remove();
6
- });
7
- $("span.check-settings").click(function() {
8
- if($("#settings").is(":hidden")) {
9
- $("#settings").slideDown('fast');
10
- $("div#cnb_settings").remove();
11
- }
12
- $("tr.appearance input").addClass("red-background").focus();
13
- $('html, body').animate({
14
- scrollTop: $("tr.appearance").offset().top
15
- }, 500);
16
- $("span.check-settings").remove();
17
- });
18
- $(".cnb-switch-back").click(function() {
19
- if($("#settings").is(":hidden")) {
20
- $("#settings").slideDown('fast');
21
- $("div#cnb_settings").remove();
22
- }
23
- $("tr.classic ").addClass("red-background").focus();
24
- $('html, body').animate({
25
- scrollTop: $("tr.classic").offset().top
26
- }, 500);
27
- });
28
$("a#paypalLink").click(function(e){
29
e.preventDefault();
30
$("#paypal").click();
31
});
32
});
33
var cnb_slider = document.getElementById("cnb_slider");
34
var cnb_slider_value = document.getElementById("cnb_slider_value");
35
cnb_slider_value.innerHTML = Math.round(cnb_slider.value * 100) + "%";
36
cnb_slider.oninput = function() {
37
cnb_slider_value.innerHTML = Math.round(this.value * 100) + "%";
38
}
1
jQuery(document).ready(function($){
2
+ // Add color picker
3
$('.cnb-color-field').wpColorPicker();
4
+ $('.cnb-iconcolor-field').wpColorPicker();
5
+
6
+ // Add textlink for PayPal donate button
7
$("a#paypalLink").click(function(e){
8
e.preventDefault();
9
$("#paypal").click();
10
});
11
+
12
+ // Reveal additional button placements when clicking "more"
13
+ $("#cnb-more-placements").click(function(e){
14
+ e.preventDefault();
15
+ $(".cnb-extra-placement").css("display","block");
16
+ $("#cnb-more-placements").remove();
17
+ });
18
+
19
+ // Option to Hide Icon is only visible when the full width button is selected
20
+ var radioValue = $("input[name='cnb[appearance]']:checked").val();
21
+ var textValue = $("input[name='cnb[text]']").val();
22
+ if(radioValue != 'full' && radioValue != 'tfull') {
23
+ $('#hideIconTR').hide();
24
+ } else if(textValue.length < 1) {
25
+ $('#hideIconTR').hide();
26
+ }
27
+ $('input[name="cnb[appearance]"]').on("change",function(){
28
+ var radioValue = $("input[name='cnb[appearance]']:checked").val();
29
+ var textValue = $("input[name='cnb[text]']").val();
30
+ if(radioValue != 'full' && radioValue != 'tfull') {
31
+ $('#hideIconTR').hide();
32
+ } else if(textValue.length > 0 ) {
33
+ $('#hideIconTR').show();
34
+ }
35
+
36
+ });
37
});
38
+ // Zoom slider - show percentage
39
var cnb_slider = document.getElementById("cnb_slider");
40
var cnb_slider_value = document.getElementById("cnb_slider_value");
41
cnb_slider_value.innerHTML = Math.round(cnb_slider.value * 100) + "%";
42
cnb_slider.oninput = function() {
43
cnb_slider_value.innerHTML = Math.round(this.value * 100) + "%";
44
}
45
+
46
+ // Z-index slider - show steps
47
+ var cnb_order_slider = document.getElementById("cnb_order_slider");
48
+ var cnb_order_value = document.getElementById("cnb_order_value");
49
+ cnb_order_value.innerHTML = cnb_order_slider.value;
50
+ cnb_order_slider.oninput = function() {
51
+ cnb_order_value.innerHTML = this.value;
52
+ }
call-now-button.php CHANGED
@@ -1,9 +1,9 @@
1
<?php
2
/*
3
Plugin Name: Call Now Button
4
- Plugin URI: http://callnowbutton.com
5
- Description: Mobile visitors will see a call now button fixed at the bottom of your site
6
- Version: 0.3.6
7
Author: Jerry Rietveld
8
Author URI: http://www.jgrietveld.com
9
License: GPL2
@@ -26,16 +26,19 @@ License: GPL2
26
*/
27
?>
28
<?php
29
- define('CNB_VERSION','0.3.6');
30
define('CNB_BASENAME', plugin_basename( __FILE__ ) );
31
define('CNB_BASEFOLDER', plugin_basename( dirname( __FILE__ ) ) );
32
define('CNB_FILENAME', str_replace( CNB_BASEFOLDER.'/', '', CNB_BASENAME ) );
33
- add_action('admin_menu', 'register_cnb_page');
34
add_action('admin_init', 'cnb_options_init');
35
36
$cnb_changelog =
37
array(
38
array(
39
'3.6' => 'Small validation fixes and zoom now controls icon size in full width buttons.',
40
'3.5' => 'Small JS fix',
41
'3.4' => 'Option to resize your button and change where it sits in the stack order (z-index).',
@@ -44,7 +47,7 @@ array(
44
'3.1' => 'You can now add text to your button and it\'s possible to switch between including and excluding specific pages.',
45
'3.0' => 'Option to add text to your button.',
46
'2.1' => 'Some small fixes',
47
- '2.0' => 'The Call Now Button has a fresh new look! If you prefer the old button, you can <span class="cnb-switch-back">switch back</span> in the Advanced Settings. <a href="http://callnowbutton.com/new-button-design/" target="_blank" class="cnb-external"><i>See the difference &raquo;</i></a>'
48
)
49
);
50
@@ -56,6 +59,7 @@ $cnb_updated = $cnb_settings['updated'];
56
$cnb_options['active'] = isset($cnb_options['active']) ? 1 : 0;
57
$cnb_options['classic'] = isset($cnb_options['classic']) ? 1 : 0;
58
$cnb_options['hideIcon'] = isset($cnb_options['hideIcon']) ? $cnb_options['hideIcon'] : 0;
59
60
$plugin_title = apply_filters( 'cnb_plugin_title', 'Call Now Button');
61
@@ -63,9 +67,9 @@ if(isset($_GET['page']) && strpos($_GET['page'], 'call-now-button') !== false) {
63
add_action( 'admin_enqueue_scripts', 'cnb_enqueue_color_picker' ); // add the color picker
64
}
65
66
- function register_cnb_page() {
67
global $plugin_title;
68
- $page = add_submenu_page('options-general.php', $plugin_title, $plugin_title, 'manage_options', 'call-now-button', 'call_now_settings_page');
69
add_action( 'admin_print_styles-' . $page , 'cnb_admin_styling' );
70
}
71
function cnb_enqueue_color_picker( $hook_suffix ) {
@@ -79,8 +83,8 @@ function cnb_admin_styling() {
79
function cnb_plugin_meta($links, $file) {
80
if ( $file == CNB_BASENAME ) {
81
$cnb_new_links = array(
82
- sprintf( '<a href="options-general.php?page=%s">%s</a>', CNB_FILENAME, __('Settings')),
83
- '<a href="http://callnowbutton.com/support/">Support</a>');
84
array_push(
85
$links,
86
$cnb_new_links[0],
@@ -92,7 +96,7 @@ function cnb_plugin_meta($links, $file) {
92
add_filter( 'plugin_row_meta', 'cnb_plugin_meta', 10, 2 );
93
94
function cnb_plugin_add_settings_link( $links ) {
95
- array_unshift( $links, sprintf( '<a href="options-general.php?page=%s">%s</a>', CNB_FILENAME, __('Settings') ) );
96
return $links;
97
}
98
add_filter( 'plugin_action_links_'. CNB_BASENAME, 'cnb_plugin_add_settings_link' );
@@ -101,7 +105,7 @@ function cnb_options_init() {
101
register_setting('cnb_options','cnb');
102
wp_register_style( 'cnb_styling', plugins_url('call-now-button.css', __FILE__), false, CNB_VERSION, 'all' );
103
}
104
- function call_now_settings_page() {
105
global $cnb_options;
106
global $plugin_title;
107
global $cnb_updated;
@@ -124,12 +128,6 @@ function call_now_settings_page() {
124
if($cnb_caching_check[0] == TRUE) {
125
echo '<div class="notice-error notice"><p><span class="dashicons dashicons-warning"></span> Your website is using a <strong><i>Caching Plugin</i></strong> ('.$cnb_caching_check[1].'). If you\'re not seeing your button or your changes, make sure you empty your cache first.</p></div>';
126
}
127
- }
128
-
129
- // Display notification that the button is limited to a number of posts/pages
130
- if($cnb_options['active']==1 && $cnb_options['show'] != "") {
131
- echo '<div class="notice-error notice">'.
132
- '<p><span>Appearance of the Button is <b>limited</b><span class="hide-on-mobile"> to specific Posts or Pages</span>. <span class="check-settings">Review settings &raquo;</span></p></div>';
133
}
134
135
// inform exisiting users about update to the button design
@@ -137,6 +135,7 @@ function call_now_settings_page() {
137
<div class="notice-warning notice is-dismissible">
138
<?php
139
$cnb_old_version = substr($cnb_updated[1],2);
140
foreach ($cnb_changelog[0] as $key => $value) { // Only on first run after update show list of changes since last update
141
if($key > $cnb_old_version) {
142
echo '<p><span class="dashicons dashicons-yes"></span> ' . $value . '</p>';
@@ -144,11 +143,28 @@ function call_now_settings_page() {
144
}
145
?>
146
</div>
147
- <?php } ?>
148
149
<form method="post" action="options.php" class="cnb-container">
150
<?php settings_fields('cnb_options'); ?>
151
- <table class="form-table">
152
<tr valign="top">
153
<th scope="row">Button status:</th>
154
<td class="activated">
@@ -156,132 +172,216 @@ function call_now_settings_page() {
156
</td>
157
</tr>
158
<tr valign="top">
159
- <th scope="row">Phone number:</th>
160
<td><input type="text" name="cnb[number]" value="<?php echo $cnb_options['number']; ?>" /></td>
161
</tr>
162
<tr valign="top" class="button-text">
163
- <th scope="row">Button text:</th>
164
<td>
165
- <input id="buttonTextField" type="text" name="cnb[text]" value="<?php echo $cnb_options['text']; ?>" maxlength="30" />
166
- <input id="hideIcon" name="cnb[hideIcon]" type="checkbox" value="1" <?php checked('1', $cnb_options['hideIcon']); ?> /> <label class="small-italic" title="hide" for="hideIcon">Hide icon</label>
167
-
168
- <p class="description">Make sure to check on your phone if the text fits your button! <span class="whatsThis">(<a href="http://callnowbutton.com/call-now-button-text-buttons/" target="_blank">Learn why...</a>)</span></p>
169
</td>
170
</tr>
171
</table>
172
- <div id="settings">
173
- <table class="form-table">
174
- <tr valign="top">
175
- <th scope="row">Button color:</th>
176
- <td><input name="cnb[color]" type="text" value="<?php echo $cnb_options['color']; ?>" class="cnb-color-field" data-default-color="#009900" /></td>
177
- </tr>
178
- <tr valign="top"><th scope="row">Position</th>
179
- <td class="appearance">
180
- <div class="appearance-options">
181
- <div class="radio-item">
182
- <input type="radio" id="appearance1" name="cnb[appearance]" value="right" <?php checked('right', $cnb_options['appearance']); ?>>
183
- <label title="right" for="appearance1">Right corner</label>
184
- </div>
185
- <div class="radio-item">
186
- <input type="radio" id="appearance2" name="cnb[appearance]" value="left" <?php checked('left', $cnb_options['appearance']); ?>>
187
- <label title="left" for="appearance2">Left corner</label>
188
- </div>
189
- <div class="radio-item">
190
- <input type="radio" id="appearance3" name="cnb[appearance]" value="middle" <?php checked('middle', $cnb_options['appearance']); ?>>
191
- <label title="middle" for="appearance3">Center bottom</label>
192
- </div>
193
- <div class="radio-item">
194
- <input type="radio" id="appearance4" name="cnb[appearance]" value="full" <?php checked('full', $cnb_options['appearance']); ?>>
195
- <label title="full" for="appearance4">Full bottom</label>
196
- </div>
197
</div>
198
- <p class="description appearanceDesc">This setting is ignored because you have text entered into the <b>Button text</b> field.</p>
199
- </td>
200
- </tr>
201
- <tr valign="top">
202
- <th scope="row">Click tracking:</th>
203
- <td>
204
- <div class="radio-item">
205
- <input id="tracking3" type="radio" name="cnb[tracking]" value="0" <?php checked('0', $cnb_options['tracking']); ?> />
206
- <label for="tracking3">Disabled</label>
207
- </div>
208
- <div class="radio-item">
209
- <input id="tracking1" type="radio" name="cnb[tracking]" value="2" <?php checked('2', $cnb_options['tracking']); ?> />
210
- <label for="tracking1">Google Universal Analytics (analytics.js)</label>
211
- </div>
212
- <div class="radio-item">
213
- <input id="tracking4" type="radio" name="cnb[tracking]" value="3" <?php checked('3', $cnb_options['tracking']); ?> />
214
- <label for="tracking4">Latest Google Analytics (gtag.js)</label>
215
- </div>
216
- <div class="radio-item">
217
- <input id="tracking2" type="radio" name="cnb[tracking]" value="1" <?php checked('1', $cnb_options['tracking']); ?> />
218
- <label for="tracking2">Classic Google Analytics (ga.js)</label>
219
- </div>
220
- <p class="description">Click tracking turned on? Wait for about a day then log into your Google Analytics accunt and click in the <strong>Behavior</strong> section on <strong>Events</strong>. <span class="whatsThis">(<a href="https://support.google.com/analytics/answer/1033068#SeeAlerts" target="_blank">What's this?</a>)</span></p>
221
- </td>
222
- </tr>
223
- <tr valign="top" class="appearance">
224
- <th scope="row">Limit appearance:</th>
225
- <td>
226
- <input type="text" name="cnb[show]" value="<?php echo $cnb_options['show']; ?>" />
227
- <p class="description">Enter IDs of the posts &amp; pages, separated by commas (leave blank for all).</p>
228
- <div class="radio-item">
229
- <input id="limit1" type="radio" name="cnb[limit]" value="include" <?php checked('include', $cnb_options['limit']);?> />
230
- <label for="limit1">Limit to these posts and pages.</label>
231
- </div>
232
- <div class="radio-item">
233
- <input id="limit2" type="radio" name="cnb[limit]" value="exclude" <?php checked('exclude', $cnb_options['limit']);?> />
234
- <label for="limit2">Exclude these posts and pages.</label>
235
- </div>
236
-
237
- </td>
238
- </tr>
239
- <tr valign="top" class="zoom">
240
- <th scope="row">Button size (<span id="cnb_slider_value"></span>):</th>
241
- <td>
242
- <label class="cnb_slider_value">Smaller&nbsp;&laquo;&nbsp;</label><input type="range" min="0.7" max="1.3" name="cnb[zoom]" value="<?php echo $cnb_options['zoom']; ?>" class="slider" id="cnb_slider" step="0.1"><label class="cnb_slider_value">&nbsp;&raquo;&nbsp;Bigger</label>
243
- </td>
244
- </tr>
245
- <tr valign="top" class="z-index">
246
- <th scope="row">Order:</th>
247
- <td>
248
- <label class="cnb_slider_value">Backwards&nbsp;&laquo;&nbsp;</label><input type="range" min="1" max="10" name="cnb[z-index]" value="<?php echo $cnb_options['z-index']; ?>" class="slider2" id="cnb_slider2" step="1"><label class="cnb_slider_value">&nbsp;&raquo;&nbsp;Front</label>
249
- <p class="description">The default (and recommended) value is all the way to the front so the button sits on top of everything else. In case you have a specific usecase where you want something else to sit in front of the Call Now Button (e.g. a chat window or a cookie notice) you can move this backwards one step at a time to adapt it to your situation. <span class="whatsThis">(<a href="http://callnowbutton.com/set-order/" target="_blank">Learn more...</a>)</span></p>
250
- </td>
251
- </tr>
252
- <tr valign="top" class="classic">
253
- <th scope="row">Back to old button design:</th>
254
- <td>
255
- <input id="classic" name="cnb[classic]" type="checkbox" value="1" <?php checked('1', $cnb_options['classic']); ?> /> <label title="Enable" for="classic">Old button <span class="inline-helper">- <a href="http://callnowbutton.com/new-button-design/" target="_blank" class="cnb-normal"><i>What's the difference?</i></a></span></label>
256
- </td>
257
- </tr>
258
- </table>
259
- </div><!--#settings-->
260
<input type="hidden" name="cnb[version]" value="<?php echo CNB_VERSION; ?>" />
261
<p class="submit"><input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" /></p>
262
- <div id="cnb_settings">+ Advanced settings</div>
263
</form>
264
265
<div class="feedback-collection">
266
<div class="cnb-clear"></div>
267
- <p class="cnb-url cnb-center"><a href="http://callnowbutton.com" target="_blank">callnowbutton.com</a></p>
268
-
269
- <hr>
270
271
<p class="cnb-center cnb-spacing">
272
- <a href="http://callnowbutton.com/support/" target="_blank" title="Support">Support</a> &middot;
273
- <a href="http://callnowbutton.com/feature-request/" target="_blank" title="Feature Requests">Suggestions</a> &middot;
274
<a href="#donate" id="paypalLink">Donate</a> &middot;
275
- <a href="http://callnowbutton.com/praise/" target="_blank" title="Praise">Just say thanks :-)</a>
276
</p>
277
<!--// Display notification about the testing program -->
278
<div class="postbox cnb-alert-box cnb-center">
279
- <p>The Call&nbsp;Now&nbsp;Button&nbsp;<b>Pro</b> is launching soon!
280
- <a class="cnb-external" href="http://callnowbutton.com/be-notified-call-now-button-pro/" rel="help" target="_blank">Be notified when it does!</a>
281
</p>
282
</div>
283
284
- <hr>
285
<div class="donate cnb-center">
286
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
287
<input type="hidden" name="cmd" value="_s-xclick">
@@ -296,114 +396,173 @@ function call_now_settings_page() {
296
if(get_option('cnb') && !is_admin()) {
297
298
$cnb_options = get_option('cnb');
299
- if(isset($cnb_options['active'])) $enabled = $cnb_options['active']; else $enabled = 0;
300
- if($enabled == '1') {
301
- // it's enabled so put footer stuff here
302
function cnb_head() {
303
- $cnb_options = get_option('cnb');
304
- if(isset($cnb_options['classic'])) $classic = $cnb_options['classic']; else $classic = 0;
305
- $credits = "\n<!-- Call Now Button ".CNB_VERSION." by Jerry Rietveld (callnowbutton.com) -->\n";
306
- $showTextButton = ($cnb_options['text'] == '') ? false : true;
307
$ButtonExtra = "";
308
- if($classic == 1 && !$showTextButton) {
309
310
// OLD BUTTON DESIGN
311
- if($cnb_options['appearance'] == 'full' || $cnb_options['appearance'] == 'middle' || $showTextButton) {
312
- $ButtonAppearance = "width:100%;left:0;";
313
$ButtonExtra = "body {padding-bottom:60px;}";
314
}
315
elseif($cnb_options['appearance'] == 'left') {
316
- $ButtonAppearance = "width:100px;left:0;border-bottom-right-radius:40px; border-top-right-radius:40px;";
317
} else {
318
- $ButtonAppearance = "width:100px;right:0;border-bottom-left-radius:40px; border-top-left-radius:40px;";
319
}
320
321
- $credits .= "<style>#callnowbutton {display:none;} @media screen and (max-width:650px){#callnowbutton .NoButtonText{display:none;}#callnowbutton {display:block; ".$ButtonAppearance." height:80px; position:fixed; bottom:-20px; border-top:2px solid ".changeColor($cnb_options['color'],'lighter')."; background:url(data:image/svg+xml;base64,".svg(changeColor($cnb_options['color'], 'darker') ).") center 2px no-repeat ".$cnb_options['color']."; text-decoration:none; box-shadow:0 0 5px #888; z-index:".zindex($cnb_options['z-index']).";background-size:58px 58px}".$ButtonExtra."}</style>\n";
322
323
} else {
324
- // NEWEST BUTTON DESIGN
325
- $credits = "\n<!-- Call Now Button ".CNB_VERSION." by Jerry Rietveld (callnowbutton.com) -->\n";
326
-
327
- $ButtonShape = "width:65px; height:65px; border-radius:50%; border-top:1px solid ".changeColor($cnb_options['color'], 'lighter')."; bottom:15px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);transform: scale(" . $cnb_options['zoom'] . ");";
328
-
329
- if($cnb_options['appearance'] == 'full' || $showTextButton) {
330
- $ButtonAppearance = "width:100%;left:0;bottom:0;height:60px;border-top:1px solid ".changeColor($cnb_options['color'], 'lighter')."; border-bottom:1px solid ".changeColor($cnb_options['color'], 'darker').";";
331
- $ButtonExtra = "body {padding-bottom:60px;}#callnowbutton img {transform: scale(" . $cnb_options['zoom'] . ");}";
332
- if($showTextButton) {
333
- $ButtonAppearance .= "text-shadow: 0 1px ".changeColor($cnb_options['color'], 'darker')."; text-align:center;color:#fff; font-weight:600; font-size:120%; overflow: hidden;";
334
- if(!isset($cnb_options['hideIcon'])) {
335
- $ButtonAppearance .= 'padding-right:20px;';
336
}
337
}
338
- }
339
- elseif($cnb_options['appearance'] == 'left' ) {
340
- $ButtonAppearance = $ButtonShape . "left:20px;";
341
- }
342
- elseif($cnb_options['appearance'] == 'middle') {
343
- $ButtonAppearance = $ButtonShape . "left:50%; margin-left:-33px;";
344
}
345
- else {
346
- $ButtonAppearance = $ButtonShape . "right:20px;";
347
}
348
349
- $credits = $credits ."<style>";
350
- $credits .= "#callnowbutton {display:none;} @media screen and (max-width:650px){#callnowbutton {display:block; position:fixed; text-decoration:none; z-index:".zindex($cnb_options['z-index']).";";
351
- $credits .= $ButtonAppearance;
352
- if(!$showTextButton) {
353
- $credits .= "background:url(data:image/svg+xml;base64,".svg(changeColor($cnb_options['color'], 'darker') ).") center/50px 50px no-repeat ".$cnb_options['color'].";";
354
} else {
355
- $credits .= "background:".$cnb_options['color'].";display: flex; justify-content: center; align-items: center;";
356
}
357
- $credits .= "}" . $ButtonExtra . "}#callnowbutton .NoButtonText{display:none;}";
358
- $credits .= "</style>\n";
359
}
360
- echo $credits;
361
}
362
add_action('wp_head', 'cnb_head');
363
364
function cnb_footer() {
365
- $cnb_options = get_option('cnb');
366
-
367
- if(isset($cnb_options['show']) && $cnb_options['show'] != "") {
368
- $show = explode(',', str_replace(' ', '' ,$cnb_options['show']));
369
- $limited = TRUE;
370
- $include = ($cnb_options['limit'] == 'include') ? TRUE : FALSE; // FALSE meanse IDs should be excluded
371
- } else {
372
- $limited = FALSE;
373
}
374
375
- if($cnb_options['tracking'] == '1') { // for ga.js
376
- $tracking = "onclick=\"_gaq.push(['_trackEvent', 'Contact', 'Call Now Button', 'Phone']);\"";
377
- } elseif($cnb_options['tracking'] == '2') { // for analytics.js
378
- $tracking = "onclick=\"ga('send', 'event', 'Contact', 'Call Now Button', 'Phone');\"";
379
- } elseif($cnb_options['tracking'] == '3') { // for gtag.js
380
- $tracking = "onclick=\"gtag('event', 'Call Now Button', {event_category: 'contact', event_label: 'phone'});\"";
381
} else {
382
- $tracking = "";
383
}
384
385
- if($cnb_options['text'] == '') {
386
- $buttonText = '<span class="NoButtonText">Call Now Button</span>';
387
- } elseif(isset($cnb_options['hideIcon'])) {
388
- $buttonText = $cnb_options['text'];
389
} else {
390
- $buttonText = '<img alt="Call Now Button" src="data:image/svg+xml;base64,'.svg(changeColor($cnb_options['color'], 'darker')).'" width="40">'. $cnb_options['text'];
391
}
392
393
- $callLink = '<a href="tel:'.$cnb_options['number'].'" id="callnowbutton" '.$tracking.'>'.$buttonText.'</a>';
394
395
- if($limited) {
396
- if($include) {
397
- if(is_single($show) || is_page($show)) {
398
- echo $callLink;
399
}
400
} else {
401
- if(!is_single($show) && !is_page($show)) {
402
- echo $callLink;
403
}
404
}
405
} else {
406
- echo $callLink;
407
}
408
}
409
add_action('wp_footer', 'cnb_footer');
@@ -417,11 +576,14 @@ function cnb_get_options() { // Grabbing existing settings and creating them if
417
'number' => '',
418
'text' => '',
419
'hideIcon' => 0,
420
- 'color' => '#009900',
421
'appearance' => 'right',
422
'tracking' => 0,
423
'show' => '',
424
'limit' => 'include',
425
'zoom' => '1',
426
'z-index' => '10',
427
'version' => CNB_VERSION
@@ -451,24 +613,32 @@ function cnb_update_needed() { //compares version numbers
451
}
452
function cnb_update_options() {
453
$cnb_options = get_option('cnb');
454
- //$version = array_key_exists('version', $cnb_options) ? substr($cnb_options['version'], 0, 3) : 0.1;
455
if(cnb_update_needed()) { // Check current version and if it needs an update
456
$cnb_options['active'] = isset($cnb_options['active']) ? 1 : 0;
457
$cnb_options['text'] = isset($cnb_options['text']) ? $cnb_options['text'] : "";
458
$cnb_options['hideIcon'] = isset($cnb_options['hideIcon']) ? $cnb_options['hideIcon'] : 0;
459
$cnb_options['limit'] = isset($cnb_options['limit']) ? $cnb_options['limit'] : 'include';
460
$default_options = array(
461
'active' => $cnb_options['active'],
462
'number' => $cnb_options['number'],
463
'text' => $cnb_options['text'],
464
'hideIcon' => $cnb_options['hideIcon'],
465
'color' => $cnb_options['color'],
466
'appearance' => $cnb_options['appearance'],
467
'tracking' => $cnb_options['tracking'],
468
'show' => $cnb_options['show'],
469
'limit' => $cnb_options['limit'],
470
- 'zoom' => '1',
471
- 'z-index' => '10',
472
'version' => CNB_VERSION
473
);
474
if(array_key_exists('classic', $cnb_options) && $cnb_options['classic'] == 1 ) {
@@ -484,7 +654,7 @@ function cnb_update_options() {
484
// Color functions to calculate borders
485
function changeColor($color, $direction) {
486
if(!preg_match('/^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})#x2F;i', $color, $parts));
487
- if(!isset($direction) || $direction == "lighter") { $change = 45; } else { $change = -50; }
488
for($i = 1; $i <= 3; $i++) {
489
$parts[$i] = hexdec($parts[$i]);
490
$parts[$i] = round($parts[$i] + $change);
@@ -495,8 +665,8 @@ function changeColor($color, $direction) {
495
return $output;
496
}
497
498
- function svg($color) {
499
- $phone = '<path d="M7.104 14.032l15.586 1.984c0 0-0.019 0.5 0 0.953c0.029 0.756-0.26 1.534-0.809 2.1 l-4.74 4.742c2.361 3.3 16.5 17.4 19.8 19.8l16.813 1.141c0 0 0 0.4 0 1.1 c-0.002 0.479-0.176 0.953-0.549 1.327l-6.504 6.505c0 0-11.261 0.988-25.925-13.674C6.117 25.3 7.1 14 7.1 14" fill="'.$color.'"/><path d="M7.104 13.032l6.504-6.505c0.896-0.895 2.334-0.678 3.1 0.35l5.563 7.8 c0.738 1 0.5 2.531-0.36 3.426l-4.74 4.742c2.361 3.3 5.3 6.9 9.1 10.699c3.842 3.8 7.4 6.7 10.7 9.1 l4.74-4.742c0.897-0.895 2.471-1.026 3.498-0.289l7.646 5.455c1.025 0.7 1.3 2.2 0.4 3.105l-6.504 6.5 c0 0-11.262 0.988-25.925-13.674C6.117 24.3 7.1 13 7.1 13" fill="#fff"/>';
500
$svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">' . $phone . '</svg>';
501
return base64_encode($svg);
502
}
@@ -549,4 +719,11 @@ function cnb_check_for_caching() {
549
}
550
return array($active,$name);
551
}
552
?>
1
<?php
2
/*
3
Plugin Name: Call Now Button
4
+ Plugin URI: https://callnowbutton.com
5
+ Description: Mobile visitors will see a <strong>Call Now Button</strong> on your website. 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. It's all optional but possible.
6
+ Version: 0.4.0
7
Author: Jerry Rietveld
8
Author URI: http://www.jgrietveld.com
9
License: GPL2
26
*/
27
?>
28
<?php
29
+ define('CNB_VERSION','0.4.0');
30
define('CNB_BASENAME', plugin_basename( __FILE__ ) );
31
define('CNB_BASEFOLDER', plugin_basename( dirname( __FILE__ ) ) );
32
define('CNB_FILENAME', str_replace( CNB_BASEFOLDER.'/', '', CNB_BASENAME ) );
33
+ define('CNB_WEBSITE','https://callnowbutton.com/');
34
+ define('CNB_SUPPORT', CNB_WEBSITE . 'support/');
35
+ add_action('admin_menu', 'cnb_register_admin_page');
36
add_action('admin_init', 'cnb_options_init');
37
38
$cnb_changelog =
39
array(
40
array(
41
+ '4.0' => 'Text bubbles for standard buttons, set the icon color, Google Ads conversion tracking, tabbed admin interface, 6 additional button locations, small button design changes, added support articles for (nearly) all settings, control visibility on front page, plus a bunch of smaller fixes. Enjoy!',
42
'3.6' => 'Small validation fixes and zoom now controls icon size in full width buttons.',
43
'3.5' => 'Small JS fix',
44
'3.4' => 'Option to resize your button and change where it sits in the stack order (z-index).',
47
'3.1' => 'You can now add text to your button and it\'s possible to switch between including and excluding specific pages.',
48
'3.0' => 'Option to add text to your button.',
49
'2.1' => 'Some small fixes',
50
+ '2.0' => 'The Call Now Button has a new look!'
51
)
52
);
53
59
$cnb_options['active'] = isset($cnb_options['active']) ? 1 : 0;
60
$cnb_options['classic'] = isset($cnb_options['classic']) ? 1 : 0;
61
$cnb_options['hideIcon'] = isset($cnb_options['hideIcon']) ? $cnb_options['hideIcon'] : 0;
62
+ $cnb_options['frontpage'] = isset($cnb_options['frontpage']) ? $cnb_options['frontpage'] : 0;
63
64
$plugin_title = apply_filters( 'cnb_plugin_title', 'Call Now Button');
65
67
add_action( 'admin_enqueue_scripts', 'cnb_enqueue_color_picker' ); // add the color picker
68
}
69
70
+ function cnb_register_admin_page() {
71
global $plugin_title;
72
+ $page = add_submenu_page('options-general.php', $plugin_title, $plugin_title, 'manage_options', 'call-now-button', 'cnb_admin_settings_page');
73
add_action( 'admin_print_styles-' . $page , 'cnb_admin_styling' );
74
}
75
function cnb_enqueue_color_picker( $hook_suffix ) {
83
function cnb_plugin_meta($links, $file) {
84
if ( $file == CNB_BASENAME ) {
85
$cnb_new_links = array(
86
+ sprintf( '<a href="options-general.php?page=%s">%s</a>', CNB_BASEFOLDER, __('Settings')),
87
+ '<a href="'.CNB_SUPPORT.'">Support</a>');
88
array_push(
89
$links,
90
$cnb_new_links[0],
96
add_filter( 'plugin_row_meta', 'cnb_plugin_meta', 10, 2 );
97
98
function cnb_plugin_add_settings_link( $links ) {
99
+ array_unshift( $links, sprintf( '<a href="options-general.php?page=%s">%s</a>', CNB_BASEFOLDER, __('Settings') ) );
100
return $links;
101
}
102
add_filter( 'plugin_action_links_'. CNB_BASENAME, 'cnb_plugin_add_settings_link' );
105
register_setting('cnb_options','cnb');
106
wp_register_style( 'cnb_styling', plugins_url('call-now-button.css', __FILE__), false, CNB_VERSION, 'all' );
107
}
108
+ function cnb_admin_settings_page() {
109
global $cnb_options;
110
global $plugin_title;
111
global $cnb_updated;
128
if($cnb_caching_check[0] == TRUE) {
129
echo '<div class="notice-error notice"><p><span class="dashicons dashicons-warning"></span> Your website is using a <strong><i>Caching Plugin</i></strong> ('.$cnb_caching_check[1].'). If you\'re not seeing your button or your changes, make sure you empty your cache first.</p></div>';
130
}
131
}
132
133
// inform exisiting users about update to the button design
135
<div class="notice-warning notice is-dismissible">
136
<?php
137
$cnb_old_version = substr($cnb_updated[1],2);
138
+ echo "<h3>The Call Now Button has been updated!</h3><h4>What's new?</h4>";
139
foreach ($cnb_changelog[0] as $key => $value) { // Only on first run after update show list of changes since last update
140
if($key > $cnb_old_version) {
141
echo '<p><span class="dashicons dashicons-yes"></span> ' . $value . '</p>';
143
}
144
?>
145
</div>
146
+ <?php }
147
+
148
+
149
+ if( isset( $_GET[ 'tab' ] ) ) {
150
+ $active_tab = $_GET[ 'tab' ];
151
+ } else {
152
+ $active_tab = "basic_options";
153
+ } // end if
154
+
155
156
+ ?>
157
+ <h2 class="nav-tab-wrapper">
158
+ <a href="?page=call-now-button&tab=basic_options" class="nav-tab <?php echo $active_tab == 'basic_options' ? 'nav-tab-active' : ''; ?>">Basics</a>
159
+ <a href="?page=call-now-button&tab=extra_options" class="nav-tab <?php echo $active_tab == 'extra_options' ? 'nav-tab-active' : ''; ?>">Presentation</a>
160
+ <a href="?page=call-now-button&tab=advanced_options" class="nav-tab <?php echo $active_tab == 'advanced_options' ? 'nav-tab-active' : ''; ?>">Advanced</a>
161
+ </h2>
162
<form method="post" action="options.php" class="cnb-container">
163
<?php settings_fields('cnb_options'); ?>
164
+ <table class="form-table <?php echo $active_tab == 'basic_options' ? 'nav-tab-active' : ''; ?>">
165
+ <tr>
166
+ <th colspan="2"><h2>Basic Settings</h2></th>
167
+ </tr>
168
<tr valign="top">
169
<th scope="row">Button status:</th>
170
<td class="activated">
172
</td>
173
</tr>
174
<tr valign="top">
175
+ <th scope="row">Phone number:<a href="<?php echo CNB_SUPPORT; ?>phone-number/<?php cnb_utm_params("question-mark", "phone-number"); ?>" target="_blank" class="nounderscore">
176
+ <span class="dashicons dashicons-editor-help"></span>
177
+ </a></th>
178
<td><input type="text" name="cnb[number]" value="<?php echo $cnb_options['number']; ?>" /></td>
179
</tr>
180
<tr valign="top" class="button-text">
181
+ <th scope="row">Button text <small style="font-weight: 400">(optional)</small>:<a href="<?php echo CNB_SUPPORT; ?>using-text-buttons/<?php cnb_utm_params("question-mark", "using-text-buttons"); ?>" target="_blank" class="nounderscore">
182
+ <span class="dashicons dashicons-editor-help"></span>
183
+ </a></th>
184
<td>
185
+ <input id="buttonTextField" type="text" name="cnb[text]" value="<?php echo $cnb_options['text']; ?>" maxlength="30" />
186
+ <p class="description">Leave this field empty to only show an icon.</p>
187
</td>
188
</tr>
189
</table>
190
+
191
+ <table class="form-table <?php echo $active_tab == 'extra_options' ? 'nav-tab-active' : ''; ?>">
192
+ <tr>
193
+ <th colspan="2"><h2>Presentation Settings</h2></th>
194
+ </tr>
195
+
196
+ <tr valign="top">
197
+ <th scope="row">Button color:</th>
198
+ <td><input name="cnb[color]" type="text" value="<?php echo $cnb_options['color']; ?>" class="cnb-color-field" data-default-color="#009900" /></td>
199
+ </tr>
200
+ <tr valign="top">
201
+ <th scope="row">Icon color:</th>
202
+ <td><input name="cnb[iconcolor]" type="text" value="<?php echo $cnb_options['iconcolor']; ?>" class="cnb-iconcolor-field" data-default-color="#ffffff" /></td>
203
+ </tr>
204
+ <tr valign="top">
205
+ <th scope="row">Position: <a href="<?php echo CNB_SUPPORT; ?>button-position/<?php cnb_utm_params("question-mark", "button-position"); ?>" target="_blank" class="nounderscore">
206
+ <span class="dashicons dashicons-editor-help"></span>
207
+ </a></th>
208
+ <td class="appearance">
209
+ <div class="appearance-options">
210
+ <div class="radio-item">
211
+ <input type="radio" id="appearance1" name="cnb[appearance]" value="right" <?php checked('right', $cnb_options['appearance']); ?>>
212
+ <label title="right" for="appearance1">Right corner</label>
213
</div>
214
+ <div class="radio-item">
215
+ <input type="radio" id="appearance2" name="cnb[appearance]" value="left" <?php checked('left', $cnb_options['appearance']); ?>>
216
+ <label title="left" for="appearance2">Left corner</label>
217
+ </div>
218
+ <div class="radio-item">
219
+ <input type="radio" id="appearance3" name="cnb[appearance]" value="middle" <?php checked('middle', $cnb_options['appearance']); ?>>
220
+ <label title="middle" for="appearance3">Center bottom</label>
221
+ </div>
222
+ <div class="radio-item">
223
+ <input type="radio" id="appearance4" name="cnb[appearance]" value="full" <?php checked('full', $cnb_options['appearance']); ?>>
224
+ <label title="full" for="appearance4">Full bottom</label>
225
+ </div>
226
+
227
+ <!-- Extra placement options -->
228
+ <br class="cnb-extra-placement">
229
+ <div class="radio-item cnb-extra-placement <?php echo $cnb_options['appearance'] == "mright" ? "cnb-extra-active" : ""; ?>">
230
+ <input type="radio" id="appearance5" name="cnb[appearance]" value="mright" <?php checked('mright', $cnb_options['appearance']); ?>>
231
+ <label title="mright" for="appearance5">Middle right</label>
232
+ </div>
233
+ <div class="radio-item cnb-extra-placement <?php echo $cnb_options['appearance'] == "mleft" ? "cnb-extra-active" : ""; ?>">
234
+ <input type="radio" id="appearance6" name="cnb[appearance]" value="mleft" <?php checked('mleft', $cnb_options['appearance']); ?>>
235
+ <label title="mleft" for="appearance6">Middle left </label>
236
+ </div>
237
+ <br class="cnb-extra-placement">
238
+ <div class="radio-item cnb-extra-placement <?php echo $cnb_options['appearance'] == "tright" ? "cnb-extra-active" : ""; ?>">
239
+ <input type="radio" id="appearance7" name="cnb[appearance]" value="tright" <?php checked('tright', $cnb_options['appearance']); ?>>
240
+ <label title="tright" for="appearance7">Top right corner</label>
241
+ </div>
242
+ <div class="radio-item cnb-extra-placement <?php echo $cnb_options['appearance'] == "tleft" ? "cnb-extra-active" : ""; ?>">
243
+ <input type="radio" id="appearance8" name="cnb[appearance]" value="tleft" <?php checked('tleft', $cnb_options['appearance']); ?>>
244
+ <label title="tleft" for="appearance8">Top left corner</label>
245
+ </div>
246
+ <div class="radio-item cnb-extra-placement <?php echo $cnb_options['appearance'] == "tmiddle" ? "cnb-extra-active" : ""; ?>">
247
+ <input type="radio" id="appearance9" name="cnb[appearance]" value="tmiddle" <?php checked('tmiddle', $cnb_options['appearance']); ?>>
248
+ <label title="tmiddle" for="appearance9">Center top</label>
249
+ </div>
250
+ <div class="radio-item cnb-extra-placement <?php echo $cnb_options['appearance'] == "tfull" ? "cnb-extra-active" : ""; ?>">
251
+ <input type="radio" id="appearance10" name="cnb[appearance]" value="tfull" <?php checked('tfull', $cnb_options['appearance']); ?>>
252
+ <label title="tfull" for="appearance10">Full top</label>
253
+ </div>
254
+ <a href="#" id="cnb-more-placements">More placement options...</a>
255
+ <!-- END extra placement options -->
256
+ </div>
257
+
258
+ <div id="hideIconTR">
259
+ <br>
260
+ <input id="hide_icon" type="checkbox" name="cnb[hideIcon]" value="1" <?php checked('1', $cnb_options['hideIcon']); ?>>
261
+ <label title="right" for="hide_icon">Remove icon</label>
262
+ </div>
263
+ </td>
264
+ </tr>
265
+ <tr valign="top" class="appearance">
266
+ <th scope="row">Limit appearance: <a href="<?php echo CNB_SUPPORT; ?>limit-appearance/<?php cnb_utm_params("question-mark", "limit-appearance"); ?>" target="_blank" class="nounderscore">
267
+ <span class="dashicons dashicons-editor-help"></span>
268
+ </a></th>
269
+ <td>
270
+ <input type="text" name="cnb[show]" value="<?php echo $cnb_options['show']; ?>" placeholder="E.g. 14, 345" />
271
+ <p class="description">Enter IDs of the posts &amp; pages, separated by commas (leave blank for all). <a href="<?php echo CNB_SUPPORT; ?>limit-appearance/<?php cnb_utm_params("question-mark", "limit-appearance"); ?>">Learn more...</a></p>
272
+ <div class="radio-item">
273
+ <input id="limit1" type="radio" name="cnb[limit]" value="include" <?php checked('include', $cnb_options['limit']);?> />
274
+ <label for="limit1">Limit to these posts and pages.</label>
275
+ </div>
276
+ <div class="radio-item">
277
+ <input id="limit2" type="radio" name="cnb[limit]" value="exclude" <?php checked('exclude', $cnb_options['limit']);?> />
278
+ <label for="limit2">Exclude these posts and pages.</label>
279
+ </div>
280
+ <br>
281
+ <div>
282
+ <input id="frontpage" type="checkbox" name="cnb[frontpage]" value="1" <?php checked('1', $cnb_options['frontpage']); ?>>
283
+ <label title="right" for="frontpage">Hide button on front page</label>
284
+ </div>
285
+ </td>
286
+ </tr>
287
+ </table>
288
+ <table class="form-table <?php echo $active_tab == 'advanced_options' ? 'nav-tab-active' : ''; ?>">
289
+ <tr>
290
+ <th colspan="2"><h2>Advanced Settings</h2></th>
291
+ </tr>
292
+ <tr valign="top">
293
+ <th scope="row">Click tracking: <a href="<?php echo CNB_SUPPORT; ?>click-tracking/<?php cnb_utm_params("question-mark", "click-tracking"); ?>" target="_blank" class="nounderscore">
294
+ <span class="dashicons dashicons-editor-help"></span>
295
+ </a></th>
296
+ <td>
297
+ <div class="radio-item">
298
+ <input id="tracking3" type="radio" name="cnb[tracking]" value="0" <?php checked('0', $cnb_options['tracking']); ?> />
299
+ <label for="tracking3">Disabled</label>
300
+ </div>
301
+ <div class="radio-item">
302
+ <input id="tracking4" type="radio" name="cnb[tracking]" value="3" <?php checked('3', $cnb_options['tracking']); ?> />
303
+ <label for="tracking4">Latest Google Analytics (gtag.js)</label>
304
+ </div>
305
+ <div class="radio-item">
306
+ <input id="tracking1" type="radio" name="cnb[tracking]" value="2" <?php checked('2', $cnb_options['tracking']); ?> />
307
+ <label for="tracking1">Google Universal Analytics (analytics.js)</label>
308
+ </div>
309
+ <div class="radio-item">
310
+ <input id="tracking2" type="radio" name="cnb[tracking]" value="1" <?php checked('1', $cnb_options['tracking']); ?> />
311
+ <label for="tracking2">Classic Google Analytics (ga.js)</label>
312
+ </div>
313
+ <p class="description">Using Google Tag Manager? Set up click tracking in GTM. <a href="<?php echo CNB_SUPPORT; ?>click-tracking/google-tag-manager-event-tracking/<?php cnb_utm_params("description_link", "google-tag-manager-event-tracking"); ?>" target="_blank">Learn how to do this...</a></p>
314
+ </td>
315
+ </tr>
316
+ <tr valign="top">
317
+ <th scope="row">Google Ads: <a href="<?php echo CNB_SUPPORT; ?>google-ads/<?php cnb_utm_params("question-mark", "google-ads"); ?>" target="_blank" class="nounderscore">
318
+ <span class="dashicons dashicons-editor-help"></span>
319
+ </a></th>
320
+ <td class="conversions">
321
+ <div class="radio-item">
322
+ <input name="cnb[conversions]" type="radio" value="0" <?php checked('0', $cnb_options['conversions']); ?> /> <label for="conversions">Off </label>
323
+ </div>
324
+ <div class="radio-item">
325
+ <input name="cnb[conversions]" type="radio" value="1" <?php checked('1', $cnb_options['conversions']); ?> /> <label for="conversions">Conversion Tracking using Google's global site tag </label>
326
+ </div>
327
+ <div class="radio-item">
328
+ <input name="cnb[conversions]" type="radio" value="2" <?php checked('2', $cnb_options['conversions']); ?> /> <label for="conversions">Conversion Tracking using JavaScript</label>
329
+ </div>
330
+ <p class="description">Select this option if you want to track clicks on the button as Google Ads conversions. This option requires the Event snippet to be present on the page. <a href="https">Learn more...</a></p>
331
+ </td>
332
+ </tr>
333
+ <tr valign="top" class="zoom">
334
+ <th scope="row">Button size (<span id="cnb_slider_value"></span>):</th>
335
+ <td>
336
+ <label class="cnb_slider_value">Smaller&nbsp;&laquo;&nbsp;</label>
337
+ <input type="range" min="0.7" max="1.3" name="cnb[zoom]" value="<?php echo $cnb_options['zoom']; ?>" class="slider" id="cnb_slider" step="0.1">
338
+ <label class="cnb_slider_value">&nbsp;&raquo;&nbsp;Bigger</label>
339
+ </td>
340
+ </tr>
341
+ <tr valign="top" class="z-index">
342
+ <th scope="row">Order (<span id="cnb_order_value"></span>): <a href="https://callnowbutton.com/set-order/" target="_blank" class="nounderscore">
343
+ <span class="dashicons dashicons-editor-help"></span>
344
+ </a></th>
345
+ <td>
346
+ <label class="cnb_slider_value">Backwards&nbsp;&laquo;&nbsp;</label>
347
+ <input type="range" min="1" max="10" name="cnb[z-index]" value="<?php echo $cnb_options['z-index']; ?>" class="slider2" id="cnb_order_slider" step="1">
348
+ <label class="cnb_slider_value">&nbsp;&raquo;&nbsp;Front</label>
349
+ <p class="description">The default (and recommended) value is all the way to the front so the button sits on top of everything else. In case you have a specific usecase where you want something else to sit in front of the Call Now Button (e.g. a chat window or a cookie notice) you can move this backwards one step at a time to adapt it to your situation.</p>
350
+ </td>
351
+ </tr>
352
+ <?php if($cnb_options['classic'] == 1) { ?>
353
+ <tr valign="top" class="classic">
354
+ <th scope="row">Classic button: <a href="https://callnowbutton.com/new-button-design/<?php cnb_utm_params("question-mark", "new-button-design"); ?>" target="_blank" class="nounderscore">
355
+ <span class="dashicons dashicons-editor-help"></span>
356
+ </a></th>
357
+ <td>
358
+ <input id="classic" name="cnb[classic]" type="checkbox" value="1" <?php checked('1', $cnb_options['classic']); ?> /> <label title="Enable" for="classic">Active</label>
359
+ </td>
360
+ </tr>
361
+ <?php } ?>
362
+ </table>
363
+
364
<input type="hidden" name="cnb[version]" value="<?php echo CNB_VERSION; ?>" />
365
<p class="submit"><input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" /></p>
366
</form>
367
368
<div class="feedback-collection">
369
<div class="cnb-clear"></div>
370
+ <p class="cnb-url cnb-center"><a href="https://callnowbutton.com" target="_blank">callnowbutton.com</a></p>
371
372
<p class="cnb-center cnb-spacing">
373
+ <a href="<?php echo CNB_SUPPORT; cnb_utm_params("footer-links", "support"); ?>" target="_blank" title="Support">Support</a> &middot;
374
+ <a href="<?php echo CNB_WEBSITE; ?>feature-request/<?php cnb_utm_params("footer-links", "suggestions"); ?>" target="_blank" title="Feature Requests">Suggestions</a> &middot;
375
<a href="#donate" id="paypalLink">Donate</a> &middot;
376
+ <a href="<?php echo CNB_WEBSITE; ?>praise/<?php cnb_utm_params("footer-links", "thanks"); ?>" target="_blank" title="Praise">Just say thanks :-)</a>
377
</p>
378
<!--// Display notification about the testing program -->
379
<div class="postbox cnb-alert-box cnb-center">
380
+ <p>The Call&nbsp;Now&nbsp;Button&nbsp;<b>Pro</b> is imminent.
381
+ <a class="cnb-external" href="https://callnowbutton.com/be-notified-call-now-button-pro/<?php cnb_utm_params("footer-links", "notify-of-pro"); ?>" rel="help" target="_blank">Be the first to know!</a>
382
</p>
383
</div>
384
385
<div class="donate cnb-center">
386
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
387
<input type="hidden" name="cmd" value="_s-xclick">
396
if(get_option('cnb') && !is_admin()) {
397
398
$cnb_options = get_option('cnb');
399
+ $cnb_enabled = (isset($cnb_options['active'])) ? true : false;
400
+
401
+ if($cnb_enabled) {
402
function cnb_head() {
403
+ global $cnb_options;
404
+ $cnb_has_text = ($cnb_options['text'] == '') ? false : true;
405
+ $cnb_is_full_width = $cnb_options['appearance'] == "full" || $cnb_options['appearance'] == "tfull" ? true : false;
406
+ $cnb_is_classic = isset($cnb_options['classic']) && $cnb_options['classic'] == 1 && !$cnb_has_text ? true : false;
407
+ $cnb_button_css = "\n<!-- Call Now Button ".CNB_VERSION." by Jerry Rietveld (callnowbutton.com) -->\n";
408
+
409
+
410
$ButtonExtra = "";
411
+ if($cnb_is_classic) {
412
413
// OLD BUTTON DESIGN
414
+ if($cnb_options['appearance'] == 'full' || $cnb_options['appearance'] == 'middle' || $cnb_has_text) {
415
+ $cnb_button_appearance = "width:100%;left:0;";
416
$ButtonExtra = "body {padding-bottom:60px;}";
417
}
418
elseif($cnb_options['appearance'] == 'left') {
419
+ $cnb_button_appearance = "width:100px;left:0;border-bottom-right-radius:40px; border-top-right-radius:40px;";
420
} else {
421
+ $cnb_button_appearance = "width:100px;right:0;border-bottom-left-radius:40px; border-top-left-radius:40px;";
422
}
423
424
+ $cnb_button_css .= "<style>#callnowbutton, #callnowbutton span {display:none;} @media screen and (max-width:650px){#callnowbutton .NoButtonText{display:none;}#callnowbutton {display:block; ".$cnb_button_appearance." height:80px; position:fixed; bottom:-20px; border-top:2px solid ".changeColor($cnb_options['color'],'lighter')."; background:url(data:image/svg+xml;base64,".svg(changeColor($cnb_options['color'], 'darker'),$cnb_options['iconcolor'] ).") center 2px no-repeat ".$cnb_options['color']."; text-decoration:none; box-shadow:0 0 5px #888; z-index:".zindex($cnb_options['z-index']).";background-size:58px 58px}".$ButtonExtra."}</style>\n";
425
426
} else {
427
+
428
+ // NEW BUTTON DESIGN
429
+ $cnb_button_shape = "width:65px; height:65px; border-radius:50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);transform: scale(" . $cnb_options['zoom'] . ");";
430
+ $cnb_button_positions = array(
431
+ 'middle' => 'bottom:15px; left:50%; margin-left:-33px;',
432
+ 'left' => 'bottom:15px; left:20px;',
433
+ 'right' => 'bottom:15px; right:20px;',
434
+ 'mleft' => 'top:50%; margin-top:-33px; left:20px;',
435
+ 'mright' => 'top:50%; margin-top:-33px; right:20px;',
436
+ 'tleft' => 'top:15px; left:20px;',
437
+ 'tmiddle' => 'top:15px; left:50%; margin-left:-33px;',
438
+ 'tright' => 'top:15px; right:20px;',
439
+ );
440
+
441
+ if($cnb_options['appearance'] == 'full' || $cnb_options['appearance'] == 'tfull') {
442
+ $cnb_top_or_bottom = ($cnb_options['appearance']) == 'full' ? "bottom" : "top";
443
+
444
+ $cnb_button_appearance = "width:100%;left:0;".$cnb_top_or_bottom.":0;height:60px;";
445
+
446
+ $ButtonExtra = "body {padding-".$cnb_top_or_bottom.":60px;}#callnowbutton img {transform: scale(" . $cnb_options['zoom'] . ");}";
447
+ if($cnb_has_text) {
448
+ $cnb_button_appearance .= "text-align:center;color:#fff; font-weight:600; font-size:120%; overflow: hidden;";
449
+ if(isset($cnb_options['hideIcon']) && $cnb_options['hideIcon'] == 1) {
450
+ $cnb_button_appearance .= 'padding-right:20px;';
451
}
452
}
453
+ } else {
454
+ $cnb_button_appearance = $cnb_button_shape . $cnb_button_positions[$cnb_options['appearance']];
455
}
456
+
457
+ $cnb_label_side = ltrim(ltrim($cnb_options['appearance'],"m"),"t");
458
+
459
+ if($cnb_has_text && ($cnb_options['appearance'] == 'middle' || $cnb_options['appearance'] == 'tmiddle')) { // don't show the label in this situation
460
+ $circularButtonTextCSS = "#callnowbutton span{display: none;";
461
+ } elseif($cnb_has_text && !$cnb_is_full_width){
462
+ $circularButtonTextCSS = "#callnowbutton span{
463
+ display: block;
464
+ width: auto;
465
+ background: rgba(243, 243, 243, 0.96);
466
+ border-top:1px solid rgba(243, 243, 243, 1);
467
+ position: absolute;"
468
+ .$cnb_label_side.": 74px;
469
+ border-radius: 5px;
470
+ padding: 2px 15px;
471
+ font-size: 15px;
472
+ color: #505050;
473
+ top: 20px;
474
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
475
+ word-break: keep-all;
476
+ line-height: 1;
477
+ }";
478
+ } elseif(!$cnb_is_full_width) {
479
+ $circularButtonTextCSS = "#callnowbutton span{display:none;}";
480
+ } else {
481
+ $circularButtonTextCSS = "";
482
}
483
484
+ $cnb_button_css = $cnb_button_css ."<style>";
485
+ $cnb_button_css .= "#callnowbutton {display:none;} @media screen and (max-width:650px){#callnowbutton {display:block; position:fixed; text-decoration:none; z-index:".zindex($cnb_options['z-index']).";";
486
+ $cnb_button_css .= $cnb_button_appearance;
487
+ if($cnb_is_full_width) {
488
+ $cnb_button_css .= "background:".$cnb_options['color'].";display: flex; justify-content: center; align-items: center;text-shadow: 0 1px 0px rgba(0, 0, 0, 0.18);";
489
} else {
490
+ $cnb_button_css .= "background:url(data:image/svg+xml;base64,".svg(changeColor($cnb_options['color'], 'darker'),$cnb_options['iconcolor'] ).") center/45px 45px no-repeat ".$cnb_options['color'].";";
491
}
492
+ $cnb_button_css .= "}" . $ButtonExtra . "}" . $circularButtonTextCSS;
493
+ $cnb_button_css .= "</style>\n";
494
+
495
}
496
+ echo $cnb_button_css;
497
}
498
add_action('wp_head', 'cnb_head');
499
500
function cnb_footer() {
501
+ global $cnb_options;
502
+
503
+ $cnb_hide_icon = isset($cnb_options['hideIcon']) && $cnb_options['hideIcon'] == 1 ? true : false;
504
+ $cnb_has_text = ($cnb_options['text'] == '') ? false : true;
505
+ $cnb_is_classic = isset($cnb_options['classic']) && $cnb_options['classic'] == 1 ? true : false;
506
+ $cnb_show_limited = isset($cnb_options['show']) && $cnb_options['show'] != '' ? true : false;
507
+ $cnb_show_included = $cnb_options['limit'] == 'include' ? true : false;
508
+ $cnb_click_tracking = $cnb_options['tracking'] > 0 ? true : false;
509
+ $cnb_is_full_width = $cnb_options['appearance'] == 'full' || $cnb_options['appearance'] == 'tfull' ? true : false;
510
+ $cnb_hide_frontpage = isset($cnb_options['frontpage']) && $cnb_options['frontpage'] == 1 ? true : false;
511
+ $cnb_conversion_tracking = $cnb_options['conversions'] > 0 ? true : false;
512
+
513
+ if($cnb_show_limited) {
514
+ $cnb_show_ids = explode(',', str_replace(' ', '' ,$cnb_options['show']));
515
}
516
517
+ if($cnb_click_tracking) {
518
+ $cnb_tracking_code[1] = "_gaq.push(['_trackEvent', 'Contact', 'Call Now Button', 'Phone']);";
519
+ $cnb_tracking_code[2] = "ga('send', 'event', 'Contact', 'Call Now Button', 'Phone');";
520
+ $cnb_tracking_code[3] = "gtag('event', 'Call Now Button', {event_category: 'contact', event_label: 'phone'});";
521
+ $cnb_tracking_code = $cnb_tracking_code[$cnb_options['tracking']];
522
} else {
523
+ $cnb_tracking_code = "";
524
}
525
526
+ if($cnb_conversion_tracking) {
527
+ $cnb_conversion_code[1] = "return gtag_report_conversion('tel:".$cnb_options['number']."');";
528
+ $cnb_conversion_code[2] = "goog_report_conversion('tel:".$cnb_options['number']."');";
529
+ $cnb_conversion_code = $cnb_conversion_code[$cnb_options['conversions']];
530
} else {
531
+ $cnb_conversion_code = "";
532
}
533
534
+ $cnb_onclick_events = $cnb_click_tracking || $cnb_conversion_tracking ? 'onclick="' . $cnb_tracking_code . $cnb_conversion_code . '"' : "";
535
+
536
+ if(!$cnb_has_text && !$cnb_is_full_width) {
537
+ $cnb_button_text = '<span>Call Now Button</span>';
538
+ } elseif(!$cnb_has_text && $cnb_is_full_width) {
539
+ $cnb_button_text = '<img alt="Call Now Button" src="data:image/svg+xml;base64,'.svg(changeColor($cnb_options['color'], 'darker'),$cnb_options['iconcolor']).'" width="40">';
540
+ } elseif($cnb_hide_icon && $cnb_is_full_width) {
541
+ $cnb_button_text = '<span style="color:'.$cnb_options['iconcolor'].'">'. $cnb_options['text'] . '</span>';
542
+ } elseif($cnb_is_full_width) {
543
+ $cnb_button_text = '<img alt="Call Now Button" src="data:image/svg+xml;base64,'.svg(changeColor($cnb_options['color'], 'darker'),$cnb_options['iconcolor']).'" width="40"><span style="color:'.$cnb_options['iconcolor'].'">'. $cnb_options['text'] . '</span>';
544
+ } else {
545
+ $cnb_button_text = '<span>'.str_replace(" ", "&nbsp;", $cnb_options['text']).'</span>';
546
+ }
547
+
548
+ $cnb_call_link = '<a href="tel:'.$cnb_options['number'].'" id="callnowbutton" '.$cnb_onclick_events.'>'.$cnb_button_text.'</a>';
549
550
+ if(is_front_page()) {
551
+ if(!$cnb_hide_frontpage) {
552
+ echo $cnb_call_link;
553
+ }
554
+ } elseif($cnb_show_limited) {
555
+ if($cnb_show_included) {
556
+ if(is_single($cnb_show_ids) || is_page($cnb_show_ids)) {
557
+ echo $cnb_call_link;
558
}
559
} else {
560
+ if(!is_single($cnb_show_ids) && !is_page($cnb_show_ids)) {
561
+ echo $cnb_call_link;
562
}
563
}
564
} else {
565
+ echo $cnb_call_link;
566
}
567
}
568
add_action('wp_footer', 'cnb_footer');
576
'number' => '',
577
'text' => '',
578
'hideIcon' => 0,
579
+ 'color' => '#00bb00',
580
+ 'iconcolor' => '#ffffff',
581
'appearance' => 'right',
582
'tracking' => 0,
583
+ 'conversions' => 0,
584
'show' => '',
585
'limit' => 'include',
586
+ 'frontpage' => 0,
587
'zoom' => '1',
588
'z-index' => '10',
589
'version' => CNB_VERSION
613
}
614
function cnb_update_options() {
615
$cnb_options = get_option('cnb');
616
if(cnb_update_needed()) { // Check current version and if it needs an update
617
$cnb_options['active'] = isset($cnb_options['active']) ? 1 : 0;
618
$cnb_options['text'] = isset($cnb_options['text']) ? $cnb_options['text'] : "";
619
+ $cnb_options['iconcolor'] = isset($cnb_options['iconcolor']) ? $cnb_options['iconcolor'] : '#ffffff';
620
+ $cnb_options['appearance'] = $cnb_options['text'] != "" ? "full" : $cnb_options['appearance'];
621
$cnb_options['hideIcon'] = isset($cnb_options['hideIcon']) ? $cnb_options['hideIcon'] : 0;
622
$cnb_options['limit'] = isset($cnb_options['limit']) ? $cnb_options['limit'] : 'include';
623
+ $cnb_options['frontpage'] = isset($cnb_options['frontpage']) ? $cnb_options['frontpage'] : 0;
624
+ $cnb_options['conversions'] = isset($cnb_options['conversions']) ? 1 : 0;
625
+ $cnb_options['zoom'] = isset($cnb_options['zoom']) ? $cnb_options['zoom'] : 1;
626
+ $cnb_options['z-index'] = isset($cnb_options['z-index']) ? $cnb_options['z-index'] : 10;
627
$default_options = array(
628
'active' => $cnb_options['active'],
629
'number' => $cnb_options['number'],
630
'text' => $cnb_options['text'],
631
'hideIcon' => $cnb_options['hideIcon'],
632
'color' => $cnb_options['color'],
633
+ 'iconcolor' => $cnb_options['iconcolor'],
634
'appearance' => $cnb_options['appearance'],
635
'tracking' => $cnb_options['tracking'],
636
+ 'conversions' => $cnb_options['conversions'],
637
'show' => $cnb_options['show'],
638
'limit' => $cnb_options['limit'],
639
+ 'frontpage' => $cnb_options['frontpage'],
640
+ 'zoom' => $cnb_options['zoom'],
641
+ 'z-index' => $cnb_options['z-index'],
642
'version' => CNB_VERSION
643
);
644
if(array_key_exists('classic', $cnb_options) && $cnb_options['classic'] == 1 ) {
654
// Color functions to calculate borders
655
function changeColor($color, $direction) {
656
if(!preg_match('/^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})#x2F;i', $color, $parts));
657
+ if(!isset($direction) || $direction == "lighter") { $change = 45; } else { $change = -30; }
658
for($i = 1; $i <= 3; $i++) {
659
$parts[$i] = hexdec($parts[$i]);
660
$parts[$i] = round($parts[$i] + $change);
665
return $output;
666
}
667
668
+ function svg($color, $icon) {
669
+ $phone = '<path d="M7.104 14.032l15.586 1.984c0 0-0.019 0.5 0 0.953c0.029 0.756-0.26 1.534-0.809 2.1 l-4.74 4.742c2.361 3.3 16.5 17.4 19.8 19.8l16.813 1.141c0 0 0 0.4 0 1.1 c-0.002 0.479-0.176 0.953-0.549 1.327l-6.504 6.505c0 0-11.261 0.988-25.925-13.674C6.117 25.3 7.1 14 7.1 14" fill="'.$color.'"/><path d="M7.104 13.032l6.504-6.505c0.896-0.895 2.334-0.678 3.1 0.35l5.563 7.8 c0.738 1 0.5 2.531-0.36 3.426l-4.74 4.742c2.361 3.3 5.3 6.9 9.1 10.699c3.842 3.8 7.4 6.7 10.7 9.1 l4.74-4.742c0.897-0.895 2.471-1.026 3.498-0.289l7.646 5.455c1.025 0.7 1.3 2.2 0.4 3.105l-6.504 6.5 c0 0-11.262 0.988-25.925-13.674C6.117 24.3 7.1 13 7.1 13" fill="'.$icon.'"/>';
670
$svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">' . $phone . '</svg>';
671
return base64_encode($svg);
672
}
719
}
720
return array($active,$name);
721
}
722
+ function cnb_utm_params($element, $page) {
723
+ $output = "?utm_source=wp-plugin";
724
+ $output .= "&utm_medium=referral";
725
+ $output .= "&utm_campaign=" . $element;
726
+ $output .= "&utm_term=" . $page;
727
+ echo $output;
728
+ }
729
?>
readme.txt CHANGED
@@ -1,31 +1,35 @@
1
=== Plugin Name ===
2
Contributors: jgrietveld
3
Donate link: http://callnowbutton.com/donate/
4
- Tags: call, contact, customers, sell, sales, leads, convert, conversions, call now button
5
Requires at least: 2.7
6
- Tested up to: 5.2
7
- Stable tag: 0.3.6
8
License: GPLv2 or later
9
License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
11
- A very simple yet very effective plugin that adds a Call Now button to your website for mobile visitors (only for responsive websites).
12
13
== Description ==
14
15
###What does the plugin do?
16
17
- This plugin places a Call Now button (click-to-call) to the bottom of the screen which is only visible for your mobile visitors. Because your mobile visitors are already holding their phone it will allow them to call you with one simple touch of the button.
18
- No more complicated copy-and-pasting or memorizing the phone number!
19
20
###Could not be easier!
21
The settings are very easy: enable and enter your phone number. That's it!
22
23
- If you want to add some text to your button, that's possible. Entering text is fully optional - leaving it empty will show a nice phone icon to your visitors.
24
25
- You want even more control? Open up the Advanced Settings and change the default behavior.
26
27
- ###Only for mobile optimized themes
28
- Usage at this point is only for responsive websites (websites optimized for display on mobile devices).
29
30
31
== Installation ==
@@ -38,10 +42,10 @@ Usage at this point is only for responsive websites (websites optimized for disp
38
39
Or:
40
41
- 1. Upload `call-now-button`-folder to the `/wp-content/plugins/` directory
42
2. Activate the plugin through the 'Plugins' menu in WordPress
43
3. Go to 'Settings' > 'Call Now Button' and check the box to activate the button and enter your phone number.
44
- 4. Click 'Save' and you're done!
45
46
47
== Frequently Asked Questions ==
@@ -50,9 +54,17 @@ Or:
50
51
In the Settings section on your WordPress Dashboard you'll find a new addition: Call Now Button. Click on it to go to the plugin settings.
52
53
= I don't see the button on my website but I'm looking at it with my mobile phone. Why? =
54
55
- The button will only work on websites that use a responsive theme. Responsive means that the website adapts to the size of the screen it's being viewed on. Simply put, if you need to zoom in to be able to read the text of your website on your mobile phone, the plugin will not work.
56
57
= My website is responsive but I don't see the button
58
@@ -66,38 +78,49 @@ You have a caching plugin active on your website and you are looking at a cached
66
67
You have a caching plugin active on your website and the cached pages are showing an older version of your website. Delete/empty the cache and reload the pages.
68
69
= Do I have to add a country code to my phone number? =
70
71
You don't have to but I recommend that you do to increase your options internationally.
72
73
= Do I start the number with + or 00? =
74
75
- Up to you. Your phone will understand both!
76
77
= Can I change the appearance of the Call Now Button? =
78
79
- Yes! You can easily change the color of the button and make it sit in the left or right corner. Or spread it out over the full bottom of the phone screen.
80
81
= I only want to show the button on a few pages. Is that possible?
82
83
- Yes, you can now enter the IDs of posts and pages you wish to include or exclude.
84
85
= I need way more flexibility! Isn't there a PRO version that I can use? =
86
87
- Yes, this is coming soon. We're currently looking for testers so if you want to give it a try already, please sign up at callnowbutton.com
88
89
90
== Screenshots ==
91
92
- 1. The default look of the Call Now Button
93
- 2. The Call Now Button with Text
94
- 3. All the required settings
95
- 4. Advanced Settings: Set your button's color
96
- 5. Advanced Settings: More options
97
98
99
== Changelog ==
100
101
= 0.3.6 =
102
* Validation fixes
103
* Zoom controls icon size in Full Width buttons
1
=== Plugin Name ===
2
Contributors: jgrietveld
3
Donate link: http://callnowbutton.com/donate/
4
+ Tags: call button, click to call, convert, call now button, contact button
5
Requires at least: 2.7
6
+ Tested up to: 5.4
7
+ Stable tag: 0.4.0
8
License: GPLv2 or later
9
License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
11
+ A very simple yet very effective and flexible plugin that adds a Call Now Button to your website for mobile visitors (only for responsive websites).
12
13
== Description ==
14
15
###What does the plugin do?
16
17
+ This plugin places a Call Now Button (click-to-call button) to the bottom of the screen which is only visible for your mobile visitors. Because your mobile visitors already have a phone in their hands this plugin will allow them to call you with one simple touch of the button.
18
+ No more navigating to the contact page and no more complicated copy/pasting or memorizing the phone number!
19
20
###Could not be easier!
21
The settings are very easy: enable and enter your phone number. That's it!
22
23
+ If you want to add some text to your button, that's possible. Entering text is fully optional - leaving it empty will show a nice circular phone button to your visitors (have a look at the screenshots).
24
25
+ ####Need more control?
26
+ Under the **Presentation tab** you can change the color of the button, move it to a differet location on the screen and limit the pages on which the button should be visible.
27
28
+ Under the **Advanced tab** you'll find a bunch of settings that allow you to enable 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).
29
+
30
+
31
+ ### For mobile optimized (responsive) themes
32
+ The button is super light and fully build in CSS. The only requirement is that your website's theme is responsive, meaning it adapts to the size of the screen.
33
34
35
== Installation ==
42
43
Or:
44
45
+ 1. Upload the `call-now-button`-folder to the `/wp-content/plugins/` directory
46
2. Activate the plugin through the 'Plugins' menu in WordPress
47
3. Go to 'Settings' > 'Call Now Button' and check the box to activate the button and enter your phone number.
48
+ 4. Click 'Save' and your Call Now Button is live!
49
50
51
== Frequently Asked Questions ==
54
55
In the Settings section on your WordPress Dashboard you'll find a new addition: Call Now Button. Click on it to go to the plugin settings.
56
57
+ = Can I add text to the button? =
58
+
59
+ Yes, it is possible to add text to your button. You can chose to show the text inside the full width button across the bottom or top of the screen. It's also possible to add a text bubble next to the circular button. This works for all placements with the exception of the center button positions at the top an bottom of the screen.
60
+
61
= I don't see the button on my website but I'm looking at it with my mobile phone. Why? =
62
63
+ First step is to check if the button is enabled - this is the first checkbox on the settings page.
64
+
65
+ Next thing is to make sure that your theme is responsive. Responsive means that the website adapts to the size of the screen it's being viewed on. Simply put, if you need to zoom in to be able to read the text of your website on your mobile phone, the plugin will not work.
66
+
67
+ Last thing to check is if you have a caching plugin installed. Caching plugins make your website faster by showing a copy of your website instead of the actual website. As a consequence you will not see the Call Now Button because the copy was made before the button was installed. To fix this, go to your cache plugin settings page and empty the cache (sometimes called flush the cache). After doing this you should see the button. Do the same thing each time you make changes to the button.
68
69
= My website is responsive but I don't see the button
70
78
79
You have a caching plugin active on your website and the cached pages are showing an older version of your website. Delete/empty the cache and reload the pages.
80
81
+ Another option could be that you have set the Call Now Button to only appear on specific pages. Go into the Call Now Button settings, open the Presentation tab and check that the field next to Limit appearance is empty.
82
+
83
= Do I have to add a country code to my phone number? =
84
85
You don't have to but I recommend that you do to increase your options internationally.
86
87
= Do I start the number with + or 00? =
88
89
+ In most countries you'll be fine using either but there are some exceptions. To be on the safe side I would recommend using the plus sign.
90
91
= Can I change the appearance of the Call Now Button? =
92
93
+ Yes! You can easily change the color of the button and make it sit in any of the 8 preset locations across the screen of a phone. You also have the option to spread it out over the full bottom or top of the phone screen.
94
95
= I only want to show the button on a few pages. Is that possible?
96
97
+ Yes, you can enter the IDs of posts and pages you wish to include or exclude.
98
99
= I need way more flexibility! Isn't there a PRO version that I can use? =
100
101
+ This is coming very soon. We're currently looking for testers so if you want to give it a try already, please sign up at [callnowbutton.com](https://callnowbutton.com/).
102
103
104
== Screenshots ==
105
106
+ 1. 3 variations of the Call Now Button
107
+ 2. The basic settings
108
+ 3. The presentation settings
109
+ 4. The advanced settings
110
111
112
== Changelog ==
113
114
+ = 0.4.0 =
115
+ * Tabbed admin interface
116
+ * Google Ads conversion tracking
117
+ * Text bubbles for standard circular buttons
118
+ * 6 additional button placements
119
+ * Hide button on the front page
120
+ * Change the color of the icon
121
+ * Small design changes
122
+ * Other small plugin improvements
123
+
124
= 0.3.6 =
125
* Validation fixes
126
* Zoom controls icon size in Full Width buttons