Introduction

EWM Modal CTA is a professional WordPress plugin that enables advanced creation and management of interactive modals. It is designed for lead capture through multi-step forms and for displaying dynamic announcements, with deep integration with WooCommerce to boost sales.

Its key features include a Custom Post Type (ew_modal) for organized management, a visual builder based on tabs, an automatic injection system to display modals without shortcodes, and an architecture optimized for performance and security.

Installation & Creation

Plugin Installation

1. Download the .zip file for the EWM Modal CTA plugin.

2. In your WordPress dashboard, go to Plugins > Add New.

3. Click the Upload Plugin button at the top of the page.

4. Select the .zip file you downloaded and click Install Now.

5. Once installed, click Activate Plugin.

Creating a New Modal

Creating a modal is a centralized process thanks to the visual builder:

1. In the administration menu, go to EWM Modals > Modal Builder.

2. If it’s a new modal, you’ll be directed to the builder. If you want to edit an existing one, go to EWM Modals > All Modals and click “Edit”.

3. The builder uses a tabbed system to configure all aspects of the modal.

Using the Modal Builder

The visual builder is the core of the plugin, allowing you to intuitively configure every detail of your modal.

General Tab

Here you define the basic configuration of the modal:

• Modal Title: The internal title to identify your modal in the administrator area.
• Modal Mode: Choose between “Multi-Step Form” (for data capture) or “Announcement/Notification” (to display a simple message).
• Modal Active: Globally activate or deactivate the modal.
• Use global configuration: Allows the modal to be displayed automatically according to the rules in the “Triggers” and “Advanced” tabs. If deactivated, it will only work with a shortcode.

Steps & Fields Tab

This section allows you to build the content of the modal:

• Add Steps: For form modals, you can create multiple steps to divide data capture. Each step has its own title, subtitle, and description.
• Add Fields: Within each step, you can add form fields such as text, email, phone, textarea, select boxes, radios, and checkboxes.
• Success Messages: Configure the title and message that will be displayed to the user after successfully completing the form.

Design Tab

Customize the appearance of your modal:

• Modal Size: Define the width of the modal (Small, Medium, Large).
• Animation: Choose the entrance animation (Fade, Slide, Zoom).
• Colors: Select primary, secondary, and background colors to match your brand identity.

Display & Triggers

Control where, when, and how your modals appear.

Display Rules (Advanced Tab)

Define the conditions for automatic injection:

• Target Devices: Choose whether the modal will be displayed on desktop, tablet, or mobile.
• Target Pages: Include or exclude the modal on specific pages (Home, Blog, specific pages).
• User Roles: Show the modal only to certain user roles (e.g., all, visitors only, administrators only).
• Omit on WC pages: Prevent general modals from appearing on WooCommerce product or category pages to avoid interfering with specific promotions.

Trigger Settings (Triggers Tab)

Define the actions that will activate the modal:

• Exit Intent: Displays when the user attempts to leave the page.
• Time Delay: Appears after a specified number of seconds.
• Scroll Trigger: Activates when the user has scrolled a percentage of the page.
• Manual Trigger: Allows activating the modal by clicking on a specific element (using data-ewm-modal="ID").
• Display Frequency: Controls how often the same user sees the modal (always, once per session, per day, etc.).

Using Shortcodes

For manual control, you can insert the modal anywhere in your content using its shortcode. After saving a modal, a unique shortcode will be generated that you can copy and paste.

Example: [ew_modal id="123"]

WooCommerce Integration

EWM Modal CTA includes specific functionalities to improve conversions in WooCommerce stores.

Activation & Configuration

1. In the General tab of the builder, check the “WooCommerce Integration” box.

2. This will activate a new tab named WooCommerce and adapt the interface to create a promotion modal.

3. In the WooCommerce tab, you can select an existing discount coupon from your store.

Creating a Promotion Modal

Once integration is activated:

• Coupon Selection: Choose a coupon, and the plugin will display its details.
• Promotion Content: Write a title and description for the offer. You can use the “Auto-fill” button to generate text based on the coupon details.
• Urgency Timer: Enable a countdown timer to create a sense of urgency and motivate purchase.
• Auto-apply Coupon: Configure the CTA button to apply the coupon to the cart and redirect the user.

These modals are designed to appear on product pages and avoid conflicts, for example, not showing if a similar coupon is already applied.

Submissions Management

All data submitted through modal forms is securely saved and can be easily managed.

1. In the administration menu, go to EWM Modals > Submissions.

2. You will see a list of all submissions. Each entry shows the submitted data, the originating modal, and the page from which the form was submitted.

3. You can click on each submission to view full details.

Advanced Features

Security & Sanitization

The plugin implements a custom sanitization system that protects against XSS attacks without removing the necessary HTML for forms and modal content to function correctly. All inputs are validated, and field content is securely sanitized.

Performance

EWM Modal CTA is optimized not to affect your site’s speed. Scripts and styles are only loaded on pages where an active modal is present, thanks to an intelligent detection system that works with both shortcodes and automatic injection.

REST API

The plugin exposes several endpoints in the WordPress REST API for functionalities such as frontend form submissions, retrieving user data for auto-filling, and querying WooCommerce modal visibility. This allows for advanced integrations and decoupled (headless) operation.