get_phone();
// ── Content ─────────────────────────────────────────────────
$this->start_controls_section(
'content_section',
array(
'label' => __( 'Content', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
)
);
if ( $phone ) {
$this->add_control(
'info_notice',
array(
'type' => \Elementor\Controls_Manager::RAW_HTML,
'raw' => 'Phone: ' . esc_html( $phone ) . '
Always links to this number via click-to-call.',
'content_classes' => 'elementor-panel-alert elementor-panel-alert-success',
)
);
} else {
$this->add_control(
'info_notice',
array(
'type' => \Elementor\Controls_Manager::RAW_HTML,
'raw' => 'No phone number configured.
Set it in the A1 Tools app.',
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
)
);
}
$this->add_control(
'icon',
array(
'label' => __( 'Icon', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::ICONS,
'default' => array( 'value' => 'fas fa-phone-alt', 'library' => 'fa-solid' ),
)
);
$this->add_control(
'icon_position',
array(
'label' => __( 'Icon Position', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'left',
'options' => array(
'left' => __( 'Before Text', 'a1-tools' ),
'right' => __( 'After Text', 'a1-tools' ),
),
)
);
$this->add_control(
'use_custom_text',
array(
'label' => __( 'Custom Text', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'a1-tools' ),
'label_off' => __( 'No', 'a1-tools' ),
'return_value' => 'yes',
'default' => '',
'description' => __( 'Replace the phone number with custom text. The button still calls the number.', 'a1-tools' ),
)
);
$this->add_control(
'custom_text',
array(
'label' => __( 'Button Text', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => __( 'Call Now', 'a1-tools' ),
'label_block' => true,
'condition' => array( 'use_custom_text' => 'yes' ),
)
);
$this->add_responsive_control(
'alignment',
array(
'label' => __( 'Alignment', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::CHOOSE,
'options' => array(
'left' => array( 'title' => __( 'Left', 'a1-tools' ), 'icon' => 'eicon-text-align-left' ),
'center' => array( 'title' => __( 'Center', 'a1-tools' ), 'icon' => 'eicon-text-align-center' ),
'right' => array( 'title' => __( 'Right', 'a1-tools' ), 'icon' => 'eicon-text-align-right' ),
'justify' => array( 'title' => __( 'Full Width', 'a1-tools' ), 'icon' => 'eicon-text-align-justify' ),
),
'default' => 'left',
'selectors_dictionary' => array(
'left' => 'flex-start',
'center' => 'center',
'right' => 'flex-end',
'justify' => 'stretch',
),
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-wrapper' => 'justify-content: {{VALUE}};',
),
)
);
$this->add_control(
'full_width',
array(
'label' => __( 'Full Width', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'return_value' => 'yes',
'default' => '',
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button' => 'width: 100%; justify-content: center;',
),
)
);
$this->add_control(
'animation_heading',
array(
'label' => __( 'Animation', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::HEADING,
'separator' => 'before',
)
);
$this->add_control(
'button_animation',
array(
'label' => __( 'Animation', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => '',
'options' => array(
'' => __( 'None', 'a1-tools' ),
'pulse' => __( 'Pulse', 'a1-tools' ),
'heartbeat' => __( 'Heartbeat', 'a1-tools' ),
'bounce' => __( 'Bounce', 'a1-tools' ),
'shake' => __( 'Shake', 'a1-tools' ),
'glow' => __( 'Glow', 'a1-tools' ),
'wiggle' => __( 'Wiggle', 'a1-tools' ),
'flash' => __( 'Flash', 'a1-tools' ),
'swing' => __( 'Swing', 'a1-tools' ),
'rubberband' => __( 'Rubber Band', 'a1-tools' ),
'tada' => __( 'Tada', 'a1-tools' ),
),
)
);
$this->add_control(
'animation_speed',
array(
'label' => __( 'Speed', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'normal',
'options' => array(
'slow' => __( 'Slow', 'a1-tools' ),
'normal' => __( 'Normal', 'a1-tools' ),
'fast' => __( 'Fast', 'a1-tools' ),
),
'condition' => array( 'button_animation!' => '' ),
'selectors_dictionary' => array(
'slow' => '2.5s',
'normal' => '1.5s',
'fast' => '0.8s',
),
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button' => 'animation-duration: {{VALUE}};',
),
)
);
$this->add_control(
'animation_hover_only',
array(
'label' => __( 'Only on Hover', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'return_value' => 'yes',
'default' => '',
'condition' => array( 'button_animation!' => '' ),
)
);
$this->add_control(
'glow_color',
array(
'label' => __( 'Glow Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '',
'condition' => array( 'button_animation' => 'glow' ),
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button' => '--a1-glow-color: {{VALUE}};',
),
)
);
$this->end_controls_section();
// ── Style: Button ───────────────────────────────────────────
$this->start_controls_section(
'button_style_section',
array(
'label' => __( 'Button', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
)
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
array(
'name' => 'button_typography',
'selector' => '{{WRAPPER}} .a1tools-cta-button',
)
);
$this->start_controls_tabs( 'button_style_tabs' );
// ── Normal ──
$this->start_controls_tab(
'button_normal_tab',
array( 'label' => __( 'Normal', 'a1-tools' ) )
);
$this->add_control(
'text_color',
array(
'label' => __( 'Text Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#ffffff',
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button' => 'color: {{VALUE}};',
'{{WRAPPER}} .a1tools-cta-button svg' => 'fill: {{VALUE}};',
),
)
);
$this->add_control(
'bg_color',
array(
'label' => __( 'Background Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#E53935',
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button' => 'background-color: {{VALUE}};',
),
)
);
$this->add_group_control(
\Elementor\Group_Control_Border::get_type(),
array(
'name' => 'button_border',
'selector' => '{{WRAPPER}} .a1tools-cta-button',
)
);
$this->add_group_control(
\Elementor\Group_Control_Box_Shadow::get_type(),
array(
'name' => 'button_shadow',
'selector' => '{{WRAPPER}} .a1tools-cta-button',
)
);
$this->end_controls_tab();
// ── Hover ──
$this->start_controls_tab(
'button_hover_tab',
array( 'label' => __( 'Hover', 'a1-tools' ) )
);
$this->add_control(
'hover_text_color',
array(
'label' => __( 'Text Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button:hover' => 'color: {{VALUE}};',
'{{WRAPPER}} .a1tools-cta-button:hover svg' => 'fill: {{VALUE}};',
),
)
);
$this->add_control(
'hover_bg_color',
array(
'label' => __( 'Background Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button:hover' => 'background-color: {{VALUE}};',
),
)
);
$this->add_control(
'hover_border_color',
array(
'label' => __( 'Border Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button:hover' => 'border-color: {{VALUE}};',
),
'condition' => array( 'button_border_border!' => '' ),
)
);
$this->add_group_control(
\Elementor\Group_Control_Box_Shadow::get_type(),
array(
'name' => 'button_hover_shadow',
'selector' => '{{WRAPPER}} .a1tools-cta-button:hover',
)
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_control(
'border_radius',
array(
'label' => __( 'Border Radius', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'separator' => 'before',
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
)
);
$this->add_control(
'button_padding',
array(
'label' => __( 'Padding', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', 'em' ),
'default' => array(
'top' => '12',
'right' => '24',
'bottom' => '12',
'left' => '24',
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
)
);
$this->end_controls_section();
// ── Style: Icon ─────────────────────────────────────────────
$this->start_controls_section(
'icon_style_section',
array(
'label' => __( 'Icon', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
)
);
$this->add_control(
'icon_size',
array(
'label' => __( 'Size', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array( 'min' => 10, 'max' => 60, 'step' => 1 ),
),
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-icon' => 'font-size: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .a1tools-cta-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
),
)
);
$this->add_control(
'icon_spacing',
array(
'label' => __( 'Spacing', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array( 'min' => 0, 'max' => 30, 'step' => 1 ),
),
'default' => array( 'unit' => 'px', 'size' => 8 ),
'selectors' => array(
'{{WRAPPER}} .a1tools-cta-button' => 'gap: {{SIZE}}{{UNIT}};',
),
)
);
$this->end_controls_section();
}
// ────────────────────────────────────────────────────────────────
// Render
// ────────────────────────────────────────────────────────────────
protected function render() {
$settings = $this->get_settings_for_display();
$phone = $this->get_phone();
$tel_url = $phone ? 'tel:' . preg_replace( '/[^0-9+]/', '', $phone ) : '';
$use_custom = 'yes' === ( $settings['use_custom_text'] ?? '' );
$text = $use_custom && ! empty( $settings['custom_text'] ) ? $settings['custom_text'] : $phone;
$icon_pos = $settings['icon_position'] ?? 'left';
$has_icon = ! empty( $settings['icon']['value'] );
$icon_html = '';
if ( $has_icon ) {
ob_start();
echo '';
\Elementor\Icons_Manager::render_icon( $settings['icon'], array( 'aria-hidden' => 'true' ) );
echo '';
$icon_html = ob_get_clean();
}
$animation = $settings['button_animation'] ?? '';
$hover_only = 'yes' === ( $settings['animation_hover_only'] ?? '' );
$btn_class = 'a1tools-cta-button';
if ( $animation ) {
if ( $hover_only ) {
$btn_class .= ' a1tools-anim-hover a1tools-anim-hover--' . $animation;
} else {
$btn_class .= ' a1tools-anim--' . $animation;
}
}
echo '';
}
protected function content_template() {
$phone = $this->get_phone();
?>
<#
var phone = ;
var useCustom = settings.use_custom_text === 'yes';
var text = ( useCustom && settings.custom_text ) ? settings.custom_text : phone;
var iconPos = settings.icon_position || 'left';
var hasIcon = settings.icon && settings.icon.value;
var iconHTML = '';
if ( hasIcon ) {
var rendered = elementor.helpers.renderIcon( view, settings.icon, { 'aria-hidden': 'true' }, 'i', 'object' );
if ( rendered && rendered.rendered ) {
iconHTML = '' + rendered.value + '';
}
}
var anim = settings.button_animation || '';
var hoverOnly = settings.animation_hover_only === 'yes';
var btnClass = 'a1tools-cta-button';
if ( anim ) {
btnClass += hoverOnly ? ' a1tools-anim-hover a1tools-anim-hover--' + anim : ' a1tools-anim--' + anim;
}
#>