taboola / settings.php

settings.php in Taboola 3.0.2, at settings.php

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