PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.8.2
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.8.2
8.8.2 8.8.1 8.8.0 8.7.9 8.7.8 8.7.7 8.7.6 8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 All 538 releases
← All changes | addons/automator/includes/templates/help-page.php +340 -340 8.7.9 → 8.8.2 View file →
@@ -1,340 +1,340 @@
1 -<?php
2 -/**
3 - * Help Page Template for WPbot Automator
4 - */
5 -if ( ! defined( 'ABSPATH' ) ) {
6 - exit;
7 -}
8 -?>
9 -
10 -<style>
11 - :root {
12 - --wpbot-primary: #4f46e5;
13 - --wpbot-primary-hover: #4338ca;
14 - --wpbot-bg: #f8fafc;
15 - --wpbot-card-bg: #ffffff;
16 - --wpbot-text-main: #1e293b;
17 - --wpbot-text-muted: #64748b;
18 - --wpbot-border: #e2e8f0;
19 - --wpbot-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
20 - --wpbot-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
21 - }
22 -
23 - .wpbot-help-container {
24 - font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
25 - max-width: 1000px;
26 - margin: 20px auto;
27 - padding: 0 20px;
28 - color: var(--wpbot-text-main);
29 - }
30 -
31 - .wpbot-help-header {
32 - text-align: center;
33 - margin-bottom: 50px;
34 - }
35 -
36 - .wpbot-help-header h1 {
37 - font-size: 2.5rem;
38 - font-weight: 800;
39 - margin-bottom: 10px;
40 - background: linear-gradient(to right, #4f46e5, #9333ea);
41 - -webkit-background-clip: text;
42 - background-clip: text;
43 - -webkit-text-fill-color: transparent;
44 - line-height: 45px;
45 - }
46 -
47 - .wpbot-help-header p {
48 - font-size: 1.1rem;
49 - color: var(--wpbot-text-muted);
50 - }
51 -
52 - /* Step by Step Guide */
53 - .wpbot-steps-grid {
54 - display: grid;
55 - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
56 - gap: 25px;
57 - margin-bottom: 60px;
58 - }
59 -
60 - .wpbot-step-card {
61 - background: var(--wpbot-card-bg);
62 - border: 1px solid var(--wpbot-border);
63 - border-radius: 16px;
64 - padding: 30px;
65 - position: relative;
66 - transition: all 0.3s ease;
67 - box-shadow: var(--wpbot-shadow);
68 - }
69 -
70 - .wpbot-step-card:hover {
71 - transform: translateY(-5px);
72 - box-shadow: var(--wpbot-shadow-lg);
73 - border-color: var(--wpbot-primary);
74 - }
75 -
76 - .wpbot-step-number {
77 - position: absolute;
78 - top: -15px;
79 - left: 20px;
80 - width: 40px;
81 - height: 40px;
82 - background: var(--wpbot-primary);
83 - color: white;
84 - border-radius: 50%;
85 - display: flex;
86 - align-items: center;
87 - justify-content: center;
88 - font-weight: bold;
89 - font-size: 1.2rem;
90 - box-shadow: 0 4px 10px rgba(79, 70, 229, 0.4);
91 - }
92 -
93 - .wpbot-step-card h3 {
94 - margin-top: 10px;
95 - font-size: 1.25rem;
96 - font-weight: 600;
97 - }
98 -
99 - .wpbot-step-card p {
100 - color: var(--wpbot-text-muted);
101 - line-height: 1.6;
102 - }
103 -
104 - /* Accordion Section */
105 - .wpbot-faq-section {
106 - background: var(--wpbot-card-bg);
107 - border-radius: 16px;
108 - padding: 40px;
109 - box-shadow: var(--wpbot-shadow);
110 - }
111 -
112 - .wpbot-faq-section h2 {
113 - font-size: 2rem;
114 - margin-bottom: 30px;
115 - text-align: center;
116 - }
117 -
118 - .wpbot-faq-item {
119 - border-bottom: 1px solid var(--wpbot-border);
120 - }
121 -
122 - .wpbot-faq-item:last-child {
123 - border-bottom: none;
124 - }
125 -
126 - .wpbot-faq-trigger {
127 - width: 100%;
128 - padding: 20px 0;
129 - background: none;
130 - border: none;
131 - display: flex;
132 - justify-content: space-between;
133 - align-items: center;
134 - cursor: pointer;
135 - text-align: left;
136 - font-size: 1.1rem;
137 - font-weight: 500;
138 - color: var(--wpbot-text-main);
139 - transition: color 0.2s ease;
140 - }
141 -
142 - .wpbot-faq-trigger:hover {
143 - color: var(--wpbot-primary);
144 - }
145 -
146 - .wpbot-faq-content {
147 - max-height: 0;
148 - overflow: hidden;
149 - transition: max-height 0.3s ease-out;
150 - color: var(--wpbot-text-muted);
151 - line-height: 1.6;
152 - }
153 -
154 - .wpbot-faq-item.active .wpbot-faq-content {
155 - max-height: 200px;
156 - padding-bottom: 20px;
157 - }
158 -
159 - .wpbot-faq-icon {
160 - width: 20px;
161 - height: 20px;
162 - position: relative;
163 - transition: transform 0.3s ease;
164 - }
165 -
166 - .wpbot-faq-icon::before,
167 - .wpbot-faq-icon::after {
168 - content: '';
169 - position: absolute;
170 - background: currentColor;
171 - transition: transform 0.3s ease;
172 - }
173 -
174 - .wpbot-faq-icon::before {
175 - width: 100%;
176 - height: 2px;
177 - top: 9px;
178 - }
179 -
180 - .wpbot-faq-icon::after {
181 - width: 2px;
182 - height: 100%;
183 - left: 9px;
184 - }
185 -
186 - .wpbot-faq-item.active .wpbot-faq-icon {
187 - transform: rotate(45deg);
188 - }
189 -
190 - /* Premium Banner */
191 - .wpbot-pro-banner {
192 - margin-top: 60px;
193 - background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
194 - border-radius: 20px;
195 - padding: 40px;
196 - color: white;
197 - text-align: center;
198 - position: relative;
199 - overflow: hidden;
200 - }
201 -
202 - .wpbot-pro-banner::before {
203 - content: '';
204 - position: absolute;
205 - top: -50%;
206 - left: -50%;
207 - width: 200%;
208 - height: 200%;
209 - background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
210 - pointer-events: none;
211 - }
212 -
213 - .wpbot-pro-banner h2 {
214 - color: white;
215 - font-size: 2rem;
216 - margin-bottom: 15px;
217 - }
218 -
219 - .wpbot-pro-banner p {
220 - font-size: 1.1rem;
221 - margin-bottom: 25px;
222 - opacity: 0.9;
223 - }
224 -
225 - .wpbot-btn {
226 - display: inline-block;
227 - padding: 12px 30px;
228 - border-radius: 12px;
229 - font-weight: 600;
230 - text-decoration: none;
231 - transition: all 0.2s ease;
232 - cursor: pointer;
233 - }
234 -
235 - .wpbot-btn-white {
236 - background: white;
237 - color: #4f46e5;
238 - }
239 -
240 - .wpbot-btn-white:hover {
241 - transform: scale(1.05);
242 - box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
243 - }
244 -</style>
245 -
246 -<div class="wpbot-help-container">
247 - <div class="wpbot-help-header">
248 - <h1>Welcome to WPbot Automator</h1>
249 - <p>Automate your WordPress site with the power of workflows and AI.</p>
250 - </div>
251 -
252 - <div class="wpbot-steps-grid">
253 - <div class="wpbot-step-card">
254 - <div class="wpbot-step-number">1</div>
255 - <h3>Connect Your Apps</h3>
256 - <p>Start by configuring your API keys and service connections. Navigate to settings to securely link your OpenAI or Webhook credentials.</p>
257 - </div>
258 - <div class="wpbot-step-card">
259 - <div class="wpbot-step-number">2</div>
260 - <h3>Build Your Workflow</h3>
261 - <p>Use our intuitive drag-and-drop builder to create your first automation. Click "Create New Workflow" to open the canvas.</p>
262 - </div>
263 - <div class="wpbot-step-card">
264 - <div class="wpbot-step-number">3</div>
265 - <h3>Define Your Trigger</h3>
266 - <p>Every workflow needs a start. Choose from triggers like "New Comment", "User Registered", or "Order Placed" to set things in motion.</p>
267 - </div>
268 - <div class="wpbot-step-card">
269 - <div class="wpbot-step-number">4</div>
270 - <h3>Add Smart Actions</h3>
271 - <p>Connect actions to your triggers. Use AI to generate content, send notifications, or update site data automatically.</p>
272 - </div>
273 - <div class="wpbot-step-card">
274 - <div class="wpbot-step-number">5</div>
275 - <h3>Activate & Monitor</h3>
276 - <p>Once your logic is ready, activate the workflow. You can monitor every execution in real-time from your dashboard logs.</p>
277 - </div>
278 - </div>
279 -
280 - <div class="wpbot-faq-section">
281 - <h2>Common Questions</h2>
282 -
283 - <div class="wpbot-faq-item">
284 - <button class="wpbot-faq-trigger">
285 - How do I get an OpenAI API key?
286 - <span class="wpbot-faq-icon"></span>
287 - </button>
288 - <div class="wpbot-faq-content">
289 - <p>Log in to your OpenAI account at platform.openai.com, navigate to the API Keys section, and generate a new secret key. Copy and paste it into our Settings page.</p>
290 - </div>
291 - </div>
292 -
293 - <div class="wpbot-faq-item">
294 - <button class="wpbot-faq-trigger">
295 - Is it compatible with WooCommerce?
296 - <span class="wpbot-faq-icon"></span>
297 - </button>
298 - <div class="wpbot-faq-content">
299 - <p>Yes! We have specialized triggers and actions for WooCommerce, allowing you to automate tasks when orders are created or status changes occur.</p>
300 - </div>
301 - </div>
302 -
303 - <div class="wpbot-faq-item">
304 - <button class="wpbot-faq-trigger">
305 - How many workflows can I created?
306 - <span class="wpbot-faq-icon"></span>
307 - </button>
308 - <div class="wpbot-faq-content">
309 - <p>In the free version, you can create up to unlimited active workflows. Upgrade to PRO for unlimited workflows and advanced conditional logic.</p>
310 - </div>
311 - </div>
312 - </div>
313 -
314 - <div class="wpbot-pro-banner">
315 - <h2>Unleash the Full Power of AI</h2>
316 - <p>Unlock advanced triggers, unlimited workflows, and priority support with WPbot Automator PRO.</p>
317 - <a href="#" class="wpbot-btn wpbot-btn-white">Upgrade to Pro Now</a>
318 - </div>
319 -</div>
320 -
321 -<script>
322 - document.addEventListener('DOMContentLoaded', function() {
323 - const triggers = document.querySelectorAll('.wpbot-faq-trigger');
324 -
325 - triggers.forEach(trigger => {
326 - trigger.addEventListener('click', () => {
327 - const item = trigger.parentElement;
328 - const isActive = item.classList.contains('active');
329 -
330 - // Close all others
331 - document.querySelectorAll('.wpbot-faq-item').forEach(i => i.classList.remove('active'));
332 -
333 - // Toggle current
334 - if (!isActive) {
335 - item.classList.add('active');
336 - }
337 - });
338 - });
339 - });
340 -</script>
1 +<?php
2 +/**
3 + * Help Page Template for WPbot Automator
4 + */
5 +if ( ! defined( 'ABSPATH' ) ) {
6 + exit;
7 +}
8 +?>
9 +
10 +<style>
11 + :root {
12 + --wpbot-primary: #4f46e5;
13 + --wpbot-primary-hover: #4338ca;
14 + --wpbot-bg: #f8fafc;
15 + --wpbot-card-bg: #ffffff;
16 + --wpbot-text-main: #1e293b;
17 + --wpbot-text-muted: #64748b;
18 + --wpbot-border: #e2e8f0;
19 + --wpbot-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
20 + --wpbot-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
21 + }
22 +
23 + .wpbot-help-container {
24 + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
25 + max-width: 1000px;
26 + margin: 20px auto;
27 + padding: 0 20px;
28 + color: var(--wpbot-text-main);
29 + }
30 +
31 + .wpbot-help-header {
32 + text-align: center;
33 + margin-bottom: 50px;
34 + }
35 +
36 + .wpbot-help-header h1 {
37 + font-size: 2.5rem;
38 + font-weight: 800;
39 + margin-bottom: 10px;
40 + background: linear-gradient(to right, #4f46e5, #9333ea);
41 + -webkit-background-clip: text;
42 + background-clip: text;
43 + -webkit-text-fill-color: transparent;
44 + line-height: 45px;
45 + }
46 +
47 + .wpbot-help-header p {
48 + font-size: 1.1rem;
49 + color: var(--wpbot-text-muted);
50 + }
51 +
52 + /* Step by Step Guide */
53 + .wpbot-steps-grid {
54 + display: grid;
55 + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
56 + gap: 25px;
57 + margin-bottom: 60px;
58 + }
59 +
60 + .wpbot-step-card {
61 + background: var(--wpbot-card-bg);
62 + border: 1px solid var(--wpbot-border);
63 + border-radius: 16px;
64 + padding: 30px;
65 + position: relative;
66 + transition: all 0.3s ease;
67 + box-shadow: var(--wpbot-shadow);
68 + }
69 +
70 + .wpbot-step-card:hover {
71 + transform: translateY(-5px);
72 + box-shadow: var(--wpbot-shadow-lg);
73 + border-color: var(--wpbot-primary);
74 + }
75 +
76 + .wpbot-step-number {
77 + position: absolute;
78 + top: -15px;
79 + left: 20px;
80 + width: 40px;
81 + height: 40px;
82 + background: var(--wpbot-primary);
83 + color: white;
84 + border-radius: 50%;
85 + display: flex;
86 + align-items: center;
87 + justify-content: center;
88 + font-weight: bold;
89 + font-size: 1.2rem;
90 + box-shadow: 0 4px 10px rgba(79, 70, 229, 0.4);
91 + }
92 +
93 + .wpbot-step-card h3 {
94 + margin-top: 10px;
95 + font-size: 1.25rem;
96 + font-weight: 600;
97 + }
98 +
99 + .wpbot-step-card p {
100 + color: var(--wpbot-text-muted);
101 + line-height: 1.6;
102 + }
103 +
104 + /* Accordion Section */
105 + .wpbot-faq-section {
106 + background: var(--wpbot-card-bg);
107 + border-radius: 16px;
108 + padding: 40px;
109 + box-shadow: var(--wpbot-shadow);
110 + }
111 +
112 + .wpbot-faq-section h2 {
113 + font-size: 2rem;
114 + margin-bottom: 30px;
115 + text-align: center;
116 + }
117 +
118 + .wpbot-faq-item {
119 + border-bottom: 1px solid var(--wpbot-border);
120 + }
121 +
122 + .wpbot-faq-item:last-child {
123 + border-bottom: none;
124 + }
125 +
126 + .wpbot-faq-trigger {
127 + width: 100%;
128 + padding: 20px 0;
129 + background: none;
130 + border: none;
131 + display: flex;
132 + justify-content: space-between;
133 + align-items: center;
134 + cursor: pointer;
135 + text-align: left;
136 + font-size: 1.1rem;
137 + font-weight: 500;
138 + color: var(--wpbot-text-main);
139 + transition: color 0.2s ease;
140 + }
141 +
142 + .wpbot-faq-trigger:hover {
143 + color: var(--wpbot-primary);
144 + }
145 +
146 + .wpbot-faq-content {
147 + max-height: 0;
148 + overflow: hidden;
149 + transition: max-height 0.3s ease-out;
150 + color: var(--wpbot-text-muted);
151 + line-height: 1.6;
152 + }
153 +
154 + .wpbot-faq-item.active .wpbot-faq-content {
155 + max-height: 200px;
156 + padding-bottom: 20px;
157 + }
158 +
159 + .wpbot-faq-icon {
160 + width: 20px;
161 + height: 20px;
162 + position: relative;
163 + transition: transform 0.3s ease;
164 + }
165 +
166 + .wpbot-faq-icon::before,
167 + .wpbot-faq-icon::after {
168 + content: '';
169 + position: absolute;
170 + background: currentColor;
171 + transition: transform 0.3s ease;
172 + }
173 +
174 + .wpbot-faq-icon::before {
175 + width: 100%;
176 + height: 2px;
177 + top: 9px;
178 + }
179 +
180 + .wpbot-faq-icon::after {
181 + width: 2px;
182 + height: 100%;
183 + left: 9px;
184 + }
185 +
186 + .wpbot-faq-item.active .wpbot-faq-icon {
187 + transform: rotate(45deg);
188 + }
189 +
190 + /* Premium Banner */
191 + .wpbot-pro-banner {
192 + margin-top: 60px;
193 + background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
194 + border-radius: 20px;
195 + padding: 40px;
196 + color: white;
197 + text-align: center;
198 + position: relative;
199 + overflow: hidden;
200 + }
201 +
202 + .wpbot-pro-banner::before {
203 + content: '';
204 + position: absolute;
205 + top: -50%;
206 + left: -50%;
207 + width: 200%;
208 + height: 200%;
209 + background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
210 + pointer-events: none;
211 + }
212 +
213 + .wpbot-pro-banner h2 {
214 + color: white;
215 + font-size: 2rem;
216 + margin-bottom: 15px;
217 + }
218 +
219 + .wpbot-pro-banner p {
220 + font-size: 1.1rem;
221 + margin-bottom: 25px;
222 + opacity: 0.9;
223 + }
224 +
225 + .wpbot-btn {
226 + display: inline-block;
227 + padding: 12px 30px;
228 + border-radius: 12px;
229 + font-weight: 600;
230 + text-decoration: none;
231 + transition: all 0.2s ease;
232 + cursor: pointer;
233 + }
234 +
235 + .wpbot-btn-white {
236 + background: white;
237 + color: #4f46e5;
238 + }
239 +
240 + .wpbot-btn-white:hover {
241 + transform: scale(1.05);
242 + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
243 + }
244 +</style>
245 +
246 +<div class="wpbot-help-container">
247 + <div class="wpbot-help-header">
248 + <h1>Welcome to WPbot Automator</h1>
249 + <p>Automate your WordPress site with the power of workflows and AI.</p>
250 + </div>
251 +
252 + <div class="wpbot-steps-grid">
253 + <div class="wpbot-step-card">
254 + <div class="wpbot-step-number">1</div>
255 + <h3>Connect Your Apps</h3>
256 + <p>Start by configuring your API keys and service connections. Navigate to settings to securely link your OpenAI or Webhook credentials.</p>
257 + </div>
258 + <div class="wpbot-step-card">
259 + <div class="wpbot-step-number">2</div>
260 + <h3>Build Your Workflow</h3>
261 + <p>Use our intuitive drag-and-drop builder to create your first automation. Click "Create New Workflow" to open the canvas.</p>
262 + </div>
263 + <div class="wpbot-step-card">
264 + <div class="wpbot-step-number">3</div>
265 + <h3>Define Your Trigger</h3>
266 + <p>Every workflow needs a start. Choose from triggers like "New Comment", "User Registered", or "Order Placed" to set things in motion.</p>
267 + </div>
268 + <div class="wpbot-step-card">
269 + <div class="wpbot-step-number">4</div>
270 + <h3>Add Smart Actions</h3>
271 + <p>Connect actions to your triggers. Use AI to generate content, send notifications, or update site data automatically.</p>
272 + </div>
273 + <div class="wpbot-step-card">
274 + <div class="wpbot-step-number">5</div>
275 + <h3>Activate & Monitor</h3>
276 + <p>Once your logic is ready, activate the workflow. You can monitor every execution in real-time from your dashboard logs.</p>
277 + </div>
278 + </div>
279 +
280 + <div class="wpbot-faq-section">
281 + <h2>Common Questions</h2>
282 +
283 + <div class="wpbot-faq-item">
284 + <button class="wpbot-faq-trigger">
285 + How do I get an OpenAI API key?
286 + <span class="wpbot-faq-icon"></span>
287 + </button>
288 + <div class="wpbot-faq-content">
289 + <p>Log in to your OpenAI account at platform.openai.com, navigate to the API Keys section, and generate a new secret key. Copy and paste it into our Settings page.</p>
290 + </div>
291 + </div>
292 +
293 + <div class="wpbot-faq-item">
294 + <button class="wpbot-faq-trigger">
295 + Is it compatible with WooCommerce?
296 + <span class="wpbot-faq-icon"></span>
297 + </button>
298 + <div class="wpbot-faq-content">
299 + <p>Yes! We have specialized triggers and actions for WooCommerce, allowing you to automate tasks when orders are created or status changes occur.</p>
300 + </div>
301 + </div>
302 +
303 + <div class="wpbot-faq-item">
304 + <button class="wpbot-faq-trigger">
305 + How many workflows can I created?
306 + <span class="wpbot-faq-icon"></span>
307 + </button>
308 + <div class="wpbot-faq-content">
309 + <p>In the free version, you can create up to unlimited active workflows. Upgrade to PRO for unlimited workflows and advanced conditional logic.</p>
310 + </div>
311 + </div>
312 + </div>
313 +
314 + <div class="wpbot-pro-banner">
315 + <h2>Unleash the Full Power of AI</h2>
316 + <p>Unlock advanced triggers, unlimited workflows, and priority support with WPbot Automator PRO.</p>
317 + <a href="#" class="wpbot-btn wpbot-btn-white">Upgrade to Pro Now</a>
318 + </div>
319 +</div>
320 +
321 +<script>
322 + document.addEventListener('DOMContentLoaded', function() {
323 + const triggers = document.querySelectorAll('.wpbot-faq-trigger');
324 +
325 + triggers.forEach(trigger => {
326 + trigger.addEventListener('click', () => {
327 + const item = trigger.parentElement;
328 + const isActive = item.classList.contains('active');
329 +
330 + // Close all others
331 + document.querySelectorAll('.wpbot-faq-item').forEach(i => i.classList.remove('active'));
332 +
333 + // Toggle current
334 + if (!isActive) {
335 + item.classList.add('active');
336 + }
337 + });
338 + });
339 + });
340 +</script>