WordPress.org
Get WordPress

Plugin Directory

Changeset 3442508


Ignore:
Timestamp:
01/19/2026 12:08:35 PM (2 months ago)
Author:
engramium
Message:

readme.txt

Location:
poppable
Files:
41 added
4 deleted
2 edited

Legend:

Unmodified
Added
Removed

  • poppable/trunk/poppable.php

    r2466793 r3442508  
    11<?php
    2 /*
    3 Plugin Name:   Poppable
    4 Plugin URI:    https://wordpress.org/plugins/poppable/
    5 Description:   Exit Intent PopUp Plugin
    6 Author:        Engramium
    7 Author URI:    www.engramium.com/
    8 Version:       0.2
    9 License:       GPLv2
    10 License URI:   https://www.gnu.org/licenses/gpl-2.0.html
    11 */
     2/**
     3 * Plugin Name:       Poppable - The Easy Way to Add a Video Modal
     4 * Description:       Quickly add a button displaying a video in a popup.
     5 * Version:           1.0.0
     6 * Requires at least: 6.7
     7 * Requires PHP:      7.4
     8 * Author:            Engramium
     9 * License:           GPL-2.0-or-later
     10 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
     11 * Text Domain:       poppable
     12 *
     13 * @package CreateBlock
     14 */
    1215
    13 if ( ! defined( 'ABSPATH' ) )
    14     exit;
     16if ( ! defined( 'ABSPATH' ) ) {
     17    exit; // Exit if accessed directly.
     18}
    1519
    16 function engramium_poppable_exit_popup_menu() {
    17      add_menu_page(
    18          __( 'Poppable Exit Popup Settings', 'textdomain' ),
    19          __( 'Poppable','textdomain' ),
    20          'manage_options',
    21          'engramium-poppable-exit-popup-settings',
    22          'engramium_poppable_exit_popup_settings_page',
    23          'dashicons-format-status'
    24         ); 
    25 }
    26 add_action('admin_menu', 'engramium_poppable_exit_popup_menu');
     20/**
     21 * Main plugin class for Poppable Video Modal.
     22 */
     23class PoppableVideoModal {
    2724
    28 function engramium_poppable_exit_popup_settings_page() { ?>
    29 <style type="text/css">
    30 .bg{
    31      margin-top: 2em!important;
    32      background-color: #fff;
    33      box-shadow: 0 0 4px 1px #DAD2D2;
    34      padding: 15px 20px!important;
     25    public function __construct() {
     26        add_action( 'init', array( $this, 'register_blocks' ) );
    3527    }
    36 </style>
    37 <div class="wrap bg">
    38 <h2>Poppable: Show PopUp whilw user exit the page</h2>
    39 <form method="post" action="options.php">
    40     <?php
    41     settings_fields( 'engramium-poppable-exit-popup-settings' );
    42     do_settings_sections( 'engramium-poppable-exit-popup-settings' );
    43     ?>
    44     <table class="form-table">
    45         <tr valign="top">
    46             <th scope="row"><label for="engramium_poppable_exit_popup_box">Popup Box </label></th>
    47             <td>
    48                 <input type="checkbox" name="engramium_poppable_exit_popup_box" value="true" <?php echo ( get_option('engramium_poppable_exit_popup_box') == true ) ? ' checked="checked" />' : ' />'; ?><br /><small>Only show on Front page/Home page.</small>
    49             </td>
    50         </tr>
    51          <tr valign="top">
    52             <th scope="row">Title Background Color #</th>
    53             <td>
    54                 <input type="text" size="10" name="engramium_poppable_exit_popup_box_title_color" id="engramium_poppable_exit_popup_box_title_color" value="<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_title_color') ); ?>" data-default-color="#f0f1f2" /><br /><small>Unlimited Colors</small>
    55             </td>
    56         </tr>
    57         <tr valign="top">
    58             <th scope="row">Title (Text)</th>
    59             <td>
    60                 <input type="text" size="40" name="engramium_poppable_exit_popup_box_modal_titlee" value="<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_titlee') ); ?>" /><br /><small>Ex. Welcome Text!</small>
    61             </td>
    62         </tr>       
    6328
    64         <tr valign="top">
    65             <th scope="row">Body Background Color #</th>
    66             <td>
    67                 <input type="text" size="10" name="engramium_poppable_exit_popup_box_bg_color" id="engramium_poppable_exit_popup_box_bg_color" value="<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_bg_color') ); ?>" data-default-color="#f0f1f2" /><br /><small>Unlimited Colors</small>
    68             </td>
    69         </tr>
    70 
    71         <tr valign="top">
    72             <th scope="row">Body (Content)</th>
    73             <td>
    74             <?php wp_editor( get_option('engramium_poppable_exit_popup_box_boody'), 'engramium_poppable_exit_popup_box_boody' );?>
    75             </td>
    76         </tr>
    77 
    78           <tr valign="top">
    79             <th scope="row">Footer (Text)</th>
    80             <td>
    81                 <input type="text" size="40" name="engramium_poppable_exit_popup_box_foooter" value="<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_foooter') ); ?>" /><br /><small>Ex. Thank You!</small>
    82             </td>
    83         </tr>
    84 
    85         <tr valign="top">
    86             <th scope="row">Cookie Expire (days)</th>
    87             <td>
    88                 <input type="text" size="10" name="engramium_poppable_exit_popup_box_coookie_expire" value="<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_coookie_expire') ); ?>" /><br /><small>Ex. 10 (Set -1 for per session)</small>
    89             </td>
    90             </tr>
    91         <tr valign="top">
    92             <th scope="row">Modal Width (px)</th>
    93             <td>
    94                 <input type="text" size="10" name="engramium_poppable_exit_popup_box_modal_width" value="<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_width') ); ?>" /><br /><small>Ex. 500</small>
    95             </td>
    96         </tr>
    97         <tr valign="top">
    98             <th scope="row">Modal Height (px)</th>
    99             <td>
    100                 <input type="text" size="10" name="engramium_poppable_exit_popup_box_modal_height" value="<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_height') ); ?>" /><br /><small>Ex. 300</small>
    101             </td>
    102         </tr>
    103 
    104 
    105        
    106     </table>
    107     <?php
    108     submit_button();
    109     ?>
    110 </form>
    111 
    112 </div>
    113 <?php }
    114 
    115 function engramium_poppable_exit_popup_settings() {
    116     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box_coookie_expire' );
    117     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box_modal_width' );
    118     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box_modal_height' );
    119     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box_title_color' );
    120     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box_bg_color' );
    121     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box_modal_titlee' );
    122     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box_boody' );
    123     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box_foooter' );
    124     register_setting( 'engramium-poppable-exit-popup-settings', 'engramium_poppable_exit_popup_box' );
    125 }
    126 add_action( 'admin_init', 'engramium_poppable_exit_popup_settings' );
    127 
    128 function engramium_poppable_exit_popup_front_dependencies() {
    129 
    130     wp_register_script( 'engramium-poppable-exit-popup-js', plugins_url('js/engramium-poppable-exit-popup.js', __FILE__), array('jquery'), '1.1', false );
    131     wp_enqueue_script( 'engramium-poppable-exit-popup-js' );
    132 
    133     wp_register_style( 'engramium-poppable-exit-popup-css', plugins_url('css/engramium-poppable-exit-popup.css', __FILE__) );
    134     wp_enqueue_style( 'engramium-poppable-exit-popup-css' );
    135 
    136     wp_register_style( 'engramium-poppable-exit-popup-custom-css', plugins_url('css/custom.css', __FILE__) );
    137     wp_enqueue_style( 'engramium-poppable-exit-popup-custom-css' );
    138 }
    139 add_action( 'wp_enqueue_scripts', 'engramium_poppable_exit_popup_front_dependencies' );
    140 
    141 function engramium_poppable_exit_popup_back_dependencies() {
    142 
    143     wp_enqueue_style( 'wp-color-picker' );
    144 
    145     wp_register_script( 'engramium-poppable-exit-popup-custom-js', plugins_url('js/custom.js', __FILE__), array('wp-color-picker'), false, true );
    146     wp_enqueue_script( 'engramium-poppable-exit-popup-custom-js' );
    147 }
    148 add_action( 'admin_enqueue_scripts', 'engramium_poppable_exit_popup_back_dependencies' );
    149 
    150 function engramium_poppable_exit_popup() {
    151    
    152     if(!isset($_COOKIE['viewedExitPopupWP']) && $_COOKIE['viewedExitPopupWP'] != 'true') {
    153    
    154         $engramium_poppable_exit_popup_box_modal_click_outside = "
    155               $('body, .close_icon').on('click', function() {
    156                 $('#poppable-exitpopup-modal').hide();
    157               });
    158                 ";
    159 ?>
    160 <!-- Exit Popup -->
    161 <?php if(get_option('engramium_poppable_exit_popup_box') == true){
    162 
    163         if(is_front_page() || is_home()){
    164     ?>
    165     <div id='poppable-exitpopup-modal'>
    166       <div class='underlay'></div>
    167       <div class='poppable-exitpopup-modal-window' style='width:<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_width') ); ?>px !important; height:<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_height') ); ?>px !important;background-color:<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_bg_color') ); ?> !important;'>
    168             <a href="javascript:void(0);" class="close_icon" title="Close"></a>
    169         <?php if( !empty( get_option('engramium_poppable_exit_popup_box_modal_titlee') ) ) { ?>
    170         <div class='modal-title' style='background-color:<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_title_color') ); ?> !important;'>
    171           <h3><?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_titlee') ); ?></h3>
    172         </div>
    173         <?php } ?>
    174         <div class='modal-body'>
    175             <?php echo do_shortcode(get_option('engramium_poppable_exit_popup_box_boody')); ?>
    176         </div>
    177         <div class='poppable-exitpopup-modal-footer'>
    178           <p><?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_foooter') ); ?></p>
    179         </div>
    180 
    181       </div>
    182     </div>
    183 
    184     <script type='text/javascript'>
    185       var _exitpopup = exitpopup(document.getElementById('poppable-exitpopup-modal'), {
    186         aggressive: true,
    187         timer: 0,
    188         sensitivity: 20,
    189         delay: 0,
    190         sitewide: true,
    191         cookieExpire: <?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_coookie_expire') ); ?>,
    192         callback: function() { console.log('exitpopup fired!'); }
    193       });
    194       jQuery(document).ready(function($) {
    195       <?php echo $engramium_poppable_exit_popup_box_modal_click_outside; ?>
    196       $('#poppable-exitpopup-modal .poppable-exitpopup-modal-footer').on('click', function() {
    197        // $('#poppable-exitpopup-modal').hide();
    198       });
    199       $('#poppable-exitpopup-modal .poppable-exitpopup-modal-window').on('click', function(e) {
    200         e.stopPropagation();
    201       });
    202       });
    203     </script>
    204 
    205     <?php }
    206             }else{
    207 
    208 ?>
    209     <div id='poppable-exitpopup-modal'>
    210       <div class='underlay'></div>
    211       <div class='poppable-exitpopup-modal-window' style='width:<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_width') ); ?>px !important; height:<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_height') ); ?>px !important;background-color:<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_bg_color') ); ?> !important;'>
    212             <a href="javascript:void(0);" class="close_icon" title="Close"></a>
    213         <?php if( !empty( get_option('engramium_poppable_exit_popup_box_modal_titlee') ) ) { ?>
    214         <div class='modal-title' style='background-color:<?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_title_color') ); ?> !important;'>
    215           <h3><?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_modal_titlee') ); ?></h3>
    216         </div>
    217         <?php } ?>
    218         <div class='modal-body'>
    219             <?php echo do_shortcode(get_option('engramium_poppable_exit_popup_box_boody')); ?>
    220         </div>
    221         <div class='poppable-exitpopup-modal-footer'>
    222           <p><?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_foooter') ); ?></p>
    223         </div>
    224 
    225       </div>
    226     </div>
    227 
    228     <script type='text/javascript'>
    229         var iScrollPos = 0;
    230         var counter = 0;
    231 
    232       var _exitpopup = exitpopup(document.getElementById('poppable-exitpopup-modal'), {
    233         aggressive: true,
    234         timer: 0,
    235         sensitivity: 20,
    236         delay: 0,
    237         sitewide: true,
    238         cookieExpire: <?php echo esc_attr( get_option('engramium_poppable_exit_popup_box_coookie_expire') ); ?>,
    239         callback: function() { console.log('exitpopup fired!'); }
    240       });
    241       jQuery(document).ready(function($) {
    242       <?php echo $engramium_poppable_exit_popup_box_modal_click_outside; ?>
    243       $('#poppable-exitpopup-modal .poppable-exitpopup-modal-footer').on('click', function() {
    244        // $('#poppable-exitpopup-modal').hide();
    245       });
    246       $('#poppable-exitpopup-modal .poppable-exitpopup-modal-window').on('click', function(e) {
    247         e.stopPropagation();
    248       });
    249 
    250       if ($(window).width() < 700){
    251 
    252         <?php if( get_option('engramium_poppable_exit_popup_box_coookie_expire') == '-1' ){?>
    253 
    254                 $(window).scroll(function () {               
    255                     var iCurScrollPos = $(this).scrollTop();
    256                     if (iCurScrollPos > iScrollPos) {    } else {
    257                         if(counter == 0){
    258                             $('#poppable-exitpopup-modal').show();
    259                             counter++; 
    260                         }
    261                     }
    262                     iScrollPos = iCurScrollPos;
    263                 });
    264 
    265         <?php } else { ?>
    266 
    267 
    268         if(localStorage.getItem("optname") != 'WPhost') {
    269                 $(window).scroll(function () {
    270                     var iCurScrollPos = $(this).scrollTop();
    271                     if (iCurScrollPos > iScrollPos) {    } else {
    272                         if(counter == 0){
    273                             $('#poppable-exitpopup-modal').show();
    274                             counter++; 
    275                             localStorage.setItem("optname", "WPhost");
    276                         }
    277                     }
    278                     iScrollPos = iCurScrollPos;
    279                 });
     29    public function register_blocks() {
     30        if ( function_exists( 'wp_register_block_types_from_metadata_collection' ) ) {
     31            wp_register_block_types_from_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
     32            return;
    28033        }
    28134
    282             <?php } ?>
    283 
     35        if ( function_exists( 'wp_register_block_metadata_collection' ) ) {
     36            wp_register_block_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
    28437        }
    28538
    286       });
    287     </script>
     39        $manifest_data = require __DIR__ . '/build/blocks-manifest.php';
     40        foreach ( array_keys( $manifest_data ) as $block_type ) {
     41            register_block_type( __DIR__ . "/build/{$block_type}" );
     42        }
     43    }
     44}
    28845
    289     <?php
    290 
    291                 } ?>
    292 <!-- Poppable End Exit Popup -->
    293 <?php
    294     }
    295     }
    296 add_action( 'wp_footer', 'engramium_poppable_exit_popup', 10 );
     46new PoppableVideoModal();

  • poppable/trunk/readme.txt

    r2466793 r3442508  
    1 === Poppable ===
    2 Contributors:       engramium
    3 Tags:               exitpopup, ExitIntent
    4 Requires at least:  3.8
    5 Tested up to:       5.6
    6 Stable tag:         0.2
    7 License:            GPLv2
    8 License URI:        https://www.gnu.org/licenses/gpl-2.0.html
     1=== Poppable - The Easy Way to Add a Video Modal ===
     2Contributors:      engramium
     3Tags:              video block, video modal, popup, lightbox, play button
     4Requires at least: 6.7
     5Tested up to:      6.9
     6Requires PHP:      7.4
     7Stable tag:        1.0.0
     8License: GPLv2 or later
     9License URI: https://www.gnu.org/licenses/gpl-2.0.html
    910
    10 Exit Intent Popup appears on the screen when the cursor moves closer the cross button in a tab of browsers. Poppable exit intent popup plugin will help you display custom messages to your site visitors when they show an intent to leave the site.
     11Display YouTube videos in a beautiful, customizable modal popup triggered by any element on your page.
    1112
    1213== Description ==
    13 If you are looking for an efficient conversion tool, this one could surely help. More importantly, it is particularly easy to work with this plugin. Poppable Exit Popup automatically detects the mouse behaviors on desktop and scroll behaviour on mobile to show a pop up window which indicates your visitors are about to leave your site.
    1414
     15Poppable is a lightweight Gutenberg block that lets you display YouTube videos in a sleek modal popup. Simply add the block, paste your YouTube URL, and connect it to any trigger element on your page.
     16
     17**Key Features:**
     18
     19* **Trigger from Any Element** – Assign a trigger ID to any element (button, image, text) and clicking it opens the video modal
     20* **Multiple YouTube URL Formats** – Supports youtube.com/watch?v=, youtu.be/, and youtube.com/embed/ formats
     21* **Autoplay Support** – Optionally start playing the video automatically when the modal opens
     22* **Customizable Modal Width** – Set the content width using px, %, vw, or any CSS unit
     23* **Multiple Close Options:**
     24  * Close button (X) in the corner
     25  * Click outside to close
     26  * Press ESC key to close
     27* **Responsive Design** – Videos maintain 16:9 aspect ratio on all screen sizes
     28* **Body Scroll Lock** – Page scrolling is disabled when the modal is open for a focused viewing experience
     29* **Lightweight** – No jQuery dependencies, built with vanilla JavaScript
     30
     31**Development & Source Code:**
     32Poppable is open-source and developed publicly on GitHub.
     33
     34GitHub repository: https://github.com/Engramium/poppable
     35
     36== Installation ==
     37
     381. Upload the plugin files to the `/wp-content/plugins/poppable` directory, or install the plugin through the WordPress plugins screen directly.
     392. Activate the plugin through the 'Plugins' screen in WordPress.
     403. In the block editor, search for "Poppable" and add the block to your page.
     41
     42== How to Use ==
     43
     441. Add the **Poppable** block anywhere on your page (it will be hidden on the frontend).
     452. In the block settings panel, enter your **YouTube Video URL**.
     463. Set a unique **Trigger ID** (e.g., `poppable-video-modal`).
     474. Add the same trigger ID as a CSS class to any element you want to use as the trigger (e.g., a button with class `poppable-video-modal`).
     485. Configure your preferred close options and modal width.
     496. Save and preview your page!
    1550
    1651== Frequently Asked Questions ==
    1752
    18 = What are the requirements to use Poppable? =
    19 You only need to have at least 4.4 or higher version of WordPress on your website.
     53= How do I trigger the modal? =
     54
     55Add the trigger ID you set in the block settings as a CSS class to any element. For example, if your trigger ID is `my-video-trigger`, add the class `my-video-trigger` to a button or image.
     56
     57= Can I have multiple video modals on one page? =
     58
     59Yes! Add multiple Poppable blocks with different trigger IDs, then assign each trigger ID to different elements on your page.
     60
     61= What YouTube URL formats are supported? =
     62
     63Poppable supports all common YouTube URL formats:
     64* `https://www.youtube.com/watch?v=VIDEO_ID`
     65* `https://youtu.be/VIDEO_ID`
     66* `https://www.youtube.com/embed/VIDEO_ID`
     67
     68= Does the video stop when I close the modal? =
     69
     70Yes, the video automatically stops and resets when the modal is closed.
     71
     72== Changelog ==
     73
     74= 1.0.0 =
     75* Converted to YouTube Video Popup Block
     76
     77= 0.1 =
     78* Initial public release
    2079
    2180
    22 == Installation ==
    23 Poppable has been developed to be really simple to use and requires little configuration and setting changes to start creating & managing PopUp.
    24 
    25 Either download the plugin directly from your WordPress admin or upload the .zip file.
    26 Click install, once installed, activate and you’re done!
    27 Once installed and activated you’ll find a new "Poppable" menu in your admin menu.
    28 
    29 
    30 == Changelog ==
    31 = Version 0.1 =
    32 1. Initial public release
Note: See TracChangeset for help on using the changeset viewer.