PluginProbe
Elementor Website Builder – more than just a page builder / 3.22.0-beta1
Elementor Website Builder – more than just a page builder v3.22.0-beta1
4.3.4 4.3.3 4.3.2 4.3.1 4.3.0 4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 All 457 releases
elementor / modules / conversion-center / base / widget-contact-button-base.php

widget-contact-button-base.php in Elementor Website Builder – more than just a page builder 3.22.0-beta1, at modules/conversion-center/base/widget-contact-button-base.php

1,254 lines 29.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 namespace Elementor\Modules\ConversionCenter\Base;
4
5 use Elementor\Controls_Manager;
6 use Elementor\Group_Control_Typography;
7 use Elementor\Modules\ConversionCenter\Classes\Providers\Social_Network_Provider;
8 use Elementor\Modules\ConversionCenter\Classes\Render\Contact_Buttons_Core_Render;
9 use Elementor\Plugin;
10 use Elementor\Utils;
11 use Elementor\Widget_Base;
12 use Elementor\Group_Control_Box_Shadow;
13
14 abstract class Widget_Contact_Button_Base extends Widget_Base {
15
16 const TAB_ADVANCED = 'advanced-tab-contact-buttons';
17
18 public function get_icon(): string {
19 return 'eicon-commenting-o';
20 }
21
22 public function get_categories(): array {
23 return [ 'general' ];
24 }
25
26 public function get_keywords(): array {
27 return [ 'buttons', 'contact', 'widget' ];
28 }
29
30 public function get_stack( $with_common_controls = true ): array {
31 return parent::get_stack( false );
32 }
33
34 protected function register_controls(): void {
35
36 // Controls
37 $this->add_chat_button_section();
38
39 $this->add_top_bar_section();
40
41 $this->add_message_bubble_section();
42
43 $this->add_send_button_section();
44
45 // Styles
46 $this->add_style_chat_button_section();
47
48 $this->add_style_top_bar_section();
49
50 $this->add_style_message_bubble_section();
51
52 $this->add_style_send_button_section();
53
54 $this->add_style_chat_box_section();
55
56 // Advanced
57 $this->add_advanced_tab();
58 }
59
60 private function add_chat_button_section(): void {
61 $this->start_controls_section(
62 'chat_button_section',
63 [
64 'label' => esc_html__( 'Chat Button', 'elementor' ),
65 'tab' => Controls_Manager::TAB_CONTENT,
66 ]
67 );
68
69 $this->add_control(
70 'chat_button_platform',
71 [
72 'label' => esc_html__( 'Platform', 'elementor' ),
73 'type' => Controls_Manager::SELECT,
74 'default' => Social_Network_Provider::WHATSAPP,
75 'options' => Social_Network_Provider::get_social_networks_text(
76 [
77 Social_Network_Provider::EMAIL,
78 Social_Network_Provider::SMS,
79 Social_Network_Provider::WHATSAPP,
80 Social_Network_Provider::SKYPE,
81 Social_Network_Provider::MESSENGER,
82 Social_Network_Provider::VIBER,
83 ]
84 ),
85 ]
86 );
87
88 $this->add_control(
89 'chat_button_mail',
90 [
91 'label' => esc_html__( 'Email', 'elementor' ),
92 'type' => Controls_Manager::TEXT,
93 'dynamic' => [
94 'active' => true,
95 ],
96 'label_block' => true,
97 'placeholder' => esc_html__( '@', 'elementor' ),
98 'condition' => [
99 'chat_button_platform' => Social_Network_Provider::EMAIL,
100 ],
101 ],
102 );
103
104 $this->add_control(
105 'chat_button_mail_subject',
106 [
107 'label' => esc_html__( 'Subject', 'elementor' ),
108 'type' => Controls_Manager::TEXT,
109 'dynamic' => [
110 'active' => true,
111 ],
112 'label_block' => true,
113 'condition' => [
114 'chat_button_platform' => Social_Network_Provider::EMAIL,
115 ],
116 ],
117 );
118
119 $this->add_control(
120 'chat_button_mail_body',
121 [
122 'label' => esc_html__( 'Message', 'elementor' ),
123 'type' => Controls_Manager::TEXTAREA,
124 'condition' => [
125 'chat_button_platform' => Social_Network_Provider::EMAIL,
126 ],
127 ]
128 );
129
130 $this->add_control(
131 'chat_button_number',
132 [
133 'label' => esc_html__( 'Number', 'elementor' ),
134 'type' => Controls_Manager::TEXT,
135 'dynamic' => [
136 'active' => true,
137 ],
138 'label_block' => true,
139 'placeholder' => esc_html__( '+', 'elementor' ),
140 'condition' => [
141 'chat_button_platform' => [
142 Social_Network_Provider::SMS,
143 Social_Network_Provider::WHATSAPP,
144 Social_Network_Provider::VIBER,
145 ],
146 ],
147 ],
148 );
149
150 $this->add_control(
151 'chat_button_username',
152 [
153 'label' => esc_html__( 'Username', 'elementor' ),
154 'type' => Controls_Manager::TEXT,
155 'dynamic' => [
156 'active' => true,
157 ],
158 'label_block' => true,
159 'condition' => [
160 'chat_button_platform' => [
161 Social_Network_Provider::SKYPE,
162 Social_Network_Provider::MESSENGER,
163 ],
164 ],
165 ],
166 );
167
168 $this->add_control(
169 'chat_button_viber_action',
170 [
171 'label' => esc_html__( 'Action', 'elementor' ),
172 'type' => Controls_Manager::SELECT,
173 'default' => 'chat',
174 'options' => [
175 'chat' => 'Chat',
176 'contact' => 'Contact',
177 ],
178 'condition' => [
179 'chat_button_platform' => Social_Network_Provider::VIBER,
180 ],
181 ]
182 );
183
184 $this->add_control(
185 'chat_button_show_dot',
186 [
187 'label' => esc_html__( 'Display Notification Dot', 'elementor' ),
188 'type' => Controls_Manager::SWITCHER,
189 'label_on' => esc_html__( 'Yes', 'elementor' ),
190 'label_off' => esc_html__( 'No', 'elementor' ),
191 'return_value' => 'yes',
192 'default' => 'yes',
193 ]
194 );
195
196 $this->end_controls_section();
197 }
198
199 private function add_top_bar_section(): void {
200 $this->start_controls_section(
201 'top_bar_section',
202 [
203 'label' => esc_html__( 'Top Bar', 'elementor' ),
204 'tab' => Controls_Manager::TAB_CONTENT,
205 ]
206 );
207
208 $this->add_control(
209 'top_bar_name',
210 [
211 'label' => esc_html__( 'Name', 'elementor' ),
212 'type' => Controls_Manager::TEXT,
213 'default' => esc_html__( 'Rob Jones', 'elementor' ),
214 'placeholder' => esc_html__( 'Type your name here', 'elementor' ),
215 ]
216 );
217
218 $this->add_control(
219 'top_bar_title',
220 [
221 'label' => esc_html__( 'Title', 'elementor' ),
222 'type' => Controls_Manager::TEXT,
223 'default' => esc_html__( 'Store Manager', 'elementor' ),
224 'placeholder' => esc_html__( 'Type your title here', 'elementor' ),
225 ]
226 );
227
228 $this->add_control(
229 'top_bar_image',
230 [
231 'label' => esc_html__( 'Profile Image', 'elementor' ),
232 'type' => Controls_Manager::MEDIA,
233 'default' => [
234 'url' => Utils::get_placeholder_image_src(),
235 ],
236 ]
237 );
238
239 $this->add_control(
240 'top_bar_show_dot',
241 [
242 'label' => esc_html__( 'Display Active Dot', 'elementor' ),
243 'type' => Controls_Manager::SWITCHER,
244 'label_on' => esc_html__( 'Yes', 'elementor' ),
245 'label_off' => esc_html__( 'No', 'elementor' ),
246 'return_value' => 'yes',
247 'default' => 'yes',
248 ]
249 );
250
251 $this->end_controls_section();
252 }
253
254 private function add_message_bubble_section(): void {
255 $this->start_controls_section(
256 'message_bubble_section',
257 [
258 'label' => esc_html__( 'Message Bubble', 'elementor' ),
259 'tab' => Controls_Manager::TAB_CONTENT,
260 ]
261 );
262
263 $this->add_control(
264 'message_bubble_name',
265 [
266 'label' => esc_html__( 'Name', 'elementor' ),
267 'type' => Controls_Manager::TEXT,
268 'default' => esc_html__( 'Rob', 'elementor' ),
269 'placeholder' => esc_html__( 'Type your name here', 'elementor' ),
270 ]
271 );
272
273 $this->add_control(
274 'message_bubble_body',
275 [
276 'label' => esc_html__( 'Message', 'elementor' ),
277 'type' => Controls_Manager::TEXTAREA,
278 'dynamic' => [
279 'active' => true,
280 ],
281 'label_block' => true,
282 'default' => esc_html__( 'Hey, how can I help you today?', 'elementor' ),
283 'placeholder' => esc_html__( 'Message', 'elementor' ),
284 ],
285 );
286
287 $this->add_control(
288 'chat_button_time_format',
289 [
290 'label' => esc_html__( 'Time format', 'elementor' ),
291 'type' => Controls_Manager::SELECT,
292 'default' => '12h',
293 'options' => [
294 '12h' => esc_html__( '2:20 PM', 'elementor' ),
295 '24h' => esc_html__( '14:20', 'elementor' ),
296 ],
297 ]
298 );
299
300 $this->add_control(
301 'chat_button_show_animation',
302 [
303 'label' => esc_html__( 'Display Typing Animation', 'elementor' ),
304 'type' => Controls_Manager::SWITCHER,
305 'label_on' => esc_html__( 'Yes', 'elementor' ),
306 'label_off' => esc_html__( 'No', 'elementor' ),
307 'return_value' => 'yes',
308 'default' => 'yes',
309 ]
310 );
311
312 $this->end_controls_section();
313 }
314
315 private function add_send_button_section(): void {
316 $this->start_controls_section(
317 'send_button_section',
318 [
319 'label' => esc_html__( 'Send Button', 'elementor' ),
320 'tab' => Controls_Manager::TAB_CONTENT,
321 ]
322 );
323
324 $this->add_control(
325 'send_button_text',
326 [
327 'label' => esc_html__( 'Text', 'elementor' ),
328 'type' => Controls_Manager::TEXT,
329 'default' => esc_html__( 'Click to start chat', 'elementor' ),
330 'placeholder' => esc_html__( 'Type your text here', 'elementor' ),
331 ]
332 );
333
334 $this->end_controls_section();
335 }
336
337 private function add_style_chat_button_section(): void {
338 $this->start_controls_section(
339 'style_chat_button',
340 [
341 'label' => esc_html__( 'Chat Button', 'elementor' ),
342 'tab' => Controls_Manager::TAB_STYLE,
343 ]
344 );
345
346 $this->add_control(
347 'style_chat_button_size',
348 [
349 'label' => esc_html__( 'Size', 'elementor' ),
350 'type' => Controls_Manager::SELECT,
351 'default' => 'medium',
352 'options' => [
353 'small' => esc_html__( 'Small', 'elementor' ),
354 'medium' => esc_html__( 'Medium', 'elementor' ),
355 'large' => esc_html__( 'Large', 'elementor' ),
356 ],
357 ]
358 );
359
360 $this->start_controls_tabs(
361 'style_button_color_tabs'
362 );
363
364 $this->start_controls_tab(
365 'style_button_color_tabs_normal',
366 [
367 'label' => esc_html__( 'Normal', 'elementor' ),
368 ]
369 );
370
371 $this->add_control(
372 'style_button_color_select',
373 [
374 'label' => esc_html__( 'Colors', 'elementor' ),
375 'type' => Controls_Manager::SELECT,
376 'default' => 'default',
377 'options' => [
378 'default' => esc_html__( 'Default', 'elementor' ),
379 'custom' => esc_html__( 'Custom', 'elementor' ),
380 ],
381 ]
382 );
383
384 $this->add_control(
385 'style_button_color_icon',
386 [
387 'label' => esc_html__( 'Icon Color', 'elementor' ),
388 'type' => Controls_Manager::COLOR,
389 'selectors' => [
390 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-icon: {{VALUE}}',
391 ],
392 'condition' => [
393 'style_button_color_select' => 'custom',
394 ],
395 ]
396 );
397
398 $this->add_control(
399 'style_button_color_background',
400 [
401 'label' => esc_html__( 'Background Color', 'elementor' ),
402 'type' => Controls_Manager::COLOR,
403 'selectors' => [
404 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-bg: {{VALUE}}',
405 ],
406 'condition' => [
407 'style_button_color_select' => 'custom',
408 ],
409 ]
410 );
411
412 $this->end_controls_tab();
413
414 $this->start_controls_tab(
415 'style_button_color_tabs_hover',
416 [
417 'label' => esc_html__( 'Hover', 'elementor' ),
418 ]
419 );
420
421 $this->add_control(
422 'style_button_color_select_hover',
423 [
424 'label' => esc_html__( 'Colors', 'elementor' ),
425 'type' => Controls_Manager::SELECT,
426 'default' => 'default',
427 'options' => [
428 'default' => esc_html__( 'Default', 'elementor' ),
429 'custom' => esc_html__( 'Custom', 'elementor' ),
430 ],
431 ]
432 );
433
434 $this->add_control(
435 'style_button_color_icon_hover',
436 [
437 'label' => esc_html__( 'Icon Color', 'elementor' ),
438 'type' => Controls_Manager::COLOR,
439 'selectors' => [
440 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-icon-hover: {{VALUE}}',
441 ],
442 'condition' => [
443 'style_button_color_select_hover' => 'custom',
444 ],
445 ]
446 );
447
448 $this->add_control(
449 'style_button_color_background_hover',
450 [
451 'label' => esc_html__( 'Background Color', 'elementor' ),
452 'type' => Controls_Manager::COLOR,
453 'selectors' => [
454 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-bg-hover: {{VALUE}}',
455 ],
456 'condition' => [
457 'style_button_color_select_hover' => 'custom',
458 ],
459 ]
460 );
461
462 $this->add_control(
463 'style_button_color_hover_animation',
464 [
465 'label' => esc_html__( 'Hover Animation', 'elementor' ),
466 'type' => Controls_Manager::HOVER_ANIMATION,
467 'frontend_available' => true,
468 ]
469 );
470
471 $this->end_controls_tab();
472
473 $this->end_controls_tabs();
474
475 $this->add_control(
476 'style_chat_button_box_divider',
477 [
478 'type' => Controls_Manager::DIVIDER,
479 ]
480 );
481
482 $this->add_group_control(
483 Group_Control_Box_Shadow::get_type(),
484 [
485 'name' => 'style_chat_button_box_shadow',
486 'selector' => '{{WRAPPER}} .e-contact-buttons__chat-button',
487 ]
488 );
489
490 $this->add_responsive_control(
491 'style_chat_button_animation',
492 [
493 'label' => esc_html__( 'Entrance Animation', 'elementor' ),
494 'type' => Controls_Manager::ANIMATION,
495 'frontend_available' => true,
496 ]
497 );
498
499 $this->add_control(
500 'style_chat_button_animation_duration',
501 [
502 'label' => esc_html__( 'Animation Duration', 'elementor' ),
503 'type' => Controls_Manager::SLIDER,
504 'default' => [
505 'size' => 800,
506 ],
507 'range' => [
508 'px' => [
509 'min' => 0,
510 'max' => 3000,
511 'step' => 100,
512 ],
513 ],
514 'selectors' => [
515 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-button-chat-button-animation-duration: {{SIZE}}ms;',
516 ],
517 'condition' => [
518 'style_chat_button_animation!' => '',
519 ],
520 ]
521 );
522
523 $this->add_control(
524 'style_chat_button_animation_delay',
525 [
526 'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
527 'type' => Controls_Manager::NUMBER,
528 'default' => 0,
529 'min' => 0,
530 'step' => 100,
531 'selectors' => [
532 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-button-chat-button-animation-delay: {{SIZE}}ms;',
533 ],
534 'condition' => [
535 'style_chat_button_animation!' => '',
536 ],
537 'render_type' => 'none',
538 'frontend_available' => true,
539 ]
540 );
541
542 $this->end_controls_section();
543 }
544
545 private function add_style_top_bar_section(): void {
546
547 $this->start_controls_section(
548 'style_top_bar_section',
549 [
550 'label' => esc_html__( 'Top Bar', 'elementor' ),
551 'tab' => Controls_Manager::TAB_STYLE,
552 ]
553 );
554
555 $this->add_control(
556 'style_top_bar_profile_heading',
557 [
558 'label' => esc_html__( 'Profile Image', 'elementor' ),
559 'type' => Controls_Manager::HEADING,
560 'separator' => 'before',
561 ]
562 );
563
564 $this->add_control(
565 'style_top_bar_image_size',
566 [
567 'label' => esc_html__( 'Size', 'elementor' ),
568 'type' => Controls_Manager::SELECT,
569 'default' => 'medium',
570 'options' => [
571 'small' => esc_html__( 'Small', 'elementor' ),
572 'medium' => esc_html__( 'Medium', 'elementor' ),
573 'large' => esc_html__( 'Large', 'elementor' ),
574 ],
575 ]
576 );
577
578 $this->add_control(
579 'style_top_bar_divider',
580 [
581 'type' => Controls_Manager::DIVIDER,
582 ]
583 );
584
585 $this->add_control(
586 'style_top_bar_colors',
587 [
588 'label' => esc_html__( 'Colors', 'elementor' ),
589 'type' => Controls_Manager::SELECT,
590 'default' => 'default',
591 'options' => [
592 'default' => esc_html__( 'Default', 'elementor' ),
593 'custom' => esc_html__( 'Custom', 'elementor' ),
594 ],
595 ]
596 );
597
598 $this->add_control(
599 'style_top_bar_name_heading',
600 [
601 'label' => esc_html__( 'Name', 'elementor' ),
602 'type' => Controls_Manager::HEADING,
603 'separator' => false,
604 ]
605 );
606
607 $this->add_control(
608 'style_top_bar_name_color',
609 [
610 'label' => esc_html__( 'Text Color', 'elementor' ),
611 'type' => Controls_Manager::COLOR,
612 'selectors' => [
613 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-top-bar-name: {{VALUE}}',
614 ],
615 'condition' => [
616 'style_top_bar_colors' => 'custom',
617 ],
618 ]
619 );
620
621 $this->add_group_control(
622 Group_Control_Typography::get_type(),
623 [
624 'name' => 'style_top_bar_name_typography',
625 'selector' => '{{WRAPPER}} .e-contact-buttons__top-bar-name',
626 ]
627 );
628
629 $this->add_control(
630 'style_top_bar_title_heading',
631 [
632 'label' => esc_html__( 'Title', 'elementor' ),
633 'type' => Controls_Manager::HEADING,
634 'separator' => false,
635 ]
636 );
637
638 $this->add_control(
639 'style_top_bar_title_color',
640 [
641 'label' => esc_html__( 'Text Color', 'elementor' ),
642 'type' => Controls_Manager::COLOR,
643 'selectors' => [
644 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-top-bar-title: {{VALUE}}',
645 ],
646 'condition' => [
647 'style_top_bar_colors' => 'custom',
648 ],
649 ]
650 );
651
652 $this->add_group_control(
653 Group_Control_Typography::get_type(),
654 [
655 'name' => 'style_top_bar_title_typography',
656 'selector' => '{{WRAPPER}} .e-contact-buttons__top-bar-title',
657 ]
658 );
659
660 $this->add_control(
661 'style_top_bar_close_button_heading',
662 [
663 'label' => esc_html__( 'Close Button', 'elementor' ),
664 'type' => Controls_Manager::HEADING,
665 'separator' => false,
666 ]
667 );
668
669 $this->add_control(
670 'style_top_bar_close_button_color',
671 [
672 'label' => esc_html__( 'Close Button Color', 'elementor' ),
673 'type' => Controls_Manager::COLOR,
674 'selectors' => [
675 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-close-button-color: {{VALUE}}',
676 ],
677 'condition' => [
678 'style_top_bar_colors' => 'custom',
679 ],
680 ]
681 );
682
683 $this->add_control(
684 'style_top_bar_background_heading',
685 [
686 'label' => esc_html__( 'Background', 'elementor' ),
687 'type' => Controls_Manager::HEADING,
688 'separator' => false,
689 ]
690 );
691
692 $this->add_control(
693 'style_top_bar_background_color',
694 [
695 'label' => esc_html__( 'Background', 'elementor' ),
696 'type' => Controls_Manager::COLOR,
697 'selectors' => [
698 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-top-bar-bg: {{VALUE}}',
699 ],
700 'condition' => [
701 'style_top_bar_colors' => 'custom',
702 ],
703 ]
704 );
705
706 $this->end_controls_section();
707 }
708
709 private function add_style_message_bubble_section(): void {
710 $this->start_controls_section(
711 'style_bubble_section',
712 [
713 'label' => esc_html__( 'Message Bubble', 'elementor' ),
714 'tab' => Controls_Manager::TAB_STYLE,
715 ]
716 );
717
718 $this->add_control(
719 'style_bubble_colors',
720 [
721 'label' => esc_html__( 'Colors', 'elementor' ),
722 'type' => Controls_Manager::SELECT,
723 'default' => 'default',
724 'options' => [
725 'default' => esc_html__( 'Default', 'elementor' ),
726 'custom' => esc_html__( 'Custom', 'elementor' ),
727 ],
728 ]
729 );
730
731 $this->add_control(
732 'style_bubble_name_heading',
733 [
734 'label' => esc_html__( 'Name', 'elementor' ),
735 'type' => Controls_Manager::HEADING,
736 'separator' => false,
737 ]
738 );
739
740 $this->add_control(
741 'style_bubble_name_color',
742 [
743 'label' => esc_html__( 'Text Color', 'elementor' ),
744 'type' => Controls_Manager::COLOR,
745 'selectors' => [
746 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-message-bubble-name: {{VALUE}}',
747 ],
748 'condition' => [
749 'style_bubble_colors' => 'custom',
750 ],
751 ]
752 );
753
754 $this->add_group_control(
755 Group_Control_Typography::get_type(),
756 [
757 'name' => 'style_bubble_name_typography',
758 'selector' => '{{WRAPPER}} .e-contact-buttons__message-bubble-name',
759 ]
760 );
761
762 $this->add_control(
763 'style_bubble_message_heading',
764 [
765 'label' => esc_html__( 'Message', 'elementor' ),
766 'type' => Controls_Manager::HEADING,
767 'separator' => false,
768 ]
769 );
770
771 $this->add_control(
772 'style_bubble_message_color',
773 [
774 'label' => esc_html__( 'Text Color', 'elementor' ),
775 'type' => Controls_Manager::COLOR,
776 'selectors' => [
777 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-message-bubble-body: {{VALUE}}',
778 ],
779 'condition' => [
780 'style_bubble_colors' => 'custom',
781 ],
782 ]
783 );
784
785 $this->add_group_control(
786 Group_Control_Typography::get_type(),
787 [
788 'name' => 'style_bubble_message_typography',
789 'selector' => '{{WRAPPER}} .e-contact-buttons__message-bubble-body',
790 ]
791 );
792
793 $this->add_control(
794 'style_bubble_time_heading',
795 [
796 'label' => esc_html__( 'Time', 'elementor' ),
797 'type' => Controls_Manager::HEADING,
798 'separator' => false,
799 ]
800 );
801
802 $this->add_control(
803 'style_bubble_time_color',
804 [
805 'label' => esc_html__( 'Text Color', 'elementor' ),
806 'type' => Controls_Manager::COLOR,
807 'selectors' => [
808 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-message-bubble-time: {{VALUE}}',
809 ],
810 'condition' => [
811 'style_bubble_colors' => 'custom',
812 ],
813 ]
814 );
815
816 $this->add_group_control(
817 Group_Control_Typography::get_type(),
818 [
819 'name' => 'style_bubble_time_typography',
820 'selector' => '{{WRAPPER}} .e-contact-buttons__message-bubble-time',
821 ]
822 );
823
824 $this->add_control(
825 'style_bubble_background_heading',
826 [
827 'label' => esc_html__( 'Bubble Background', 'elementor' ),
828 'type' => Controls_Manager::HEADING,
829 'separator' => false,
830 'condition' => [
831 'style_bubble_colors' => 'custom',
832 ],
833 ]
834 );
835
836 $this->add_control(
837 'style_bubble_background_color',
838 [
839 'label' => esc_html__( 'Color', 'elementor' ),
840 'type' => Controls_Manager::COLOR,
841 'selectors' => [
842 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-message-bubble-bubble-bg: {{VALUE}}',
843 ],
844 'condition' => [
845 'style_bubble_colors' => 'custom',
846 ],
847 ]
848 );
849
850 $this->add_control(
851 'style_bubble_chat_heading',
852 [
853 'label' => esc_html__( 'Chat Background', 'elementor' ),
854 'type' => Controls_Manager::HEADING,
855 'separator' => false,
856 'condition' => [
857 'style_bubble_colors' => 'custom',
858 ],
859 ]
860 );
861
862 $this->add_control(
863 'style_bubble_chat_color',
864 [
865 'label' => esc_html__( 'Color', 'elementor' ),
866 'type' => Controls_Manager::COLOR,
867 'selectors' => [
868 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-message-bubble-chat-bg: {{VALUE}}',
869 ],
870 'condition' => [
871 'style_bubble_colors' => 'custom',
872 ],
873 ]
874 );
875
876 $this->end_controls_section();
877 }
878
879 private function add_style_send_button_section(): void {
880 $this->start_controls_section(
881 'style_send_section',
882 [
883 'label' => esc_html__( 'Send Button', 'elementor' ),
884 'tab' => Controls_Manager::TAB_STYLE,
885 ]
886 );
887
888 $this->start_controls_tabs(
889 'style_send_tabs'
890 );
891
892 $this->start_controls_tab(
893 'style_send_tabs_normal',
894 [
895 'label' => esc_html__( 'Normal', 'elementor' ),
896 ]
897 );
898
899 $this->add_control(
900 'style_send_normal_colors',
901 [
902 'label' => esc_html__( 'Colors', 'elementor' ),
903 'type' => Controls_Manager::SELECT,
904 'default' => 'default',
905 'options' => [
906 'default' => esc_html__( 'Default', 'elementor' ),
907 'custom' => esc_html__( 'Custom', 'elementor' ),
908 ],
909 ]
910 );
911
912 $this->add_control(
913 'style_send_normal_icon_color',
914 [
915 'label' => esc_html__( 'Icon Color', 'elementor' ),
916 'type' => Controls_Manager::COLOR,
917 'selectors' => [
918 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-icon: {{VALUE}}',
919 ],
920 'condition' => [
921 'style_send_normal_colors' => 'custom',
922 ],
923 ]
924 );
925
926 $this->add_control(
927 'style_send_normal_background_color',
928 [
929 'label' => esc_html__( 'Background Color', 'elementor' ),
930 'type' => Controls_Manager::COLOR,
931 'selectors' => [
932 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-bg: {{VALUE}}',
933 ],
934 'condition' => [
935 'style_send_normal_colors' => 'custom',
936 ],
937 ]
938 );
939
940 $this->end_controls_tab();
941
942 $this->start_controls_tab(
943 'style_send_tabs_hover',
944 [
945 'label' => esc_html__( 'Hover', 'elementor' ),
946 ]
947 );
948
949 $this->add_control(
950 'style_send_hover_colors',
951 [
952 'label' => esc_html__( 'Colors', 'elementor' ),
953 'type' => Controls_Manager::SELECT,
954 'default' => 'default',
955 'options' => [
956 'default' => esc_html__( 'Default', 'elementor' ),
957 'custom' => esc_html__( 'Custom', 'elementor' ),
958 ],
959 ]
960 );
961
962 $this->add_control(
963 'style_send_hover_icon_color',
964 [
965 'label' => esc_html__( 'Icon Color', 'elementor' ),
966 'type' => Controls_Manager::COLOR,
967 'selectors' => [
968 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-icon-hover: {{VALUE}}',
969 ],
970 'condition' => [
971 'style_send_hover_colors' => 'custom',
972 ],
973 ]
974 );
975
976 $this->add_control(
977 'style_send_hover_background_color',
978 [
979 'label' => esc_html__( 'Background Color', 'elementor' ),
980 'type' => Controls_Manager::COLOR,
981 'selectors' => [
982 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-bg-hover: {{VALUE}}',
983 ],
984 'condition' => [
985 'style_send_hover_colors' => 'custom',
986 ],
987 ]
988 );
989
990 $this->add_control(
991 'style_send_hover_animation',
992 [
993 'label' => esc_html__( 'Hover Animation', 'elementor' ),
994 'type' => Controls_Manager::HOVER_ANIMATION,
995 'frontend_available' => true,
996 ]
997 );
998
999 $this->end_controls_tab();
1000
1001 $this->end_controls_tabs();
1002
1003 $this->end_controls_section();
1004 }
1005
1006 private function add_style_chat_box_section(): void {
1007 $this->start_controls_section(
1008 'style_chat_box_section',
1009 [
1010 'label' => esc_html__( 'Chat Box', 'elementor' ),
1011 'tab' => Controls_Manager::TAB_STYLE,
1012 ]
1013 );
1014
1015 $this->add_control(
1016 'style_chat_box_bg_select',
1017 [
1018 'label' => esc_html__( 'Background Color', 'elementor' ),
1019 'type' => Controls_Manager::SELECT,
1020 'default' => 'default',
1021 'options' => [
1022 'default' => esc_html__( 'Default', 'elementor' ),
1023 'custom' => esc_html__( 'Custom', 'elementor' ),
1024 ],
1025 ]
1026 );
1027
1028 $this->add_control(
1029 'style_chat_box_bg_color',
1030 [
1031 'label' => esc_html__( 'Background Color', 'elementor' ),
1032 'type' => Controls_Manager::COLOR,
1033 'selectors' => [
1034 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-chat-box-bg: {{VALUE}}',
1035 ],
1036 'condition' => [
1037 'style_chat_box_bg_select' => 'custom',
1038 ],
1039 ]
1040 );
1041
1042 $this->add_responsive_control(
1043 'style_chat_box_width',
1044 [
1045 'label' => esc_html__( 'Width', 'elementor' ),
1046 'type' => Controls_Manager::SLIDER,
1047 'range' => [
1048 '%' => [
1049 'min' => 10,
1050 'max' => 100,
1051 ],
1052 'px' => [
1053 'min' => 0,
1054 'max' => 400,
1055 ],
1056 ],
1057 'default' => [
1058 'unit' => 'px',
1059 'size' => 360,
1060 ],
1061 'mobile_default' => [
1062 'unit' => 'vw',
1063 'size' => 100,
1064 ],
1065 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1066 'selectors' => [
1067 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-chat-box-width: {{SIZE}}{{UNIT}}',
1068 ],
1069 ]
1070 );
1071
1072 $this->add_control(
1073 'style_chat_box_corners',
1074 [
1075 'label' => esc_html__( 'Corners', 'elementor' ),
1076 'type' => Controls_Manager::SELECT,
1077 'default' => 'rounded',
1078 'options' => [
1079 'round' => esc_html__( 'Round', 'elementor' ),
1080 'rounded' => esc_html__( 'Rounded', 'elementor' ),
1081 'sharp' => esc_html__( 'Sharp', 'elementor' ),
1082 ],
1083 ]
1084 );
1085
1086 $this->add_group_control(
1087 Group_Control_Box_Shadow::get_type(),
1088 [
1089 'name' => 'style_chat_box_box_shadow',
1090 'selector' => '{{WRAPPER}} .e-contact-buttons__content',
1091 ]
1092 );
1093
1094 $this->add_responsive_control(
1095 'style_chat_box_entrance_animation',
1096 [
1097 'label' => esc_html__( 'Open Animation', 'elementor' ),
1098 'type' => Controls_Manager::ANIMATION,
1099 'frontend_available' => true,
1100 ]
1101 );
1102
1103 $this->add_responsive_control(
1104 'style_chat_box_exit_animation',
1105 [
1106 'label' => esc_html__( 'Close Animation', 'elementor' ),
1107 'type' => Controls_Manager::EXIT_ANIMATION,
1108 'frontend_available' => true,
1109 ]
1110 );
1111
1112 $this->add_control(
1113 'style_chat_box_animation_duration',
1114 [
1115 'label' => esc_html__( 'Animation Duration', 'elementor' ),
1116 'type' => Controls_Manager::SLIDER,
1117 'default' => [
1118 'size' => 800,
1119 ],
1120 'range' => [
1121 'px' => [
1122 'min' => 0,
1123 'max' => 3000,
1124 'step' => 100,
1125 ],
1126 ],
1127 'selectors' => [
1128 '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-chat-box-animation-duration: {{SIZE}}ms;',
1129 ],
1130 ]
1131 );
1132
1133 $this->end_controls_section();
1134 }
1135
1136 private function add_advanced_tab(): void {
1137 Controls_Manager::add_tab(
1138 static::TAB_ADVANCED,
1139 esc_html__( 'Advanced', 'elementor' )
1140 );
1141
1142 $this->start_controls_section(
1143 'advanced_layout_section',
1144 [
1145 'label' => esc_html__( 'Layout', 'elementor' ),
1146 'tab' => static::TAB_ADVANCED,
1147 ]
1148 );
1149
1150 $this->add_responsive_control(
1151 'advanced_horizontal_position',
1152 [
1153 'label' => esc_html__( 'Horizontal Position', 'elementor' ),
1154 'type' => \Elementor\Controls_Manager::CHOOSE,
1155 'options' => [
1156 'start' => [
1157 'title' => esc_html__( 'Left', 'elementor' ),
1158 'icon' => 'eicon-h-align-left',
1159 ],
1160 'end' => [
1161 'title' => esc_html__( 'Right', 'elementor' ),
1162 'icon' => 'eicon-h-align-right',
1163 ],
1164 ],
1165 'default' => 'end',
1166 'toggle' => true,
1167 ]
1168 );
1169
1170 $this->end_controls_section();
1171
1172 $this->start_controls_section(
1173 'advanced_responsive_section',
1174 [
1175 'label' => esc_html__( 'Responsive', 'elementor' ),
1176 'tab' => static::TAB_ADVANCED,
1177 ]
1178 );
1179
1180 $this->add_control(
1181 'responsive_description',
1182 [
1183 'raw' => sprintf(
1184 /* translators: 1: Link open tag, 2: Link close tag. */
1185 esc_html__( 'Responsive visibility will take effect only on %1$s preview mode %2$s or live page, and not while editing in Elementor.', 'elementor' ),
1186 '<a href="javascript: $e.run( \'panel/close\' )">',
1187 '</a>'
1188 ),
1189 'type' => Controls_Manager::RAW_HTML,
1190 'content_classes' => 'elementor-descriptor',
1191 ]
1192 );
1193
1194 $this->add_hidden_device_controls();
1195
1196 $this->end_controls_section();
1197
1198 $this->start_controls_section(
1199 'advanced_custom_controls_section',
1200 [
1201 'label' => esc_html__( 'Custom', 'elementor' ),
1202 'tab' => static::TAB_ADVANCED,
1203 ]
1204 );
1205
1206 $this->add_control(
1207 'advanced_custom_css_id',
1208 [
1209 'label' => esc_html__( 'CSS ID', 'elementor' ),
1210 'type' => Controls_Manager::TEXT,
1211 'default' => '',
1212 'ai' => [
1213 'active' => false,
1214 ],
1215 'dynamic' => [
1216 'active' => true,
1217 ],
1218 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
1219 'style_transfer' => false,
1220 ]
1221 );
1222
1223 $this->add_control(
1224 'advanced_custom_css_classes',
1225 [
1226 'label' => esc_html__( 'CSS Classes', 'elementor' ),
1227 'type' => Controls_Manager::TEXT,
1228 'default' => '',
1229 'ai' => [
1230 'active' => false,
1231 ],
1232 'dynamic' => [
1233 'active' => true,
1234 ],
1235 'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
1236 ]
1237 );
1238
1239 $this->end_controls_section();
1240
1241 Plugin::$instance->controls_manager->add_custom_css_controls( $this, static::TAB_ADVANCED );
1242
1243 Plugin::$instance->controls_manager->add_custom_attributes_controls( $this, static::TAB_ADVANCED );
1244
1245 }
1246
1247 protected function render(): void {
1248 $render_strategy = new Contact_Buttons_Core_Render( $this );
1249
1250 $render_strategy->render();
1251 }
1252
1253 }
1254