n duration to change the speed of the
hover animation on desktop
and the
click animation on touchscreen
.', 'elementor' ), ] ); $this->add_control( 'style_contact_custom_animation_transition', [ 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)', 'type' => Controls_Manager::SLIDER, 'range' => [ 's' => [ 'min' => 0, 'max' => 3, 'step' => 0.1, ], ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-transition-duration: {{SIZE}}{{UNIT}}', ], ] ); } $this->end_controls_section(); } protected function add_style_resource_links_section(): void { $this->start_controls_section( 'style_resource_links_section', [ 'label' => esc_html__( 'Resource Links', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'style_resource_links_icons_heading', [ 'label' => esc_html__( 'Icons', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => false, ] ); $this->add_control( 'style_resource_links_button_size', [ 'label' => esc_html__( 'Size', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'small', 'options' => [ 'small' => esc_html__( 'Small', 'elementor' ), 'medium' => esc_html__( 'Medium', 'elementor' ), 'large' => esc_html__( 'Large', 'elementor' ), ], ] ); $this->add_control( 'style_resource_links_color_select', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'custom', 'options' => [ 'default' => esc_html__( 'Default', 'elementor' ), 'custom' => esc_html__( 'Custom', 'elementor' ), ], ] ); $this->add_control( 'style_contact_icon_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-icon: {{VALUE}}', ], 'condition' => [ 'style_resource_links_color_select' => 'custom', ], ] ); $this->add_control( 'style_resource_links_title_heading', [ 'label' => esc_html__( 'Title', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => false, ] ); $this->add_control( 'style_resource_links_title_color', [ 'label' => esc_html__( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-title-text-color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'style_resource_links_title_typography', 'selector' => '{{WRAPPER}} .e-contact-buttons__contact-title', ] ); $this->add_control( 'style_resource_links_description_heading', [ 'label' => esc_html__( 'Description', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => false, ] ); $this->add_control( 'style_resource_links_description_color', [ 'label' => esc_html__( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-description-text-color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'style_resource_links_description_typography', 'selector' => '{{WRAPPER}} .e-contact-buttons__contact-description', ] ); $this->add_control( 'style_resource_links_bg_color', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-bg: {{VALUE}}', ], 'separator' => 'before', ] ); $this->add_hover_animation_control( 'style_resource_links_hover_animation', ); $this->end_controls_section(); } protected function add_style_info_links_section(): void { $this->start_controls_section( 'style_info_links_section', [ 'label' => esc_html__( 'Info Links', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'style_info_links_icon_position', [ 'label' => esc_html__( 'Icon Position', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__( 'Left', 'elementor' ), 'icon' => 'eicon-h-align-left', ], 'end' => [ 'title' => esc_html__( 'Right', 'elementor' ), 'icon' => 'eicon-h-align-right', ], ], 'default' => 'start', 'toggle' => true, ] ); $this->add_control( 'style_info_links_icon_spacing', [ 'label' => esc_html__( 'Icon Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ '%' => [ 'min' => 10, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 20, ], ], 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-icon-link-gap: {{SIZE}}{{UNIT}}', ], ] ); $this->add_responsive_control( 'style_info_links_link_spacing', [ 'label' => esc_html__( 'Link Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ '%' => [ 'min' => 10, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 10, ], ], 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-icon-link-spacing: {{SIZE}}{{UNIT}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'style_info_links_typography', 'selector' => '{{WRAPPER}} .e-contact-buttons__contact-icon-link', ] ); $this->start_controls_tabs( 'style_info_links_tabs' ); $this->start_controls_tab( 'style_info_links_tabs_normal', [ 'label' => esc_html__( 'Normal', 'elementor' ), ] ); $this->add_control( 'style_info_links_normal_text_color', [ 'label' => esc_html__( 'Text and Icon Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-icon-link-text-color: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'style_info_links_tabs_hover', [ 'label' => esc_html__( 'Hover', 'elementor' ), ] ); $this->add_control( 'style_info_links_hover_text_color', [ 'label' => esc_html__( 'Text and Icon Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-icon-link-text-color-hover: {{VALUE}}', ], ] ); $this->add_control( 'style_info_links_hover_animation', [ 'label' => esc_html__( 'Hover Animation', 'elementor' ), 'type' => Controls_Manager::HOVER_ANIMATION, 'frontend_available' => true, ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_control( 'style_info_links_dividers', [ 'label' => esc_html__( 'Dividers', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Show', 'elementor' ), 'label_off' => esc_html__( 'Hide', 'elementor' ), 'return_value' => 'yes', 'default' => 'yes', 'separator' => 'before', ] ); $this->add_control( 'style_info_links_divider_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-icon-link-divider-color: {{VALUE}}', ], 'condition' => [ 'style_info_links_dividers' => 'yes', ], ] ); $this->add_responsive_control( 'style_info_links_divider_weight', [ 'label' => esc_html__( 'Weight', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ '%' => [ 'min' => 10, 'max' => 100, ], 'px' => [ 'min' => 1, 'max' => 10, ], ], 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-icon-link-divider-weight: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'style_info_links_dividers' => 'yes', ], ] ); $this->end_controls_section(); } protected function add_style_send_button_section(): void { $config = static::get_configuration(); $this->start_controls_section( 'style_send_section', [ 'label' => $config['content']['send_button_section']['section_name'], 'tab' => Controls_Manager::TAB_STYLE, ] ); if ( $config['style']['send_button_section']['has_typography'] ) { $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'style_send_typography', 'selector' => $config['style']['send_button_section']['typography_selector'], ] ); } $this->start_controls_tabs( 'style_send_tabs' ); $this->start_controls_tab( 'style_send_tabs_normal', [ 'label' => esc_html__( 'Normal', 'elementor' ), ] ); if ( $config['style']['send_button_section']['has_platform_colors'] ) { $this->add_control( 'style_send_normal_colors', [ 'label' => esc_html__( 'Colors', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => [ 'default' => esc_html__( 'Default', 'elementor' ), 'custom' => esc_html__( 'Custom', 'elementor' ), ], ] ); } if ( $config['style']['send_button_section']['has_icon_color'] ) { $this->add_control( 'style_send_normal_icon_color', [ 'label' => esc_html__( 'Icon Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-icon: {{VALUE}}', ], 'condition' => [ 'style_send_normal_colors' => 'custom', ], ] ); } if ( $config['style']['send_button_section']['has_text_color'] ) { $this->add_control( 'style_send_normal_text_color', [ 'label' => esc_html__( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-text: {{VALUE}}', ], ] ); } if ( $config['style']['send_button_section']['has_background_color'] ) { $this->add_control( 'style_send_normal_background_color', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-bg: {{VALUE}}', ], 'condition' => $this->get_platform_color_condition( [ 'style_send_normal_colors' => 'custom', ] ), ] ); } $this->end_controls_tab(); $this->start_controls_tab( 'style_send_tabs_hover', [ 'label' => esc_html__( 'Hover', 'elementor' ), ] ); if ( $config['style']['send_button_section']['has_platform_colors'] ) { $this->add_control( 'style_send_hover_colors', [ 'label' => esc_html__( 'Colors', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => [ 'default' => esc_html__( 'Default', 'elementor' ), 'custom' => esc_html__( 'Custom', 'elementor' ), ], ] ); } if ( $config['style']['send_button_section']['has_icon_color'] ) { $this->add_control( 'style_send_hover_icon_color', [ 'label' => esc_html__( 'Icon Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-icon-hover: {{VALUE}}', ], 'condition' => [ 'style_send_hover_colors' => 'custom', ], ] ); } if ( $config['style']['send_button_section']['has_text_color'] ) { $this->add_control( 'style_send_hover_text_color', [ 'label' => esc_html__( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-text-hover: {{VALUE}}', ], ] ); } if ( $config['style']['send_button_section']['has_background_color'] ) { $this->add_control( 'style_send_hover_background_color', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-bg-hover: {{VALUE}}', ], 'condition' => $this->get_platform_color_condition( [ 'style_send_hover_colors' => 'custom', ] ), ] ); } $this->add_hover_animation_control( 'style_send_hover_animation', ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_responsive_control( 'style_chat_button_padding', [ 'label' => esc_html__( 'Padding', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-send-button-padding-block-end: {{BOTTOM}}{{UNIT}}; --e-contact-buttons-send-button-padding-block-start: {{TOP}}{{UNIT}}; --e-contact-buttons-send-button-padding-inline-end: {{RIGHT}}{{UNIT}}; --e-contact-buttons-send-button-padding-inline-start: {{LEFT}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->end_controls_section(); } protected function chat_box_animation_controls(): void { $this->add_responsive_control( 'style_chat_box_entrance_animation', [ 'label' => esc_html__( 'Open Animation', 'elementor' ), 'type' => Controls_Manager::ANIMATION, 'frontend_available' => true, 'separator' => 'before', ] ); $this->add_responsive_control( 'style_chat_box_exit_animation', [ 'label' => esc_html__( 'Close Animation', 'elementor' ), 'type' => Controls_Manager::EXIT_ANIMATION, 'frontend_available' => true, ] ); $this->add_control( 'style_chat_box_animation_duration', [ 'label' => esc_html__( 'Animation Duration', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'normal', 'options' => [ 'slow' => esc_html__( 'Slow', 'elementor' ), 'normal' => esc_html__( 'Normal', 'elementor' ), 'fast' => esc_html__( 'Fast', 'elementor' ), ], 'prefix_class' => 'animated-', ] ); } protected function add_style_chat_box_section(): void { $config = static::get_configuration(); $this->start_controls_section( 'style_chat_box_section', [ 'label' => $config['style']['chat_box_section']['section_name'], 'tab' => Controls_Manager::TAB_STYLE, ] ); if ( $config['style']['has_platform_colors'] ) { $this->add_control( 'style_chat_box_bg_select', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => [ 'default' => esc_html__( 'Default', 'elementor' ), 'custom' => esc_html__( 'Custom', 'elementor' ), ], ] ); } $this->add_control( 'style_chat_box_bg_color', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-chat-box-bg: {{VALUE}}', ], 'condition' => $this->get_platform_color_condition( [ 'style_chat_box_bg_select' => 'custom', ] ), ] ); if ( $config['style']['chat_box_section']['has_width'] ) { $this->add_responsive_control( 'style_chat_box_width', [ 'label' => esc_html__( 'Width', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ '%' => [ 'min' => 10, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 400, ], ], 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-chat-box-width: {{SIZE}}{{UNIT}}', ], ] ); } $this->add_control( 'style_chat_box_corners', [ 'label' => esc_html__( 'Corners', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'rounded', 'options' => [ 'round' => esc_html__( 'Round', 'elementor' ), 'rounded' => esc_html__( 'Rounded', 'elementor' ), 'sharp' => esc_html__( 'Sharp', 'elementor' ), ], 'separator' => 'before', ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'style_chat_box_box_shadow', 'selector' => '{{WRAPPER}} .e-contact-buttons__content', ] ); if ( $config['style']['chat_box_section']['has_padding'] ) { $this->add_responsive_control( 'style_chat_box_padding', [ 'label' => esc_html__( 'Padding', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-chat-box-padding-block-end: {{BOTTOM}}{{UNIT}}; --e-contact-buttons-chat-box-padding-block-start: {{TOP}}{{UNIT}}; --e-contact-buttons-chat-box-padding-inline-end: {{RIGHT}}{{UNIT}}; --e-contact-buttons-chat-box-padding-inline-start: {{LEFT}}{{UNIT}};', ], ] ); } $this->chat_box_animation_controls(); $this->end_controls_section(); } protected function add_style_tab(): void { $this->add_style_chat_button_section(); $this->add_style_top_bar_section(); $this->add_style_message_bubble_section(); $this->add_style_send_button_section(); $this->add_style_chat_box_section(); } private function add_advanced_tab(): void { $config = static::get_configuration(); Controls_Manager::add_tab( static::TAB_ADVANCED, esc_html__( 'Advanced', 'elementor' ) ); if ( $config['advanced']['has_layout_position'] ) { $this->start_controls_section( 'advanced_layout_section', [ 'label' => esc_html__( 'Layout', 'elementor' ), 'tab' => static::TAB_ADVANCED, ] ); $this->add_control( 'advanced_horizontal_position', [ 'label' => esc_html__( 'Horizontal Position', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__( 'Left', 'elementor' ), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor' ), 'icon' => 'eicon-h-align-center', ], 'end' => [ 'title' => esc_html__( 'Right', 'elementor' ), 'icon' => 'eicon-h-align-right', ], ], 'default' => $config['advanced']['horizontal_position_default'], 'toggle' => false, ] ); if ( $config['advanced']['has_horizontal_offset'] ) { $this->add_responsive_control( 'advanced_horizontal_offset', [ 'label' => esc_html__( 'Offset', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ '%' => [ 'min' => 10, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 100, ], ], 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-horizontal-offset: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'advanced_horizontal_position' => [ 'start', 'end', ], ], ] ); } $this->add_control( 'advanced_vertical_position', [ 'label' => esc_html__( 'Vertical Position', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'top' => [ 'title' => esc_html__( 'Top', 'elementor' ), 'icon' => 'eicon-v-align-top', ], 'middle' => [ 'title' => esc_html__( 'Middle', 'elementor' ), 'icon' => 'eicon-v-align-middle', ], 'bottom' => [ 'title' => esc_html__( 'Bottom', 'elementor' ), 'icon' => 'eicon-v-align-bottom', ], ], 'default' => 'bottom', 'toggle' => false, ] ); if ( $config['advanced']['has_vertical_offset'] ) { $this->add_responsive_control( 'advanced_vertical_offset', [ 'label' => esc_html__( 'Offset', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ '%' => [ 'min' => 10, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 100, ], ], 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-vertical-offset: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'advanced_vertical_position' => [ 'top', 'bottom', ], ], ] ); } if ( $config['advanced']['has_mobile_full_width'] ) { $this->add_control( 'advanced_mobile_full_width', [ 'label' => esc_html__( 'Full Width on Mobile', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'elementor' ), 'label_off' => esc_html__( 'No', 'elementor' ), 'return_value' => 'yes', 'default' => 'yes', ] ); } $this->end_controls_section(); } $this->start_controls_section( 'advanced_responsive_section', [ 'label' => esc_html__( 'Responsive', 'elementor' ), 'tab' => static::TAB_ADVANCED, ] ); $this->add_control( 'responsive_description', [ 'raw' => __( 'Responsive visibility will take effect only on preview mode or live page, and not while editing in Elementor.', 'elementor' ), 'type' => Controls_Manager::RAW_HTML, 'content_classes' => 'elementor-descriptor', ] ); $this->add_hidden_device_controls(); $this->end_controls_section(); $this->start_controls_section( 'advanced_custom_controls_section', [ 'label' => esc_html__( 'CSS', 'elementor' ), 'tab' => static::TAB_ADVANCED, ] ); $this->add_control( 'advanced_custom_css_id', [ 'label' => esc_html__( 'CSS ID', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'ai' => [ 'active' => false, ], 'dynamic' => [ 'active' => true, ], 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ), 'style_transfer' => false, ] ); $this->add_control( 'advanced_custom_css_classes', [ 'label' => esc_html__( 'CSS Classes', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'ai' => [ 'active' => false, ], 'dynamic' => [ 'active' => true, ], 'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ), ] ); $this->end_controls_section(); Plugin::$instance->controls_manager->add_custom_css_controls( $this, static::TAB_ADVANCED ); Plugin::$instance->controls_manager->add_custom_attributes_controls( $this, static::TAB_ADVANCED ); } protected function render(): void { $render_strategy = new Contact_Buttons_Core_Render( $this ); $render_strategy->render(); } }