PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 7.4.0
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v7.4.0
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 8.5.6 8.5.5 8.5.4 8.5.3 All 534 releases
chatbot / includes / simple_text_response.php

simple_text_response.php in WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services 7.4.0, at includes/simple_text_response.php

745 lines 22.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 if ( ! defined( 'ABSPATH' ) ) {
3 exit;
4 }
5 global $wpdb;
6 ?>
7
8 <?php
9 if(isset($_GET['opt']) && $_GET['opt']=='add'):
10
11 do_action('qcld_str_add_category');
12
13 elseif(isset($_GET['opt']) && $_GET['opt']=='edit'):
14
15 do_action('qcld_str_edit_category');
16
17 elseif(isset($_GET['page']) && $_GET['page']=='simple-text-response' && isset($_GET['action']) && $_GET['action']=='import'):
18
19 do_action('qcld_str_import');
20
21 elseif(isset($_GET['action']) && $_GET['action']=='manage-categories'):
22
23 include_once(QCLD_wpCHATBOT_PLUGIN_DIR_PATH.'/includes/templates/manage-categories.php');
24
25 elseif(isset($_GET['action']) && $_GET['action']=='edit'):
26
27 if(class_exists('Qcld_str_pro')):
28 do_action('qcld_str_pro_stredit');
29 else:
30
31 $hasEdit = false;
32 if(isset($_GET['query']) && $_GET['query']!=''){
33 $hasEdit = true;
34 $id = sanitize_text_field($_GET['query']);
35 $table = $wpdb->prefix.'wpbot_response';
36 $data = $wpdb->get_row($wpdb->prepare("select * from $table where id = %d", $id)); //DB Call OK, No Caching OK
37 }
38 ?>
39 <div class="qcld-wp-chatbot-wrap-header">
40
41 <a href="#" class="qcld-wp-chatbot-wrap-site__logo"><img style="width:100%" src="<?php echo esc_url( QCLD_wpCHATBOT_IMG_URL . '/chatbot.png' ); ?>" alt="Dialogflow CX"> WPBot Control Panel </a>
42 <p><strong>Core Version:</strong> v<?php echo QCLD_wpCHATBOT_VERSION; ?></p>
43 <ul class="qcld-wp-chatbot-wrap-version-wrapper">
44 <li>
45 <a class="wpchatbot-Upgrade" href="https://www.wpbot.pro/" target="_blank">Upgrade To Pro</a>
46
47 </li>
48 </ul>
49 </div>
50 <div class="TextResponsesoutside">
51 <div class="qcwrap TextResponses">
52 <div class="wp-chatbot-wrap">
53 <div class="wpbot_dashboard_header "><h1><?php echo ($hasEdit?'Edit':'Add') ?> Response</h1></div>
54 <form method="post" action="">
55 <div class="wpbot_addons_section ">
56 <div class="wpbot_single_addon_wrapper2">
57 <p><b><?php esc_html_e('Please note the following ', 'chatbot'); ?></b></p>
58 <ul>
59 <li> <?php esc_html_e('1. The Query, Response and Keywords fields will be searched. Add Keywords for best matches', 'chatbot'); ?></li>
60 <li> <?php esc_html_e('2. Please clear browser Cache and Cookies both before testing new responses', 'chatbot'); ?></li>
61 </ul>
62 <table class="form-table-str form-table">
63 <tbody>
64 <tr valign="top">
65 <th scope="row"><?php esc_html_e('Query', 'chatbot'); ?></th>
66 <td>
67 <input name="str_nonce" type="hidden" value="<?php echo sanitize_key( wp_create_nonce('str-nonce') ); ?>" />
68 <input type="text" name="qc_bot_str_query" value="<?php echo esc_attr($hasEdit?$data->query:''); ?>" style="width: 100%;" required />
69 <br><i><?php esc_html_e('*Required. Add the query here. ', 'chatbot'); ?></i>
70 </td>
71 </tr>
72
73 <tr valign="top">
74 <th scope="row"> <?php esc_html_e('Response', 'chatbot'); ?></th>
75 <td>
76 <?php
77
78 $content = ($hasEdit?$data->response:'');
79 $editor_id = 'qc_bot_str_response';
80 $settings = array( );
81
82 wp_editor( $content, $editor_id, $settings );
83
84 ?>
85 <br><i><?php esc_html_e('*Required. Add the response here. ', 'chatbot'); ?></i>
86 </td>
87 </tr>
88 <tr valign="top">
89 <th scope="row">Keyword</th>
90 <td>
91 <input type="text" name="qc_bot_str_keyword" value="<?php echo esc_attr($hasEdit?$data->keyword:''); ?>" style="width: 100%;" />
92 <br><i> <?php esc_html_e('Optional. Add multiple keyword or phrases as comma(,) seperated value. It will help to find the best match result.', 'chatbot'); ?></i>
93 </td>
94 </tr>
95
96
97 <?php if($hasEdit): ?>
98
99 <input type="hidden" name="qc_bot_str_id" value="<?php echo esc_attr($data->id); ?>" />
100
101 <?php endif; ?>
102 </tbody>
103 </table>
104 </div>
105 <footer class="wp-chatbot-admin-footer">
106 <div class="row">
107 <div class="text-left col-sm-3 col-sm-offset-3">
108
109 </div>
110 <div class="text-right col-sm-6">
111 <input type="submit" class="button button-primary" name="submit" id="submit" value="Save Settings">
112 </div>
113 </div>
114 <!-- row-->
115 </footer>
116 </div></form>
117 </div>
118 </div>
119 </div>
120 <?php endif; ?>
121
122
123 <?php else: ?>
124
125 <div class="qcld-wp-chatbot-wrap-header">
126
127 <a href="#" class="qcld-wp-chatbot-wrap-site__logo"><img style="width:100%" src="<?php echo esc_url( QCLD_wpCHATBOT_IMG_URL . '/chatbot.png' ); ?>" alt="Dialogflow CX"> WPBot Control Panel </a>
128 <p><strong>Core Version:</strong> v<?php echo QCLD_wpCHATBOT_VERSION; ?></p>
129 <ul class="qcld-wp-chatbot-wrap-version-wrapper">
130 <li>
131 <a class="wpchatbot-Upgrade" href="https://www.wpbot.pro/" target="_blank">Upgrade To Pro</a>
132
133 </li>
134 </ul>
135 </div>
136
137 <div class="qcld-wp-chatbot-wrap-header_inn">
138 <div class="qcld-wp-chatbot-wrap-header_inn_heading">
139 <h1 class="wp-heading-inline"><?php esc_html_e('Simple Text Responses', 'chatbot'); ?></h1>
140 <a href="<?php echo esc_url( add_query_arg( 'action', 'edit', admin_url('admin.php?page=simple-text-response') ) ); ?>" class="button page-title-action"><?php esc_html_e('Add New', 'chatbot'); ?></a>
141 </div>
142 <?php if(class_exists('Qcld_str_pro')): ?>
143
144 <a href="<?php echo esc_url( add_query_arg( 'action', 'manage-categories', admin_url('admin.php?page=simple-text-response') ) ); ?>" class="button page-title-action"><?php esc_html_e('Manage Categories', 'chatbot'); ?></a>
145 <a href="<?php echo esc_url( admin_url( 'admin-post.php?action=qc_str_export' ) ); ?>" class="button page-title-action"><?php esc_html_e('Export', 'chatbot'); ?></a>
146 <a href="<?php echo esc_url( add_query_arg( 'action', 'import', admin_url('admin.php?page=simple-text-response') ) ); ?>" class="button page-title-action"><?php esc_html_e('Import', 'chatbot'); ?></a>
147 </div>
148 <?php endif; ?>
149 <div class="TextResponsesouter">
150 <div class="wrap TextResponses">
151
152 <div id="qcld-show-more-wrapper-box">
153 <div class="qcld-show-more-text qcld-show-more-show-more-height">
154
155 <div class="wrapTexttop">
156 <p><?php esc_html_e('Create simple text responses and the ChatBot will use advanced search algorithm to answer user questions. This is a simpler alternative to OpenAI or DialogFlow.', 'chatbot'); ?><br>
157 <b><?php esc_html_e('NB: Simple Text Responses require mySQL Client version 5.6+', 'chatbot'); ?></b></p>
158 </div>
159 <form method="post" action="">
160 <table class="form-table-str form-table">
161 <tbody>
162 <tr valign="top">
163 <th scope="row"><?php esc_html_e('Phrase matching accuracy', 'chatbot'); ?></th>
164 <td>
165 <input name="str_nonce" type="hidden" value="<?php echo sanitize_key( wp_create_nonce('str-nonce') ); ?>" />
166 <input type="text" name="qc_bot_str_weight" value="<?php echo esc_attr( !empty(get_option('qc_bot_str_weight')) ? get_option('qc_bot_str_weight') : '0.4' ); ?>" style="width: 100%;" required />
167 <br><i><?php esc_html_e('Please enter a value between 0 to 1. Higher value means more exact matching of phrases.', 'chatbot'); ?></i>
168 </td>
169 </tr>
170 <tr valign="top">
171 <th scope="row"><?php esc_html_e('Search Fields', 'chatbot'); ?></th>
172 <td>
173 <?php
174 $fields = get_option('qc_bot_str_fields');
175 ?>
176
177 <label for="qc_bot_str_field_title"><?php esc_html_e('Title', 'chatbot'); ?></label>
178 <input id="qc_bot_str_field_title" type="checkbox" name="qc_bot_str_fields[]" value="query" <?php echo (!$fields?'checked="checked"':''); ?> <?php echo ($fields && in_array('query', $fields)?'checked="checked"':''); ?> />
179
180 <label for="qc_bot_str_field_keyword"><?php esc_html_e('Keyword', 'chatbot'); ?></label>
181 <input id="qc_bot_str_field_keyword" type="checkbox" name="qc_bot_str_fields[]" value="keyword" <?php echo (!$fields?'checked="checked"':''); ?> <?php echo ($fields && in_array('keyword', $fields)?'checked="checked"':''); ?> />
182
183 <label for="qc_bot_str_field_response"><?php esc_html_e('Response', 'chatbot'); ?></label>
184 <input id="qc_bot_str_field_response" type="checkbox" name="qc_bot_str_fields[]" value="response" <?php echo (!$fields?'checked="checked"':''); ?> <?php echo ($fields && in_array('response', $fields)?'checked="checked"':''); ?> />
185 <br><i><?php esc_html_e('Please check/uncheck to allow/disallow searching in that fields', 'chatbot'); ?></i>
186 </td>
187 </tr>
188
189 <tr valign="top">
190 <th scope="row"></th>
191 <td>
192 <input type="submit" class="button button-primary" name="submit" id="submit" value="Save Settings">
193 </td>
194 </tr>
195 </tbody>
196 </table>
197 </form>
198 <form method="post" action="">
199 <table class="form-table-str form-table">
200 <tbody>
201 <tr valign="top">
202 <th scope="row"><?php esc_html_e('Re-Index STR', 'chatbot'); ?></th>
203 <td>
204 <input name="str_nonce" type="hidden" value="<?php echo sanitize_key( wp_create_nonce('str-nonce') ); ?>" />
205 <input type="submit" class="button button-primary" name="qc-re-index" id="re-index" value="Re Index">
206
207 <i><?php esc_html_e('Re-Index if results are not as expected.', 'chatbot'); ?></i>
208 </td>
209 </tr>
210 </tbody>
211 </table>
212 </form>
213
214
215
216 </div>
217 <div class="qcld-show-more-show-more"><i class="fa fa-plus-circle" aria-hidden="true"></i></div>
218 </div>
219
220 <div id="poststuff">
221 <div id="post-body" class="metabox-holder">
222 <div id="post-body-content-edit" class="str-form">
223 <div class="meta-box-sortables ui-sortable">
224 <form method="post">
225
226 <a href="<?php echo esc_url( add_query_arg( 'action', 'edit', admin_url('admin.php?page=simple-text-response') ) ); ?>" class="button page-title-action str-addnew"><?php esc_html_e('Add New', 'chatbot'); ?></a>
227 <?php
228 $this->response_list->prepare_items();
229 $this->response_list->display(); ?>
230 </form>
231 </div>
232 </div>
233 </div>
234
235 </div>
236 </div>
237 </div>
238 <?php endif; ?>
239
240
241 <div id="qcld-quick-flyout" >
242 <div class="qcld-quick-flyout-items">
243 <a href="https://wpbot.pro/docs/knowledgebase/getting-started-with-chatbot/" target="_blank" class="qcld-quick-flyout-button qcld-quick-flyout-item qcld-quick-flyout-premium" rel="noopener noreferrer" target="_blank" style="transition-delay: 0ms;">
244 <div class="qcld-quick-flyout-label">
245 <div>Getting Started</div>
246 </div>
247 <i class="dashicons dashicons-admin-home"></i>
248 </a>
249 <a href="https://wpbot.pro/docs/kb-sections/chatbot-faqs/" target="_blank" class="qcld-quick-flyout-button qcld-quick-flyout-item" rel="noopener noreferrer" target="_blank" style="transition-delay: 60ms;">
250 <div class="qcld-quick-flyout-label">
251 <div>FAQ</div>
252 </div>
253 <i class="dashicons dashicons-flag"></i>
254 </a>
255 <a href="https://wpbot.pro/docs/" target="_blank" class="qcld-quick-flyout-button qcld-quick-flyout-item" style="transition-delay: 90ms;">
256 <div class="qcld-quick-flyout-label">
257 <div>Read the Documentation</div>
258 </div>
259 <i class="dashicons dashicons-sos"></i>
260 </a>
261 <a href="https://www.wpbot.pro/free-support/" target="_blank" class="qcld-quick-flyout-button qcld-quick-flyout-item" rel="noopener noreferrer" target="_blank" style="transition-delay: 120ms;">
262 <div class="qcld-quick-flyout-label">
263 <div>Ask for Help</div>
264 </div>
265 <i class="dashicons dashicons-email"></i>
266 </a>
267 <a href="https://www.wpbot.pro/" target="_blank" class="qcld-quick-flyout-button qcld-quick-flyout-item" style="transition-delay: 30ms;">
268 <div class="qcld-quick-flyout-label">
269 <div>Check out the WPBot Demo</div>
270 </div>
271 <i class="dashicons dashicons-welcome-view-site"></i>
272 </a>
273 <a href="https://www.wpbot.pro/pricing/" target="_blank" class="qcld-quick-flyout-button qcld-quick-flyout-item qcld-quick-flyout-premium" rel="noopener noreferrer" target="_blank" style="transition-delay: 0ms;">
274 <div class="qcld-quick-flyout-label">
275 <div>Upgrade to Premium</div>
276 </div>
277 <i class="dashicons dashicons-star-filled"></i>
278 </a>
279 </div>
280 <a href="javascript:void(0);" class="qcld-quick-flyout-button qcld-quick-flyout-mascot">
281 <div class="qcld-quick-flyout-label">
282 <div>Start Here</div>
283 </div>
284 <img style="width:100%" src="<?php echo esc_url( QCLD_wpCHATBOT_IMG_URL . '/agent-01.png' ); ?>" alt="Dialogflow CX">
285 </a>
286 </div>
287
288
289 <style>
290 body {
291 background-color: #F5F7FD;
292 font-family: "DM Sans", sans-serif !important;
293 font-optical-sizing: auto;
294 font-size: 16px;
295 font-weight: normal;
296 }
297 .qcld-wp-chatbot-wrap-header {
298 display: flex;
299 column-gap: 15px;
300 row-gap: 10px;
301 background: #fff;
302 padding: 15px 15px;
303 margin: 20px 20px 20px 0;
304 border-radius: 16px;
305 align-items: center;
306 justify-content: space-between;
307 width: 97%;
308 }
309
310 .qcld-wp-chatbot-wrap-header img{
311 max-width: 50px;
312 }
313
314 .qcld-wp-chatbot-wrap-header ul, .qcld-wp-chatbot-wrap-header p, .qcld-wp-chatbot-wrap-header li{
315 margin: 0;
316 }
317 .qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade {
318 padding: 12px 25px;
319 background: #ffffff;
320 color: #5B4E96;
321 border: 2px solid #5B4E96;
322 border-radius: 6px;
323 font-weight: bold;
324 }
325
326 .qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade:hover {
327 padding: 12px 25px;
328 background: #5B4E96;
329 color: #fff;
330 border: 2px solid #5B4E96;
331 border-radius: 6px;
332 font-weight: bold;
333 text-decoration: none;
334 }
335 a.qcld-wp-chatbot-wrap-site__logo {
336 font-size: 22px;
337 color: #000;
338 font-weight: bold;
339 display: flex;
340 align-items: center;
341 gap: 12px;
342 text-decoration: none;
343 margin: 0;
344 padding: 0;
345 }
346
347 a{
348 text-decoration: none;
349 }
350 .qcld-wp-chatbot-wrap-header_inn {
351 background: #fff;
352 border-radius: 16px;
353 margin: 0 20px 0 0;
354 padding: 20px;
355 }
356 .TextResponsesoutside {
357 background: #fff;
358 border-radius: 16px;
359 margin: 0 20px 0 0;
360 padding: 20px;
361 }
362
363
364 .qcld-wp-chatbot-wrap-header_inn h1.wp-heading-inline {
365 border-bottom: 1px solid #eee;
366 padding: 0 0 15px 0;
367 margin: 20px 0 12px 0;
368 font-weight: bold;
369 font-size: 22px !important;
370 }
371
372 .TextResponsesoutside h1 {
373 border-bottom: 1px solid #eee;
374 padding: 0 0 8px 0;
375 margin: 20px 0 12px 0;
376 font-weight: bold;
377 font-size: 22px !important;
378 }
379 .TextResponsesoutside ul li {
380 font-size: 14px;
381 }
382 .wpbot_single_addon_wrapper2 p {
383 font-size: 16px;
384 }
385 .TextResponsesouter i {
386 font-weight: normal;
387 font-size: 12px;
388 color: red;
389 }
390 .TextResponsesoutside i {
391 font-weight: normal;
392 font-size: 12px;
393 color: red;
394 }
395
396 table.form-table-str.form-table tr {
397 background: #fff;
398 padding: 2px 10px !important;
399 border-radius: 6px;
400 margin: 0 0 8px 0;
401 border: 5px solid #fff;
402 vertical-align: middle;
403 border: 1px solid #eee;
404 }
405 table.form-table-str.form-table {
406 border: 1px solid #eee;
407 }
408 table.form-table-str.form-table tr {
409 border: none;
410 }
411 table.form-table-str.form-table th {
412 vertical-align: top;
413 text-align: center;
414 padding: 20px 10px 20px 0;
415 width: 200px;
416 line-height: 1.3;
417 font-weight: 600;
418 vertical-align: middle;
419 }
420
421 .TextResponsesoutside footer.wp-chatbot-admin-footer input#submit {
422 padding: 12px 20px;
423 width: 100%;
424 font-size: 16px;
425 font-weight: 500;
426 color: #988FBD;
427 border-radius: 8px;
428 position: relative;
429 display: flex;
430 align-items: center;
431 gap: 15px;
432 background: #5B4E96;
433 color: #ffffff;
434 text-decoration: none;
435 border: none;
436 max-width: 220px;
437 margin: 12px 0 0 0;
438 line-height: 24px;
439 }
440 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action {
441 padding: 3px 25px;
442 background: #ffffff;
443 color: #5B4E96;
444 border: 2px solid #5B4E96;
445 border-radius: 6px;
446 font-weight: bold;
447 }
448
449 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action:hover {
450 padding: 0px 15px;
451 background: #5B4E96;
452 color: #fff;
453 border: 2px solid #5B4E96;
454 border-radius: 6px;
455 font-weight: bold;
456 position: absolute;
457 top: 36px;
458 left: 280px;
459 }
460 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action {
461 padding: 0px 15px;
462 background: #ffffff;
463 color: #5B4E96;
464 border: 2px solid #5B4E96;
465 border-radius: 6px;
466 font-weight: bold;
467 position: absolute;
468 top: 36px;
469 left: 280px;
470 }
471
472 .qcld-wp-chatbot-wrap-header_inn {
473 position: relative;
474 }
475 .notice.is-dismissible.qcbot-str-top-notic {
476 width: 96%;
477 }
478
479 .TextResponsesouter i {
480 position: relative;
481 top: 6px;
482 }
483
484 table.form-table-str.form-table th {
485 text-align: left !important;
486 padding: 20px 10px 20px 20px !important;
487 }
488
489 .qc-review-text img {
490 width: 100%;
491 }
492
493 .TextResponsesouter input#submit {
494 padding: 0px 15px;
495 background: #ffffff;
496 color: #5B4E96;
497 border: 2px solid #5B4E96;
498 border-radius: 6px;
499 font-weight: bold;
500 }
501 .TextResponsesouter input#re-index {
502 padding: 0px 15px;
503 background: #ffffff;
504 color: #5B4E96;
505 border: 2px solid #5B4E96;
506 border-radius: 6px;
507 font-weight: bold;
508 }
509
510
511 #qcld-show-more-wrapper-box {
512 margin-top: 0;
513 position:relative;
514 }
515 #qcld-show-more-wrapper-box .qcld-show-more-text {
516 /* width: 660px; */
517 margin-bottom: 5px;
518 padding: 0 0;
519 position:relative;
520 display: block;
521 }
522 #qcld-show-more-wrapper-box .qcld-show-more-show-more {
523 color: #ffffff;
524 position: relative;
525 padding: 40px 0 0 0;
526 height: 40px;
527 text-align: center;
528 background: #f1f1f1;
529 cursor: pointer;
530 background: linear-gradient(to bottom, rgb(255 255 255 / 53%) 0%, rgb(188 174 255) 100%);
531 margin: -18px 0 0 0;
532 border-radius: 0 0 15px 15px;
533 z-index: 99999;
534 font-weight: bold;
535
536 }
537
538 #qcld-show-more-wrapper-box .qcld-show-more-show-more-height {
539 height: 112px;
540 overflow:hidden;
541 }
542
543 #qcld-show-more-wrapper-box .qcld-show-more-show-more i {
544 display: block;
545 padding: 0 0 0 0;
546 background: #5b4e96;
547 width: 30px;
548 height: 30px;
549 line-height: 30px;
550 border-radius: 50%;
551 margin: -15px auto 0 auto;
552 font-size: 18px !important;
553 color: #fff;
554 }
555 .TextResponsesouter input#submit:hover {
556 background: #5B4E96;
557 color: #fff;
558 border: 2px solid #5B4E96;
559 }
560
561 .TextResponsesouter input#re-index:hover {
562 background: #5B4E96;
563 color: #fff;
564 border: 2px solid #5B4E96;
565 }
566
567 #qcld-quick-flyout {
568 align-items: center;
569 bottom: 40px;
570 display: flex;
571 flex-direction: column;
572 opacity: 1;
573 position: fixed;
574 right: 40px;
575 row-gap: 10px;
576 transition: opacity .2s ease-in-out;
577 z-index: 99999
578 }
579
580 #qcld-quick-flyout:not(.is-open) {
581 pointer-events: none
582 }
583
584 @media (max-width:959px) {
585 #qcld-quick-flyout {
586 display: none
587 }
588 }
589
590 #qcld-quick-flyout .qcld-quick-flyout-mascot {
591 align-items: center;
592 display: flex;
593 pointer-events: auto;
594 position: relative
595 }
596
597 #qcld-quick-flyout .qcld-quick-flyout-mascot:after {
598 background-color: #fff;
599 border-radius: 50%;
600 bottom: 0;
601 box-shadow: 0 0 0 1px #212121, 0 3px 20px rgba(0, 0, 0, .2);
602 content: "";
603 display: block;
604 height: 60px;
605 left: 0;
606 position: absolute;
607 transition: all .2s ease-in-out;
608 width: 60px;
609 z-index: -1
610 }
611
612 #qcld-quick-flyout .qcld-quick-flyout-mascot:hover:after {
613 box-shadow: 0 0 0 1px #212121, 0 3px 30px rgba(0, 0, 0, .25)
614 }
615
616 #qcld-quick-flyout .qcld-quick-flyout-mascot:focus {
617 box-shadow: none
618 }
619
620 #qcld-quick-flyout .qcld-quick-mascot__eyes {
621 transition: transform .2s ease-in-out
622 }
623
624 #qcld-quick-flyout.is-open .glsr-mascot__eyes {
625 transform: translateY(-2.5%)
626 }
627
628 #qcld-quick-flyout .qcld-quick-flyout-label {
629 align-items: center;
630 display: flex;
631 height: auto !important;
632 padding-right: 10px;
633 position: absolute;
634 right: 100%;
635 transition: all .2s ease-out;
636 white-space: nowrap
637 }
638
639 #qcld-quick-flyout .qcld-quick-flyout-label>div {
640 background-color: rgba(44 51 56/.9);
641 border-radius: 3px;
642 color: #fff;
643 font-size: 14px;
644 line-height: 1.4;
645 padding: 6px 12px;
646 position: relative
647 }
648
649 #qcld-quick-flyout .qcld-quick-flyout-item:hover .qcld-quick-flyout-label>div,
650 #qcld-quick-flyout .qcld-quick-flyout-mascot .qcld-quick-flyout-label>div {
651 background-color: #E91E63
652 }
653
654 #qcld-quick-flyout .qcld-quick-flyout-mascot .qcld-quick-flyout-label {
655 opacity: 1;
656 transform: scale(1);
657 transform-origin: right
658 }
659
660 #qcld-quick-flyout.is-open .qcld-quick-flyout-mascot .qcld-quick-flyout-label {
661 opacity: 0;
662 transform: scale(0)
663 }
664
665 #qcld-quick-flyout .qcld-quick-flyout-items {
666 display: flex;
667 flex-direction: column;
668 row-gap: 10px
669 }
670
671 #qcld-quick-flyout .qcld-quick-flyout-item {
672 align-items: center;
673 background-color:#5B4E96;
674 border-radius: 50%;
675 box-shadow: 0 3px 20px rgba(0, 0, 0, .2);
676 display: flex;
677 height: 40px;
678 justify-content: center;
679 opacity: 0;
680 text-decoration: none;
681 transform: scale(0);
682 transition-duration: .2s;
683 transition-property: all;
684 transition-timing-function: ease-in-out;
685 visibility: hidden;
686 width: 40px
687 }
688
689 #qcld-quick-flyout .qcld-quick-flyout-item:hover {
690 background-color: #111111;
691 box-shadow: 0 3px 30px rgba(0, 0, 0, .25)
692 }
693
694 #qcld-quick-flyout .qcld-quick-flyout-item.qcld-quick-flyout-premium {
695 background-color: #009688
696 }
697
698 #qcld-quick-flyout .qcld-quick-flyout-item.qcld-quick-flyout-premium:hover {
699 background-color: #E91E63
700 }
701
702 #qcld-quick-flyout .qcld-quick-flyout-item.qcld-quick-flyout-premium i {
703 align-items: center;
704 color: #fff;
705 display: flex;
706 justify-content: center;
707 position: relative
708 }
709
710
711 #qcld-quick-flyout.is-open .qcld-quick-flyout-item {
712 opacity: 1;
713 transform: scale(1);
714 visibility: visible
715 }
716
717 #qcld-quick-flyout .qcld-quick-flyout-item i {
718 color: #fff;
719 font-size: 26px;
720 height: 26px;
721 width: 26px
722 }
723
724 a.qcld-quick-flyout-button.qcld-quick-flyout-mascot img {
725 width: 60px !important;
726 }
727 </style>
728
729 <script type="text/javascript">
730 jQuery(".qcld-show-more-show-more").click(function () {
731 if(jQuery(".qcld-show-more-text").hasClass("qcld-show-more-show-more-height")) {
732 jQuery(this).html('<i class="fa fa-minus-circle" aria-hidden="true"></i>');
733 } else {
734 jQuery(this).html('<i class="fa fa-plus-circle" aria-hidden="true"></i>');
735 }
736
737 jQuery(".qcld-show-more-text").toggleClass("qcld-show-more-show-more-height");
738 });
739
740
741 jQuery('#qcld-quick-flyout').on('click', function() {
742 jQuery(this).toggleClass('is-open');
743 });
744
745 </script>