PluginProbe
Taboola / 2.1.1
Taboola v2.1.1
1.0.4 1.0.5 1.0.6 1.0.8 2.0.1 2.0.2 2.1.0 2.1.1 2.2.2 2.2.3 3.0.0 3.0.1 3.0.2 3.1.0 trunk 1.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.2 1.0.3
← All changes | settings.php +602 -267 2.2.3 → 2.1.1 View file →
@@ -5,23 +5,433 @@
5 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
6 6 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
7 7
8 8 <style>
9 - <?php include 'css/main.css'; ?>
9 +
10 + a {
11 + color: rgb(68,114,196);
12 + text-decoration: none;
13 + font-weight: bold;
14 + }
15 +
16 + .taboola-container {
17 + padding: 20px;
18 + padding-left: 0;
19 + font-size: 14px;
20 + background-color: #FAF9F6;
21 + font-family: Roboto,Lato,Hind -apple-system,Helvetica Neue,sans-serif;
22 + }
23 +
24 + .settings_block {
25 + background-color: #fff;
26 + border: 1px solid #d4d9df;
27 + border-radius: 8px;
28 + margin-top: 10px;
29 + width: 50%;
30 + }
31 +
32 + .settings_block.widget_settings_block { /* Give the widget settings block some extra space at the end */
33 + padding-bottom: 15px;
34 + }
35 +
36 + .settings_block input {
37 + border-color: #ccc; /* Most of the inputs are styled via jQuery. This is for any others - e.g. #publisher-id */
38 + }
39 +
40 + .publisher_welcome_massage{
41 + float: right;
42 + width: 36%;
43 + padding: 20px 10px 10px 0px;
44 + margin: 40px 6% 0 0;
45 + background: #FFFACD;
46 + border: 1px solid #d4d9df;
47 + border-radius: 20px;
48 + }
49 +
50 + .switch_style{
51 + margin : 10px 10px 20px 10px;
52 + }
53 +
54 + .style_box1, .pub_id{
55 + padding: 10px 10px 0px 20px;
56 + }
57 +
58 + .statement{
59 + padding: 10px 10px 10px 20px;
60 + }
61 +
62 + .widget_below, .widget_below_mid, .widget_below_mid_selector, .widget_below_home, .widget_below_home_selector{
63 + width: 50%;
64 + float: left;
65 + padding: 5px 0px 0px 20px;
66 + }
67 +
68 + .mode_style, .mode_style_mid, .mode_style_home, .mode_style_home_selector{
69 + width: 50%;
70 + padding: 0px 0px 3px 20px;
71 + float:left;
72 + }
73 +
74 + .placement_style, .placement_style_mid, .placement_style_home_occurrence,.placement_style_home {
75 + padding: 0px 0px 8px 0px;
76 + width: 50%;
77 + float: right;
78 + }
79 +
80 + .widget_below_mid_selector{
81 + padding: 8px 0px 0px 0px;
82 + }
83 +
84 + .placement_below_mid_occurrence,.mode_style_mid_selector {
85 + padding: 0px 0px 8px 20px;
86 + }
87 +
88 + .heading_mid_home{
89 + padding: 20px 0px 8px 20px;
90 + }
91 +
92 + #mid_occurrence_div, #mid_css_selector_div {
93 + width: 50%;
94 + float: left;
95 + margin: 19px 0px 0px 0px;
96 + }
97 +
98 + /* slider button CSS */
99 +
100 + .switch {
101 + position: relative;
102 + display: inline-block;
103 + width: 45px;
104 + height: 20px;
105 + float: right;
106 + }
107 +
108 + .switch input {
109 + opacity: 0;
110 + width: 0;
111 + height: 0;
112 + }
113 +
114 + .slider {
115 + position: absolute;
116 + cursor: pointer;
117 + top: 0;
118 + left: 0;
119 + right: -1px;
120 + bottom: 0;
121 + background-color: #ccc;
122 + -webkit-transition: .4s;
123 + transition: .4s;
124 + }
125 +
126 + .slider:before {
127 + position: absolute;
128 + content: "";
129 + height: 18px;
130 + width: 18px;
131 + left: 1px;
132 + bottom: 1px;
133 + background-color: white;
134 + -webkit-transition: .4s;
135 + transition: .4s;
136 + }
137 +
138 + input:checked + .slider {
139 + background-color: #0f4c81;
140 + }
141 +
142 + input:focus + .slider {
143 + box-shadow: 0 0 1px #0f4c81;
144 + }
145 +
146 + input:checked + .slider:before {
147 + -webkit-transform: translateX(26px);
148 + -ms-transform: translateX(26px);
149 + transform: translateX(26px);
150 + }
151 +
152 + /* Rounded sliders */
153 +
154 + .slider.round {
155 + border-radius: 34px;
156 + }
157 +
158 + .slider.round:before {
159 + border-radius: 50%;
160 + }
161 +
162 + /* slider button CSS */
163 +
164 + .request_link {
165 + float: right;
166 + margin-right: 10px;
167 + line-height: 26px;
168 + }
169 +
170 +/* hide and position tooltip */
171 +
172 + .tooltip div{
173 + visibility: hidden;
174 + width: auto;
175 + display: inline-block;
176 + background: #0f4c81;
177 + color: #ffffff;
178 + font-weight: normal;
179 + font-size: 12px;
180 + border-radius: 6px;
181 + padding: 5px;
182 + margin-left: 5px;
183 + max-width: 350px;
184 + position: absolute;
185 + z-index: 999;
186 + transition-delay: 0.25s;
187 + }
188 +
189 + .tooltip div a:hover{
190 + text-decoration: underline;
191 + }
192 +
193 + .tooltip{
194 + opacity: 1 !important;
195 + font-size: 13px !important;
196 + display: contents !important;
197 + }
198 +
199 + .tooltip:hover div{
200 + visibility: visible;
201 + transition-delay: 0.5s;
202 + }
203 +
204 + .tooltip div a{
205 + text-decoration: none;
206 + font-weight: bold;
207 + color: #fff;
208 + }
209 +
210 + .label-success {
211 + background: #a4fba6 !important;
212 + border: 1px solid #d2f2d4;
213 + border-radius: 10px;
214 + padding: 10px 30px 20px 10px;
215 + font-size: 14px;
216 + display: block;
217 + margin-top: 10px;
218 + color: green;
219 + width: 50%;
220 + }
221 + .label-error {
222 + background: #ffbaba;
223 + border: 1px solid #ffbaba;
224 + border-radius: 10px;
225 + padding: 10px 30px 20px 10px;
226 + font-size: 14px;
227 + display: block;
228 + margin-top: 10px;
229 + color: red;
230 + width: 50%;
231 + }
232 +
233 + .label-error ul {
234 + list-style-position: inside;
235 + list-style-type: disc;
236 + text-indent: 2em;
237 + }
238 +
239 + .label-error p {
240 + font-size: 14px;
241 + }
242 +
243 + .change_button{
244 + float: right;
245 + }
246 +
247 + .apply_button{
248 + /* margin-top: 20px; */
249 + background-color: #0f4c81;
250 + color: #fff;
251 + padding: 0.8rem 1rem;
252 + border-radius: 7px;
253 + border: transparent;
254 + float: right;
255 + }
256 +
257 + .apply_button:hover {
258 + background-color: #1261A0;
259 + cursor: pointer;
260 + }
261 +
262 + .helpTooltip__icon___1XWGN,
263 + .helpTooltip__icon___1XWGN_read{
264 + color: #b8c1ca;
265 + width: 1em;
266 + height: 1em;
267 + margin: 4px;
268 + }
269 +
270 + .helpTooltip__icon___1XWGN_read{
271 + margin-top: 4px;
272 + }
273 +
274 + .helpTooltip__icon___1XWGN_first{
275 + color: #b8c1ca;
276 + width: 1em;
277 + height: 1em;
278 + }
279 +
280 + .checkbox_read{
281 + padding: 0px 0px 5px 20px;
282 + float: left;
283 + }
284 +
285 + label:hover{
286 + cursor: default;
287 + }
288 +
289 + ::placeholder{
290 + color: #DEDEDE;
291 + }
292 +
293 + .widget_h2,.general_h2{
294 + font-size: 18px;
295 + font-weight: 500;
296 + }
297 +
298 + .list_l1{
299 + border-top: 1px solid #DEDEDE;
300 + margin: 30px 20px 0px 0px;
301 + margin-left: 14%;
302 + }
303 +
304 + .theme_image{
305 + width: 50%;
306 + }
307 +
308 + .welcome_heading{
309 + margin-left: 8%;
310 + font-size: 1.5em;
311 + }
312 +
313 + .first_p,
314 + .second_p{
315 + margin-left: 14%;
316 + font-size: 14px;
317 + }
318 +
319 + .list_l1 p{
320 + font-size: 13px;
321 + }
322 +
323 + input#publisher-id,
324 + input#first_bc_placement,
325 + input#mid_placement,
326 + input#home_placement{
327 + width: 36%;
328 + }
329 +
330 + input#first_bc_widget_id,
331 + input#mid_widget_id,
332 + input#mid_location_string,
333 + input#home_widget_id,
334 + input#home_location_string{
335 + width: 77%;
336 + }
337 +
338 + label{
339 + font-weight: normal !important;
340 + }
341 +
342 + label#pub_id{
343 + color: #000000;
344 + }
345 +
346 + input#out_of_content_enabled {
347 + height: 16px;
348 + width: 16px;
349 + }
350 +
351 + input[type=checkbox]:checked::before {
352 + width: 1.8rem !important;
353 + }
354 +
355 + input[type=checkbox]:focus {
356 + outline: none !important;
357 + outline-offset: 0px !important;
358 + }
359 +
360 + input[type=checkbox]{
361 + margin: -5px 0 0;
362 + }
363 +
364 + #homepage{
365 + display: none;
366 + }
367 +
368 + #show-advanced-settings{
369 + text-decoration: none;
370 + color: #666666;
371 + margin-top: 5px;
372 + cursor: pointer;
373 + float: left;
374 + width: 50%;
375 + font-family: Roboto, Lato, "Hind -apple-system", "Helvetica Neue", sans-serif;
376 + font-style: italic;
377 + }
378 +
379 + #advanced-settings-main{
380 + margin: 10px 0px 0px 10px;
381 + width: 49%;
382 + }
383 +
384 + div#mid_article {
385 + padding-bottom: 100px;
386 + }
387 +
388 + #mid_css_selector_div{
389 + display: none;
390 + }
391 +
392 + input.highlight {
393 + border: 1px solid orange !important;
394 + }
395 +
396 + #rightrail-banner{
397 + border: 1px solid #d4d9df;
398 + border-radius: 10px;
399 + background: rgba(51, 125, 247, 0.1);
400 + padding: 10px;
401 +
402 + width: 95%;
403 + margin: auto;
404 + /* color: #0f4c81; */
405 + }
406 +
407 + #right-rail{
408 + padding-top: 10px;
409 + }
410 +
411 + hr {
412 + border-top: 1px solid lightgray;
413 + }
414 +
10 415 </style>
11 416
417 +<?php
418 +
419 +// $short_version =strlen(TABOOLA_PLUGIN_VERSION) == 5 ? substr(TABOOLA_PLUGIN_VERSION,0,3) : ""; // E.g. '2.1.0' => '2.1' (else '')
420 +
421 +?>
422 +
423 + <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
424 + <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> -->
425 +
426 +
12 427 <div class="taboola-container">
13 428 <div class="theme_image">
14 429 <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/>
15 430 </div>
16 431
17 - <h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2>
432 + <h2 style="font-size:1.7em;">Taboola WordPress Plugin 2</h2>
18 433
19 - <h2 class="nav-tab-wrapper">
20 - <a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
21 - <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
22 - </h2>
23 -
24 434 <!-- errors/success message -->
25 435
26 436 <?php
27 437 if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
@@ -65,45 +475,8 @@
65 475
66 476 }
67 477 </script>
68 478
69 -<!-- tab-switching JQuery -->
70 -<script>
71 -jQuery(document).ready(function($) {
72 - function showTab(tabId) {
73 - $('.nav-tab').removeClass('nav-tab-active');
74 - $('.tab-content').removeClass('active').hide();
75 -
76 - $('a[href="' + tabId + '"]').addClass('nav-tab-active');
77 - $(tabId).addClass('active').show();
78 - }
79 -
80 - // On tab click, update the URL hash and hidden input value
81 - $('.nav-tab').click(function(e) {
82 - e.preventDefault();
83 - var tabId = $(this).attr('href');
84 - window.location.hash = tabId;
85 - $('#active_tab').val(tabId);
86 - showTab(tabId);
87 - });
88 -
89 - // On page load, show the tab from the URL hash or default to the first tab
90 - var hash = window.location.hash;
91 - if (hash) {
92 - showTab(hash);
93 - $('#active_tab').val(hash);
94 - } else {
95 - showTab('#tab1');
96 - }
97 -
98 - // Set the active tab before form submission
99 - $('form').submit(function() {
100 - var activeTab = $('.nav-tab.nav-tab-active').attr('href');
101 - $('#active_tab').val(activeTab);
102 - });
103 -});
104 -</script>
105 -
106 479 <script>
107 480 $(document).ready(function(){
108 481 // On page load:
109 482 if ($('#mid_paragraph_ui_mode').val() == 'Other') {
@@ -154,16 +527,18 @@
154 527 $("#mid_occurrence").addClass('highlight');
155 528 setTimeout(() => $("#mid_occurrence").removeClass('highlight'), 1000);
156 529 }
157 530 });
531 +
158 532 });
159 533 </script>
160 534
161 535
536 +
162 537 <!-- Welcome Massage -->
163 538
164 539 <div class="publisher_welcome_massage">
165 - <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
540 + <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin 2!</h2>
166 541 <p class="first_p">For detailed instructions, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center.</a></p>
167 542 <p class="second_p"><b>Stuck? Need a hand?</b> Feel free to reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>.</p>
168 543 <div class="list_l1">
169 544 <p>Usage of this plugin is subject to <b>Taboola's</b> <a href="https://www.taboola.com/policies/platform-terms-of-service" target='_blank'>terms of service.</a></p>
@@ -171,225 +546,228 @@
171 546 </div>
172 547
173 548 <!-- Welcome Massage-->
174 549
175 -<form method="POST">
176 -<?php
550 + <form method="POST">
551 +
552 + <?php
177 553 // Generate a nonce and pass it via a hidden field
178 554 $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
179 -?>
180 -<input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
555 + ?>
181 556
182 -<div id="tab1" class="tab-content">
183 - <h2 class="general_h2">General Settings</h2>
184 -
185 - <div class="settings_block">
186 - <div class="style_box1"><label id="pub_id">Publisher ID :</label>
187 - <div class="tooltip">
188 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
189 - <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> -->
190 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
191 - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
192 - </g>
193 - </svg>
194 - <!-- <div id="arrow" ></div> -->
195 - <div>Your Publisher ID, as provided by Taboola.</div>
196 - </div>
197 - </div>
198 - <div class="pub_id">
199 - <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/>
200 - </div>
201 - <div class="statement">
202 - <label style="color: #000000; padding-">
203 - Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
204 - </label>
205 - </div>
206 - </div>
557 + <input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
207 558
208 - <!-- Below Article Widget -->
209 - <h2 class="widget_h2">Taboola Units</h2>
210 - <div id="below_article" class="settings_block widget_settings_block">
211 - <div class="switch_style">
212 - <label class="switch">
213 - <input id="first_bc_enabled" type="checkbox" <?php echo !empty($settings->first_bc_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#below_article', this)" name="first_bc_enabled" />
214 - <span class="slider round"></span>
215 - </label>
216 - <b style="font-size:15px;">Below-article</b>
217 - </div>
218 - <div class="label_below">
219 - <div class="mode_style">
220 - <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
221 - <div class="tooltip">
559 + <h2 class="general_h2">General Settings</h2>
560 +
561 + <div class="settings_block">
562 + <div class="style_box1"><label id="pub_id">Publisher ID :</label>
563 + <div class="tooltip">
222 564 <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
223 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
224 - <g fill="none" fill-rule="evenodd">
225 - <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
226 - </g>
565 + <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> -->
566 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
567 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
568 + </g>
227 569 </svg>
228 - <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
570 + <!-- <div id="arrow" ></div> -->
571 + <div>Your Publisher ID, as provided by Taboola.</div>
229 572 </div>
230 - </div>
231 - <div class="placement_style">
232 - <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
233 - <div class='tooltip'>
234 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
235 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
236 - <g fill="none" fill-rule="evenodd">
237 - <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
238 - </g>
239 - </svg>
240 - <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
241 - <br> When upgrading from v1, fill in 'below-article'. <br>
242 - <br> For more information, reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>, or contact Taboola Support.
243 - </div>
244 - </div>
245 - </div>
246 573 </div>
247 - <div class="input_below">
248 - <div class="widget_below">
249 - <input id="first_bc_widget_id" type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? strip_tags($settings->first_bc_widget_id) : "" ?>" name="first_bc_widget_id" placeholder="Widget ID" />
250 - </div>
251 - <div class="placement_below">
252 - <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? strip_tags($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" />
253 - </div>
574 + <div class="pub_id">
575 + <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/>
254 576 </div>
577 + <div class="statement">
578 + <label style="color: #000000; padding-">
579 + Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
580 + </label>
581 + </div>
582 + </div>
255 583
256 - <!-- Below Article Widget -->
257 - <!-- Advanced Settings -->
258 - <br />
259 - <div class='location_section'>
260 - <div class='checkbox_read'>
261 - <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
262 - <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
263 - </div>
264 - <div class='tooltip'>
265 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
266 - <g fill="none" fill-rule="evenodd">
584 +
585 +<!-- Below Article Widget -->
586 + <h2 class="widget_h2">Taboola Units</h2>
587 + <div id="below_article" class="settings_block widget_settings_block">
588 + <div class="switch_style">
589 + <label class="switch">
590 + <input id="first_bc_enabled" type="checkbox" <?php echo !empty($settings->first_bc_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#below_article', this)" name="first_bc_enabled" />
591 + <span class="slider round"></span>
592 + </label>
593 + <b style="font-size:15px;">Below-article</b>
594 + </div>
595 + <div class="label_below">
596 + <div class="mode_style">
597 + <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
598 + <div class="tooltip">
599 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
600 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
601 + <g fill="none" fill-rule="evenodd">
267 602 <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
268 - </g>
603 + </g>
269 604 </svg>
270 - <div>
271 - Required in order for Taboola to activate <i>Read More</i>.<br><br>
272 - Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
273 - For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements#below-article-widget" target='_blank'>Taboola Dev Center</a>.</div>
605 + <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
606 + </div>
607 + </div>
608 + <div class="placement_style">
609 + <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
610 + <div class='tooltip'>
611 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
612 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
613 + <g fill="none" fill-rule="evenodd">
614 + <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
615 + </g>
616 + </svg>
617 + <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
618 + <br> When upgrading from v1, fill in 'below-article'. <br>
619 + <br> For more information, reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>, or contact Taboola Support.
274 620 </div>
621 + </div>
275 622 </div>
623 + </div>
624 + <div class="input_below">
625 + <div class="widget_below">
626 + <input id="first_bc_widget_id" type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? strip_tags($settings->first_bc_widget_id) : "" ?>" name="first_bc_widget_id" placeholder="Widget ID" />
276 627 </div>
277 - <!-- Advanced Settings -->
628 + <div class="placement_below">
629 + <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? strip_tags($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" />
630 + </div>
631 + </div>
278 632
279 - <!-- Mid Article Widget -->
633 + <!-- Below Article Widget -->
634 + <!-- Advanced Settings -->
635 + <br />
636 + <div class='location_section'>
637 + <div class='checkbox_read'>
638 + <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
639 + <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
640 + </div>
641 + <div class='tooltip'>
642 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
643 + <g fill="none" fill-rule="evenodd">
644 + <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
645 + </g>
646 + </svg>
647 + <div>
648 + Required in order for Taboola to activate <i>Read More</i>.<br><br>
649 + Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
650 + For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements#below-article-widget" target='_blank'>Taboola Dev Center</a>.</div>
651 + </div>
652 + </div>
653 + </div>
654 +<!-- Advanced Settings -->
280 655
281 - <div id="mid_article" class="settings_block widget_settings_block">
282 - <div class="switch_style">
283 - <label class="switch">
284 - <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
285 - <span class="slider round"></span>
286 - </label>
287 - <b style="font-size:15px;">Mid-article</b>
288 - </div>
656 +<!-- Mid Article Widget -->
289 657
290 - <div>
291 - <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label>
292 - <div class='tooltip'>
293 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
294 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
295 - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
296 - </g>
297 - </svg>
298 - <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
299 - </div>
658 +<div id="mid_article" class="settings_block widget_settings_block">
659 + <div class="switch_style">
660 + <label class="switch">
661 + <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
662 + <span class="slider round"></span>
663 + </label>
664 + <b style="font-size:15px;">Mid-article</b>
665 + </div>
666 +
667 + <div>
668 + <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label>
669 + <div class='tooltip'>
670 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
671 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
672 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
673 + </g>
674 + </svg>
675 + <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
300 676 </div>
301 - <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label>
302 - <div class='tooltip'>
303 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
304 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
305 - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
306 - </g>
307 - </svg>
308 - <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>
309 - </div>
677 + </div>
678 + <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label>
679 + <div class='tooltip'>
680 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
681 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
682 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
683 + </g>
684 + </svg>
685 + <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>
310 686 </div>
311 687 </div>
312 - <div>
313 - <div class="widget_below_mid">
314 - <input id="mid_widget_id" type="text" value="<?php echo !empty($settings->mid_widget_id) ? strip_tags($settings->mid_widget_id) : "" ?>" name="mid_widget_id" placeholder="Widget ID" />
315 - </div>
316 - <div class="placement_below_mid">
317 - <input id = "mid_placement" type="text" value="<?php echo !empty($settings->mid_placement) ? strip_tags($settings->mid_placement) : "" ?>" name="mid_placement" placeholder="Placement Name" />
318 - </div>
688 + </div>
689 + <div>
690 + <div class="widget_below_mid">
691 + <input id="mid_widget_id" type="text" value="<?php echo !empty($settings->mid_widget_id) ? strip_tags($settings->mid_widget_id) : "" ?>" name="mid_widget_id" placeholder="Widget ID" />
319 692 </div>
693 + <div class="placement_below_mid">
694 + <input id = "mid_placement" type="text" value="<?php echo !empty($settings->mid_placement) ? strip_tags($settings->mid_placement) : "" ?>" name="mid_placement" placeholder="Placement Name" />
695 + </div>
696 + </div>
320 697
321 - <div id="mid_occurrence_div">
322 - <div class="mode_style_mid_selector"><label id="mid_location_string_label" style="float:left;">Position the widget below:</label>
323 - <div class='tooltip'>
324 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
325 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
326 - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
327 - </g>
328 - </svg>
329 - <div>
330 - Enter the paragraph number to target. <br>
331 - E.g. To target the <b>5th</b> paragraph, fill in <i>5</i>.<br><br>
332 - ----<br>
333 - <i>Advanced</i> - to use a <b>custom</b> selector:<br><br>
334 - 1) Choose 'Other'. <br>
335 - 2) Fill in a selector (<i>right</i>), and an occurrence (<i>left</i>).
336 - </div>
698 + <div id="mid_occurrence_div">
699 + <div class="mode_style_mid_selector"><label id="mid_location_string_label" style="float:left;">Position the widget below:</label>
700 + <div class='tooltip'>
701 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
702 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
703 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
704 + </g>
705 + </svg>
706 + <div>
707 + Enter the paragraph number to target. <br>
708 + E.g. To target the <b>5th</b> paragraph, fill in <i>5</i>.<br><br>
709 + ----<br>
710 + <i>Advanced</i> - to use a <b>custom</b> selector:<br><br>
711 + 1) Choose 'Other'. <br>
712 + 2) Fill in a selector (<i>right</i>), and an occurrence (<i>left</i>).
337 713 </div>
338 714 </div>
339 - <div class="placement_below_mid_occurrence">
340 - <select name="mid_paragraph_ui_mode" id="mid_paragraph_ui_mode">
341 - <option value="Paragraph" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Paragraph") ? "selected" : ""?> >Paragraph</option>
342 - <option value="Other" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Other") ? "selected" : ""?>>Other</option>
343 - </select>&nbsp;
344 - <input type="number" id="mid_occurrence" value="<?php echo !empty($settings->mid_location_string_occurrence) ? $settings->mid_location_string_occurrence : "1" ?>" name="mid_location_string_occurrence" placeholder="" style="width:65px;">
345 - </div>
715 + </div>
716 + <div class="placement_below_mid_occurrence">
717 + <select name="mid_paragraph_ui_mode" id="mid_paragraph_ui_mode">
718 + <option value="Paragraph" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Paragraph") ? "selected" : ""?> >Paragraph</option>
719 + <option value="Other" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Other") ? "selected" : ""?>>Other</option>
720 + </select>&nbsp;
721 + <input type="number" id="mid_occurrence" value="<?php echo !empty($settings->mid_location_string_occurrence) ? $settings->mid_location_string_occurrence : "1" ?>" name="mid_location_string_occurrence" placeholder="" style="width:65px;">
722 + </div>
346 723
347 - </div>
348 - <div id="mid_css_selector_div">
724 + </div>
725 + <div id="mid_css_selector_div">
349 726
350 - <div class="placement_style_mid_occurrence"><label id="mid_occurrence_label" style="float:left;">CSS selector :</label>
351 - <div class='tooltip'>
352 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
353 - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
354 - </g>
355 - </svg>
356 - <div>
357 - <i>Advanced</i> - fill in a selector to target - e.g.:<br><br>
358 - <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
359 - <i>.my-class</i> - to target a <i>class</i> of "my-class".
360 - </div>
727 + <div class="placement_style_mid_occurrence"><label id="mid_occurrence_label" style="float:left;">CSS selector :</label>
728 + <div class='tooltip'>
729 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
730 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
731 + </g>
732 + </svg>
733 + <div>
734 + <i>Advanced</i> - fill in a selector to target - e.g.:<br><br>
735 + <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
736 + <i>.my-class</i> - to target a <i>class</i> of "my-class".
361 737 </div>
362 738 </div>
363 - <div class="widget_below_mid_selector">
364 - <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? strip_tags($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" />
365 - </div>
366 739 </div>
367 - </div>
368 - <!-- Mid Article Widget -->
740 + <div class="widget_below_mid_selector">
741 + <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? strip_tags($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" />
742 + </div>
743 + </div>
744 + </div>
745 +<!-- Mid Article Widget -->
369 746
370 - <!-- Right Rail Article Widget -->
747 +<!-- Right Rail Article Widget -->
371 748
372 - <div id="right-rail" class="settings_block widget_settings_block">
373 - <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
374 - <div style="font-size:14px;margin: 5px 10px 10px 10px;">You can insert a <b>Taboola</b> unit in your website <b>sidebar</b> (if your <b>WordPress</b> theme provides one):</div>
749 +<div id="right-rail" class="settings_block widget_settings_block">
750 + <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
751 + <div style="font-size:14px;margin: 5px 10px 10px 10px;">You can insert a <b>Taboola</b> unit in your website <b>sidebar</b> (if your <b>WordPress</b> theme provides one):</div>
375 752
376 - <div id="rightrail-banner">
377 - 1. In the <b>sidebar menu</b> (<i>left</i>) select <b>Appearance</b> > <b>Widgets</b>, or click <a href="widgets.php" target="_blank">here</a> to open the <b>Widgets</b> panel. </br>
378 - 2. Click on the <span style="font-size: 18px; font-weight:bold">+</span> icon (<i>top, left</i>) and type in <b>"Taboola".</b></br>
379 - 3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br>
380 - 4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br>
381 - 5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br>
382 - 6. Browse to your website and verify that the newly added unit displays correctly.</br>
383 - <hr>
384 - To <b>watch a demo</b> of the above steps, see our <a href="https://developers.taboola.com/web-integrations/docs/sidebar-widget" target="_blank">online docs</a>.
385 - </div>
753 + <div id="rightrail-banner">
754 + 1. In the <b>sidebar menu</b> (<i>left</i>) select <b>Appearance</b> > <b>Widgets</b>, or click <a href="widgets.php" target="_blank">here</a> to open the <b>Widgets</b> panel. </br>
755 + 2. Click on the <span style="font-size: 18px; font-weight:bold">+</span> icon (<i>top, left</i>) and type in <b>"Taboola".</b></br>
756 + 3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br>
757 + 4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br>
758 + 5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br>
759 + 6. Browse to your website and verify that the newly added unit displays correctly.</br>
760 + <hr>
761 + To <b>watch a demo</b> of the above steps, see our <a href="https://developers.taboola.com/web-integrations/docs/sidebar-widget" target="_blank">online docs</a>.
386 762 </div>
763 +</div>
387 764
388 765 <!-- Right Rail Article Widget -->
389 766
390 767 <!-- Homepage mid widget -->
391 768
769 +
392 770 <div id="homepage" class="settings_block widget_settings_block">
393 771 <div class="switch_style">
394 772 <label class="switch">
395 773 <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
@@ -493,11 +871,8 @@
493 871 <input type="number" id="home_occurrence" value="<?php echo !empty($settings->home_location_string_occurrence) ? $settings->home_location_string_occurrence : "1" ?>" name="home_location_string_occurrence" placeholder="" style="width:65px;">
494 872 </div>
495 873 </div>
496 874 </div>
497 -
498 -<!-- Homepage mid widget -->
499 -
500 875 <div id="advanced-settings-main">
501 876 <a id="show-advanced-settings">Show advanced settings >></a>
502 877 <div class="change_button">
503 878 <input class='apply_button' type="submit" value="Apply Changes"/>
@@ -503,49 +878,10 @@
503 878 <input class='apply_button' type="submit" value="Apply Changes"/>
504 879 </div>
505 880 </div>
506 881
507 -</div>
882 +<!-- Homepage mid widget -->
508 883
509 -<div id="tab2" class="tab-content" style="display: none;">
510 -<h2 class="general_h2">General Setting</h2>
511 -<div id="web_push" class="settings_block widget_settings_block">
512 - <div class="style_box1"><label id="pub_id">Web Push Account ID:</label>
513 - <div class="tooltip">
514 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
515 - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
516 - </g>
517 - </svg>
518 - <!-- <div id="arrow" ></div> -->
519 - <div>Your SC web-push numeric account ID, as provided by Taboola.<br>
520 - This integration is only for sponsored web-push <br> <br>
521 - The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
522 - </div>
523 - </div>
524 - <div class="switch_style_push">
525 - <label class="switch">
526 - <input id="web_push_enabled" type="checkbox" <?php echo !empty($settings->web_push_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#web_push', this)" name="web_push_enabled" />
527 - <span class="slider round"></span>
528 - </label>
529 - </div>
530 - </div>
531 - <div class="web_push_id">
532 - <input type="number" id="publisher_id_push" value="<?php echo !empty($settings->publisher_id_push) ? strip_tags($settings->publisher_id_push) : "" ?>" name="publisher_id_push" placeholder="Publisher ID Web Push" />
533 - </div>
534 - <div class="statement">
535 - <label style="color: #000000; padding-">
536 - Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
537 - </label>
538 - </div>
539 -</div>
540 -
541 - <div id="advanced-settings-main">
542 - <div class="change_button">
543 - <input class='apply_button' type="submit" value="Apply Changes"/>
544 - </div>
545 - </div>
546 -</div>
547 -
548 884 </form>
549 885 <div style='clear:both'></div>
550 886
551 887 <?php
@@ -567,9 +903,8 @@
567 903 // (Function is defined earlier on the page.)
568 904 setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
569 905 setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
570 906 setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
571 - setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
572 907
573 908 </script>
574 909
575 910 <script>