taboola / settings.php

settings.php in Taboola trunk, at settings.php

680 lines 44.2 KB

Raw Download Zip

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2
3	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
4	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
5	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
6
7	<style>
8	<?php include 'css/main.css'; ?>
9	</style>
10
11	<div class="taboola-container">
12	<div class="theme_image">
13	<img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/>
14	</div>
15
16	<h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2>
17
18	<h2 class="nav-tab-wrapper">
19	<a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
20	<a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
21	</h2>
22
23	<?php
24	if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0 && $taboola_save_error == ''){
25	echo "<div class='label-success'>";
26	echo "<h3 style='color:green;'>Changes applied!</h3>";
27	echo "<span>Verify the new changes by browsing to your site.</span>";
28	echo "</div>";
29	}
30
31	if($taboola_save_error != ''){
32	echo "<div class='label-error'>";
33	echo "<h3 style='color:red;'>Settings were not saved</h3>";
34	echo "<p>".esc_html($taboola_save_error)."</p>";
35	echo "<p><b>All values</b> have been reverted to the last successful save.</p>";
36	echo "</div>";
37	}
38
39	if(count($taboola_errors) > 0){
40	echo "<div class='label-error'>";
41	echo "<h3 style='color:red;'>Missing or incorrect values</h3>";
42	echo "<p>The following fields contained missing or incorrect values:</p>";
43	echo "<ul>";
44	for($i = 0; $i < count($taboola_errors); $i++){
45	echo "<li>".$taboola_errors[$i]."</li>";
46	}
47	echo "</ul>";
48	echo "<p><b>All values</b> have been reverted to the last successful save.</p>";
49	echo "</div>";
50	}
51
52	?>
53
54	<script>
55	function setEnabledDisabled(divID, chkToggle) {
56	var applyColor = (chkToggle.checked ? "#000" : "#666");
57	$(divID).find("label").css("color", applyColor);
58	$(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
59	$(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
60	}
61	</script>
62
63	<script>
64	jQuery(document).ready(function($) {
65	function showTab(tabId) {
66	$('.nav-tab').removeClass('nav-tab-active');
67	$('.tab-content').removeClass('active').hide();
68
69	$('a[href="' + tabId + '"]').addClass('nav-tab-active');
70	$(tabId).addClass('active').show();
71	}
72
73	$('.nav-tab').click(function(e) {
74	e.preventDefault();
75	var tabId = $(this).attr('href');
76	window.location.hash = tabId;
77	$('#active_tab').val(tabId);
78	showTab(tabId);
79	});
80
81	var hash = window.location.hash;
82	if (hash) {
83	showTab(hash);
84	$('#active_tab').val(hash);
85	} else {
86	showTab('#tab1');
87	}
88
89	$('form').submit(function() {
90	var activeTab = $('.nav-tab.nav-tab-active').attr('href');
91	$('#active_tab').val(activeTab);
92	});
93	});
94	</script>
95
96	<script>
97	$(document).ready(function(){
98	if ($('#home_enabled').prop("checked") === true) {
99	$("#homepage").show();
100	var ad = $('#show-advanced-settings');
101	ad.text("<< Hide advanced settings");
102	}
103	});
104	</script>
105
106	<script>
107	$(document).ready(function(){
108	$("#show-advanced-settings").click(function() {
109	$("#homepage").slideToggle("fast");
110	var ad = $('#show-advanced-settings');
111	ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
112	});
113	});
114	</script>
115
116	<div class="publisher_welcome_massage">
117	<h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
118	<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>
119	<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>
120	<div class="list_l1">
121	<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>
122	</div>
123	</div>
124
125	<form method="POST">
126	<?php
127	$my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
128	?>
129	<input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
130	<input type="hidden" id="active_tab" name="active_tab" value="#tab1"/>
131
132
133	<div id="tab1" class="tab-content">
134	<h2 class="general_h2">General Settings</h2>
135
136	<div class="settings_block">
137	<div class="style_box1"><label id="pub_id">Publisher ID :</label>
138	<div class="tooltip">
139	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
140	<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>
141	</g>
142	</svg>
143	<div>Your Publisher ID, as provided by Taboola.</div>
144	</div>
145	</div>
146	<div class="pub_id">
147	<input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/>
148	</div>
149	<div class="statement">
150	<label style="color: #000000; padding-">
151	Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
152	</label>
153	</div>
154	</div>
155
156	<h2 class="widget_h2">Taboola Units</h2>
157	<div id="below_article" class="settings_block widget_settings_block">
158	<div class="switch_style">
159	<label class="switch">
160	<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" />
161	<span class="slider round"></span>
162	</label>
163	<b style="font-size:15px;">Below-article</b>
164	</div>
165	<div class="label_below">
166	<div class="mode_style">
167	<label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
168	<div class="tooltip">
169	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
170	<g fill="none" fill-rule="evenodd">
171	<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>
172	</g>
173	</svg>
174	<div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
175	</div>
176	</div>
177	<div class="placement_style">
178	<label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
179	<div class='tooltip'>
180	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
181	<g fill="none" fill-rule="evenodd">
182	<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>
183	</g>
184	</svg>
185	<div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
186	<br> When upgrading from v1, fill in 'below-article'. <br>
187	<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.
188	</div>
189	</div>
190	</div>
191	</div>
192	<div class="input_below">
193	<div class="widget_below">
194	<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" />
195	</div>
196	<div class="placement_below">
197	<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" />
198	</div>
199	</div>
200	<br />
201	<div class='location_section'>
202	<div class='checkbox_read'>
203	<input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
204	<label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
205	</div>
206	<div class='tooltip'>
207	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
208	<g fill="none" fill-rule="evenodd">
209	<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>
210	</g>
211	</svg>
212	<div>
213	Required in order for Taboola to activate <i>Read More</i>.<br><br>
214	Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
215	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>
216	</div>
217	</div>
218	</div>
219
220	<div id="mid_article" class="settings_block widget_settings_block">
221	<div class="switch_style">
222	<label class="switch">
223	<input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
224	<span class="slider round"></span>
225	</label>
226	<b style="font-size:15px;">Mid-article</b>
227	</div>
228
229	<div id="mid-article-widgets-container">
230	<?php
231	$mid_widgets = !empty($settings->mid_widgets) ? json_decode($settings->mid_widgets) : array();
232	if (empty($mid_widgets)) {
233	$mid_widgets = array(new stdClass());
234	}
235	foreach ($mid_widgets as $index => $widget) {
236	?>
237	<div class="mid-article-widget" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px;">
238	<h4 style="font-size: 14px; font-weight: bold;">Mid-Article Widget #<?php echo $index + 1; ?></h4>
239	<div style="display: flex; flex-wrap: wrap;">
240	<div style="flex: 1; min-width: 250px; padding-right: 10px;">
241	<label>Mode (Widget ID):</label>
242	<input class="widefat" type="text" name="mid_widget_id[]" value="<?php echo esc_attr($widget->widget_id ?? ''); ?>" placeholder="thumbnails-mid1" />
243	</div>
244	<div style="flex: 1; min-width: 250px;">
245	<label>Placement Name:</label>
246	<input class="widefat" type="text" name="mid_placement[]" value="<?php echo esc_attr($widget->placement ?? ''); ?>" placeholder="Mid Article Thumbnails" />
247	</div>
248	</div>
249	<div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
250	<div class='tooltip'>
251	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
252	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
253	<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>
254	</g>
255	</svg>
256	<div>The widget will be placed <i>just beneath</i> this element.<br><br>
257	To target an element, 2 pieces of information are needed:<br><br>
258	i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
259	ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
260	For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
261	</div>
262	</div>
263	</div>
264
265	<div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
266	<div style="flex: 1; min-width: 200px; padding-right: 10px;">
267	<label>Position:</label>
268	<select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]">
269	<option value="Paragraph" <?php echo !isset($widget->location_string) \|\| $widget->location_string === 'p' ? 'selected' : ''; ?>>Paragraph</option>
270	<option value="Other" <?php echo isset($widget->location_string) && $widget->location_string !== 'p' ? 'selected' : ''; ?>>Other (Custom)</option>
271	</select>
272	</div>
273	<div style="flex: 1; min-width: 150px; padding-right: 10px;" class="mid-css-selector-container">
274	<label>CSS selector:</label>
275	<input class="widefat" type="text" name="mid_location_string[]" value="<?php echo esc_attr($widget->location_string ?? 'p'); ?>" />
276	</div>
277	<div style="flex: 1; min-width: 150px;">
278	<label>Paragraph/Element Number:</label>
279	<input class="widefat" type="number" name="mid_location_string_occurrence[]" value="<?php echo esc_attr($widget->occurrence ?? '1'); ?>" min="1" style="width:80px;">
280	</div>
281	</div>
282	<button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
283	</div>
284	<?php } ?>
285	</div>
286	<button type="button" id="add-mid-widget" class="button button-primary" style="margin-top: 15px;">+ Add Another Mid-Article Widget</button>
287	</div>
288	<div id="right-rail" class="settings_block widget_settings_block">
289	<label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
290	<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>
291
292	<div id="rightrail-banner">
293	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>
294	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>
295	3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br>
296	4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br>
297	5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br>
298	6. Browse to your website and verify that the newly added unit displays correctly.</br>
299	<hr>
300	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>.
301	</div>
302	</div>
303	<div id="category_widget" class="settings_block widget_settings_block">
304	<div class="switch_style">
305	<label class="switch">
306	<input id="category_enabled"
307	type="checkbox"
308	<?php echo !empty($settings->category_enabled) ? "checked='checked'" : "" ?>
309	onclick="setEnabledDisabled('#category_widget', this)"
310	name="category_enabled"/>
311	<span class="slider round"></span>
312	</label>
313	<b style="font-size:15px;float: left;">Category (Section Page)</b>
314	<div class='tooltip'>
315	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
316	<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>
317	</g>
318	</svg>
319	<div>Settings will be applied to all 'Category/Section' pages on your site.</div>
320	</div>
321	</div>
322
323	<div class="label_below">
324
325	<div class="mode_style">
326	<label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label>
327	<div class='tooltip'>
328	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
329	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
330	<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>
331	</g>
332	</svg>
333	<div>Your <i>category</i> Mode (Widget ID), as provided by Taboola.</div>
334	</div>
335	</div>
336
337	<div class="placement_style"><label id="category_placement_label" style="float:left;">Placement Name:</label>
338	<div class='tooltip'>
339	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
340	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
341	<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>
342	</g>
343	</svg>
344	<div>Your <i>category</i> Placement Name, as provided by Taboola.</div>
345	</div>
346	</div>
347	</div>
348
349
350	<div class="input_below">
351	<div class="widget_below">
352	<input id="category_widget_id" type="text"
353	value="<?php echo !empty($settings->category_widget_id) ? strip_tags($settings->category_widget_id) : '' ?>"
354	name="category_widget_id" placeholder="Widget ID"/>
355	</div>
356	<div class="placement_below">
357	<input id="category_placement" type="text"
358	value="<?php echo !empty($settings->category_placement) ? strip_tags($settings->category_placement) : '' ?>"
359	name="category_placement" placeholder="Placement Name"/>
360	</div>
361	</div>
362
363	<div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
364	<div class='tooltip'>
365	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
366	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
367	<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>
368	</g>
369	</svg>
370	<div>The widget will be placed <i>just beneath</i> this element.<br><br>
371	To target an element, 2 pieces of information are needed:<br><br>
372	i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
373	ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
374	For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
375	</div>
376	</div>
377	</div>
378
379	<div class="home_occurrence">
380	<div class="mode_style_home_selector">
381	<label id="category_location_string_label" style="float:left;">CSS selector :</label>
382	<div class='tooltip'>
383	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
384	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
385	<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>
386	</g>
387	</svg>
388	<div>
389	The element to target - e.g.:<br><br>
390	<i>section</i> - to target a <i>section</i>.<br>
391	<i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
392	<i>.my-class</i> - to target a <i>class</i> of "my-class".
393	</div>
394	</div>
395
396	</div>
397	<div class="placement_style_home_occurrence">
398	<label id="category_occurrence_label" style="float:left;">Occurrence :</label>
399	<div class='tooltip'>
400	<!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
401	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
402	<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>
403	</g>
404	</svg>
405	<div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br>
406	E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br>
407	For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div>
408	</div>
409
410	</div>
411	</div>
412
413	<div class="home_placement">
414	<div class="widget_below_home_selector">
415	<input id="category_location_string" type="text"
416	value="<?php echo !empty($settings->category_location_string) ? strip_tags($settings->category_location_string) : '' ?>"
417	name="category_location_string" placeholder="e.g. #content"/>
418	</div>
419	<div class="placement_below_home_Occurrence">
420	<input id="category_occurrence" type="number" min="1"
421	value="<?php echo !empty($settings->category_location_string_occurrence) ? $settings->category_location_string_occurrence : '1' ?>"
422	name="category_location_string_occurrence"
423	style="width:65px;">
424	</div>
425	</div>
426	</div>
427	<div id="homepage" class="settings_block widget_settings_block">
428	<div class="switch_style">
429	<label class="switch">
430	<input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
431	<span class="slider round"></span>
432	</label>
433	<div>
434	<b style="font-size:15px;float: left;">Homepage (front page)</b>
435	<div class='tooltip'>
436	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
437	<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>
438	</g>
439	</svg>
440	<div>Settings will be applied to the page that you marked as your 'front page'.</div>
441	</div>
442	</div>
443	</div>
444
445	<div>
446	<div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
447	<div class='tooltip'>
448	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
449	<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>
450	</g>
451	</svg>
452	<div>Your <i>homepage</i> Mode (Widget ID), as provided by Taboola.</div>
453	</div>
454	</div>
455	<div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
456	<div class='tooltip'>
457	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
458	<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>
459	</g>
460	</svg>
461	<div>Your <i>homepage</i> Placement Name, as provided by Taboola.</div>
462	</div>
463	</div>
464	</div>
465	<div>
466	<div class="widget_below_home">
467	<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" />
468	</div>
469	<div class="placement_below_home">
470	<input id = "home_placement" type="text" value="<?php echo !empty($settings->home_placement) ? strip_tags($settings->home_placement) : "" ?>" name="home_placement" placeholder="Placement Name" />
471	</div>
472	</div>
473
474	<div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
475	<div class='tooltip'>
476	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
477	<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>
478	</g>
479	</svg>
480	<div>The widget will be placed <i>just beneath</i> this element.<br><br>
481	To target an element, 2 pieces of information are needed:<br><br>
482	i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
483	ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
484	For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
485	</div>
486	</div>
487	</div>
488
489
490	<div class="home_occurrence">
491	<div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
492	<div class='tooltip'>
493	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
494	<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>
495	</g>
496	</svg>
497	<div>
498	The element to target - e.g.:<br><br>
499	<i>section</i> - to target a <i>section</i>.<br>
500	<i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
501	<i>.my-class</i> - to target a <i>class</i> of "my-class".
502	</div>
503	</div>
504	</div>
505	<div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
506	<div class='tooltip'>
507	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
508	<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>
509	</g>
510	</svg>
511	<div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br>
512	E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br>
513	For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div>
514	</div>
515	</div>
516	</div>
517	<div class="home_placement">
518	<div class="widget_below_home_selector">
519	<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>
520	</div>
521	<div class="placement_below_home_Occurrence">
522	<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;">
523	</div>
524	</div>
525	</div>
526
527	<div id="advanced-settings-main">
528	<a id="show-advanced-settings">Show advanced settings >></a>
529	<div class="change_button">
530	<input class='apply_button' type="submit" value="Apply Changes"/>
531	</div>
532	</div>
533
534	</div>
535
536	<div id="tab2" class="tab-content" style="display: none;">
537	<h2 class="general_h2">General Setting</h2>
538	<div id="web_push" class="settings_block widget_settings_block">
539	<div class="style_box1"><label id="pub_id">Web Push Account ID:</label>
540	<div class="tooltip">
541	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
542	<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>
543	</g>
544	</svg>
545	<div>Your SC web-push numeric account ID, as provided by Taboola.<br>
546	This integration is only for sponsored web-push <br> <br>
547	The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
548	</div>
549	</div>
550	<div class="switch_style_push">
551	<label class="switch">
552	<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" />
553	<span class="slider round"></span>
554	</label>
555	</div>
556	</div>
557	<div class="web_push_id">
558	<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" />
559	</div>
560	<div class="statement">
561	<label style="color: #000000; padding-">
562	Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
563	</label>
564	</div>
565	</div>
566
567	<div id="advanced-settings-main">
568	<div class="change_button">
569	<input class='apply_button' type="submit" value="Apply Changes"/>
570	</div>
571	</div>
572	</div>
573
574	</form>
575	<div style='clear:both'></div>
576
577	<?php
578	$logPublisher = empty($settings->publisher_id) ? "wordpressplugin" : $settings->publisher_id;
579	$userDetails = wp_get_current_user();
580	$detailsString = $userDetails->first_name." ".$userDetails->last_name;
581	?>
582	<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']}")?>"/>
583	</div>
584
585	<script>
586	setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
587	setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
588	setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
589	setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
590	setEnabledDisabled('#category_widget',document.getElementById('category_enabled'));
591	</script>
592
593	<script>
594	jQuery(document).ready(function($) {
595	let widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length;
596
597	// Function to set the initial correct view for widgets
598	function initializeWidgetView() {
599	$('#mid-article-widgets-container .mid-widget-type-selector').each(function() {
600	var container = $(this).closest('.mid-article-widget');
601	var selectorInputContainer = container.find('.mid-css-selector-container');
602
603	if ($(this).val() === 'Paragraph') {
604	selectorInputContainer.hide();
605	} else {
606	selectorInputContainer.show();
607	}
608	});
609	}
610
611	// Call the function on page load to fix the initial view
612	initializeWidgetView();
613
614	// Add a new mid-article widget section
615	$('#add-mid-widget').on('click', function() {
616	widgetCounter++;
617	var widgetHtml = `
618	<div class="mid-article-widget" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px;">
619	<h4 style="font-size: 14px; font-weight: bold;">Mid-Article Widget #${widgetCounter}</h4>
620	<div style="display: flex; flex-wrap: wrap;">
621	<div style="flex: 1; min-width: 250px; padding-right: 10px;">
622	<label>Mode (Widget ID):</label>
623	<input class="widefat" type="text" name="mid_widget_id[]" placeholder="thumbnails-mid1" />
624	</div>
625	<div style="flex: 1; min-width: 250px;">
626	<label>Placement Name:</label>
627	<input class="widefat" type="text" name="mid_placement[]" placeholder="Mid Article Thumbnails" />
628	</div>
629	</div>
630	<div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
631	<div style="flex: 1; min-width: 200px; padding-right: 10px;">
632	<label>Position below:</label>
633	<select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]">
634	<option value="Paragraph" selected>Paragraph</option>
635	<option value="Other">Other (Custom)</option>
636	</select>
637	</div>
638	<div style="flex: 1; min-width: 150px; padding-right: 10px; display:none;" class="mid-css-selector-container">
639	<label>CSS selector:</label>
640	<input class="widefat" type="text" name="mid_location_string[]" value="p" />
641	</div>
642	<div style="flex: 1; min-width: 150px;">
643	<label>Paragraph/Element Number:</label>
644	<input class="widefat" type="number" name="mid_location_string_occurrence[]" value="1" min="1" style="width:80px;">
645	</div>
646	</div>
647	<button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
648	</div>`;
649	$('#mid-article-widgets-container').append(widgetHtml);
650	});
651
652	// Remove a mid-article widget section
653	$('#mid-article-widgets-container').on('click', '.remove-mid-widget', function() {
654	$(this).closest('.mid-article-widget').remove();
655	$('#mid-article-widgets-container .mid-article-widget').each(function(index) {
656	$(this).find('h4').text(`Mid-Article Widget #${index + 1}`);
657	});
658	widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length;
659	});
660
661	// Handle the show/hide for the CSS selector field on change
662	$('#mid-article-widgets-container').on('change', '.mid-widget-type-selector', function() {
663	var container = $(this).closest('.mid-article-widget');
664	var selectorInputContainer = container.find('.mid-css-selector-container');
665	var selectorInput = selectorInputContainer.find('input');
666
667	if ($(this).val() === 'Paragraph') {
668	selectorInputContainer.hide();
669	selectorInput.val('p');
670	} else {
671	selectorInputContainer.show();
672	}
673	});
674	});
675	</script>
676
677	<script>
678	setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
679	setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
680	</script>