taboola / settings.php

settings.php in Taboola 2.2.2, at settings.php

586 lines 36.7 KB

Raw Download Zip

1	<!-- Latest font-awesome include-->
2	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
3
4	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
5	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
6	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
7
8	<style>
9	<?php include 'css/main.css'; ?>
10	</style>
11
12	<div class="taboola-container">
13	<div class="theme_image">
14	<img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/>
15	</div>
16
17	<h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2>
18
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	<!-- errors/success message -->
25
26	<?php
27	if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
28	echo "<div class='label-success'>";
29	echo "<h3 style='color:green;'>Changes applied!</h3>";
30	echo "<span>Verify the new changes by browsing to your site.</span>";
31	echo "</div>";
32	}
33
34	if(count($taboola_errors) > 0){
35	echo "<div class='label-error'>";
36	echo "<h3 style='color:red;'>Missing or incorrect values</h3>";
37	echo "<p>The following fields contained missing or incorrect values:</p>";
38	echo "<ul>";
39	for($i = 0; $i < count($taboola_errors); $i++){
40	echo "<li>".$taboola_errors[$i]."</li>";
41	}
42	echo "</ul>";
43	echo "<p><b>All values</b> have been reverted to the last successful save.</p>";
44	echo "</div>";
45	}
46
47	?>
48
49	<script>
50	function setEnabledDisabled(divID, chkToggle) {
51	/*
52	JS function for form.
53	Enables/disables fields for the given section ('divID'), depending on whether 'chkToggle' is checked.
54	*/
55
56	var applyColor = (chkToggle.checked ? "#000" : "#666");
57
58	// Set all labels in that section ('divID') to the relevant color.
59	$(divID).find("label").css("color", applyColor);
60
61	// Disable (/enable) all input fields in that section ('divID'), except for 'chkToggle'.
62	// Once done, apply a gray border color.
63	$(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
64	$(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
65
66	}
67	</script>
68
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	<script>
107	$(document).ready(function(){
108	// On page load:
109	if ($('#mid_paragraph_ui_mode').val() == 'Other') {
110	$("#mid_css_selector_div").show();
111	}
112
113	if ($('#home_enabled').prop("checked") === true) {
114	$("#homepage").show();
115	var ad = $('#show-advanced-settings');
116	ad.text("<< Hide advanced settings");
117	}
118	});
119	</script>
120
121	<script>
122	$(document).ready(function(){
123	// On clicking 'Advanced settings'
124	$("#show-advanced-settings").click(function() {
125	$("#homepage").slideToggle("fast");
126	var ad = $('#show-advanced-settings');
127	ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
128	});
129	});
130	</script>
131
132
133	<script>
134	$(document).ready(function(){
135
136	// On selecting an item in the dropdown:
137	$('#mid_paragraph_ui_mode').on('change', function(e){
138	e.preventDefault();
139	if ( this.value == 'Other')
140	{
141	$("#mid_css_selector_div").show();
142
143	// Highlight relevant fields:
144	$("#mid_location_string, #mid_occurrence").addClass('highlight');
145	setTimeout(() => $("#mid_occurrence, #mid_location_string").removeClass('highlight'), 1500);
146
147	}
148	else
149	{
150	$("#mid_location_string").val("p"); // Set it back to the default value of 'p'
151	$("#mid_css_selector_div").hide();
152
153	// Highlight the 'occurrence' field:
154	$("#mid_occurrence").addClass('highlight');
155	setTimeout(() => $("#mid_occurrence").removeClass('highlight'), 1000);
156	}
157	});
158	});
159	</script>
160
161
162	<!-- Welcome Massage -->
163
164	<div class="publisher_welcome_massage">
165	<h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
166	<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	<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	<div class="list_l1">
169	<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>
170	</div>
171	</div>
172
173	<!-- Welcome Massage-->
174
175	<form method="POST">
176	<?php
177	// Generate a nonce and pass it via a hidden field
178	$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 ); ?>"/>
181
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>
207
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">
222	<!-- <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>
227	</svg>
228	<div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
229	</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	</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>
254	</div>
255
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">
267	<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>
269	</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>
274	</div>
275	</div>
276	</div>
277	<!-- Advanced Settings -->
278
279	<!-- Mid Article Widget -->
280
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>
289
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>
300	</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>
310	</div>
311	</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>
319	</div>
320
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>
337	</div>
338	</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>
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>
346
347	</div>
348	<div id="mid_css_selector_div">
349
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>
361	</div>
362	</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	</div>
367	</div>
368	<!-- Mid Article Widget -->
369
370	<!-- Right Rail Article Widget -->
371
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>
375
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>
386	</div>
387
388	<!-- Right Rail Article Widget -->
389
390	<!-- Homepage mid widget -->
391
392	<div id="homepage" class="settings_block widget_settings_block">
393	<div class="switch_style">
394	<label class="switch">
395	<input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
396	<span class="slider round"></span>
397	</label>
398	<div>
399	<b style="font-size:15px;float: left;">Homepage (front page)</b>
400	<div class='tooltip'>
401	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
402	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
403	<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>
404	</g>
405	</svg>
406	<div>Settings will be applied to the page that you marked as your 'front page'.</div>
407	</div>
408	</div>
409	</div>
410
411	<div>
412	<div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
413	<div class='tooltip'>
414	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
415	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
416	<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>
417	</g>
418	</svg>
419	<div>Your <i>homepage</i> Mode (Widget ID), as provided by Taboola.</div>
420	</div>
421	</div>
422	<div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
423	<div class='tooltip'>
424	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
425	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
426	<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>
427	</g>
428	</svg>
429	<div>Your <i>homepage</i> Placement Name, as provided by Taboola.</div>
430	</div>
431	</div>
432	</div>
433	<div>
434	<div class="widget_below_home">
435	<input id="home_widget_id" type="text" value="<?php echo !empty($settings->home_widget_id) ? strip_tags($settings->home_widget_id) : "" ?>" name="home_widget_id" placeholder="Widget ID" />
436	</div>
437	<div class="placement_below_home">
438	<input id = "home_placement" type="text" value="<?php echo !empty($settings->home_placement) ? strip_tags($settings->home_placement) : "" ?>" name="home_placement" placeholder="Placement Name" />
439	</div>
440	</div>
441
442	<div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
443	<div class='tooltip'>
444	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
445	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
446	<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>
447	</g>
448	</svg>
449	<div>The widget will be placed <i>just beneath</i> this element.<br><br>
450	To target an element, 2 pieces of information are needed:<br><br>
451	i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
452	ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
453	For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
454	</div>
455	</div>
456	</div>
457
458
459	<div class="home_occurrence">
460	<div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
461	<div class='tooltip'>
462	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
463	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
464	<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>
465	</g>
466	</svg>
467	<div>
468	The element to target - e.g.:<br><br>
469	<i>section</i> - to target a <i>section</i>.<br>
470	<i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
471	<i>.my-class</i> - to target a <i>class</i> of "my-class".
472	</div>
473	</div>
474	</div>
475	<div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
476	<div class='tooltip'>
477	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
478	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
479	<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>
480	</g>
481	</svg>
482	<div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br>
483	E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br>
484	For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div>
485	</div>
486	</div>
487	</div>
488	<div class="home_placement">
489	<div class="widget_below_home_selector">
490	<input id = "home_location_string" type="text" value="<?php echo !empty($settings->home_location_string) ? strip_tags($settings->home_location_string) : "" ?>" name="home_location_string" placeholder="E.g. p for paragraph" /></td>
491	</div>
492	<div class="placement_below_home_Occurrence">
493	<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	</div>
495	</div>
496	</div>
497
498	<!-- Homepage mid widget -->
499
500	<div id="advanced-settings-main">
501	<a id="show-advanced-settings">Show advanced settings >></a>
502	<div class="change_button">
503	<input class='apply_button' type="submit" value="Apply Changes"/>
504	</div>
505	</div>
506
507	</div>
508
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	</form>
549	<div style='clear:both'></div>
550
551	<?php
552	$logPublisher = empty($settings->publisher_id) ? "wordpressplugin" : $settings->publisher_id;
553	$userDetails = wp_get_current_user();
554	$detailsString = $userDetails->first_name." ".$userDetails->last_name;
555	?>
556	<img src="https://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec.gif?source=wp&type=settings&pub=<?=$logPublisher?>&user=<?=urlencode($detailsString)?>&email=<?=urlencode($userDetails->user_email)?>&url=<?=urlencode("//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}")?>"/>
557	<!-- <form name="install_log" style="display:none;" method="post" action="http://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec/tag/http/">
558	<input name="tim" type="hidden" value="<?=date("H:i:s.000")?>">
559	<input name="pub" type="hidden" value="<?=$logPublisher?>">
560	<input name="data" type="hideen" value="WORDPRESS_PLUGIN_INSTALL\|<?="//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}\|{$detailsString}"?>">
561	</form> -->
562	</div>
563
564	<script>
565
566	// Set enabled/disabled appearance upon page load
567	// (Function is defined earlier on the page.)
568	setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
569	setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
570	setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
571	setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
572
573	</script>
574
575	<script>
576
577	// Fadeouts for error/success messages
578	setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
579	setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
580
581	// PC
582	// window.onload = function(){
583	// document.forms['install_log'].submit()
584	// }
585
586	</script>