{"id":5,"date":"2017-02-04T14:35:48","date_gmt":"2017-02-04T14:35:48","guid":{"rendered":"http:\/\/demo.awplife.com\/model-popup-box-pemium\/?page_id=5"},"modified":"2026-02-19T09:18:01","modified_gmt":"2026-02-19T09:18:01","slug":"modal-popup-box-premium","status":"publish","type":"page","link":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/","title":{"rendered":"Modal Popup Box Premium"},"content":{"rendered":"\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n        <div class=\"mpb-demo-container\" id=\"mpb-demo-container\">\r\n            <div class=\"mpb-demo-header\">\r\n                <h2>Modal Popup Box Premium - Live Demo<\/h2>\r\n                <p>Adjust the settings below to see instant changes in the modal preview!<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"mpb-demo-body\">\r\n                <!-- Settings Panel -->\r\n                <div class=\"mpb-demo-settings\">\r\n                            <div class=\"mpb-demo-settings-inner\">\r\n            <!-- Tabs -->\r\n            <div class=\"mpb-demo-tabs\">\r\n                <button class=\"mpb-demo-tab active\" data-tab=\"trigger\">Trigger<\/button>\r\n                <button class=\"mpb-demo-tab\" data-tab=\"header\">Header<\/button>\r\n                <button class=\"mpb-demo-tab\" data-tab=\"content\">Content<\/button>\r\n                <button class=\"mpb-demo-tab\" data-tab=\"buttons\">Buttons<\/button>\r\n                <button class=\"mpb-demo-tab\" data-tab=\"general\">General<\/button>\r\n                <button class=\"mpb-demo-tab\" data-tab=\"visibility\">Visibility<\/button>\r\n            <\/div>\r\n\r\n            <!-- Tab Panels -->\r\n            <div class=\"mpb-demo-tab-panels\">\r\n                <!-- Trigger Tab -->\r\n                <div class=\"mpb-demo-tab-panel active\" id=\"tab-trigger\">\r\n                            <div class=\"mpb-demo-field\">\r\n            <label>Show Modal<\/label>\r\n            <div class=\"mpb-demo-radio-group\">\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_show_modal\" value=\"onclick\"  checked='checked'>\r\n                        <span>On Button Click<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_show_modal\" value=\"onload\" >\r\n                        <span>On Page Load<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_show_modal\" value=\"exit_intent\" >\r\n                        <span>Exit Intent<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_show_modal\" value=\"on_scroll\" >\r\n                        <span>On Scroll<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_show_modal\" value=\"on_inactivity\" >\r\n                        <span>On Inactivity<\/span>\r\n                    <\/label>\r\n                            <\/div>\r\n        <\/div>\r\n        \r\n                    <div id=\"mpb-trigger-settings-onclick\">\r\n                                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_main_button_text\">Button Text<\/label>\r\n            <input type=\"text\" id=\"mpb_main_button_text\"\r\n                name=\"mpb_main_button_text\" value=\"Click Me\" class=\"mpb-demo-input\">\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_main_button_size\">Button Size<\/label>\r\n            <select id=\"mpb_main_button_size\" name=\"mpb_main_button_size\" class=\"mpb-demo-select\">\r\n                                    <option value=\"btn btn-xs\" >Small                    <\/option>\r\n                                    <option value=\"btn btn-sm\" >Medium                    <\/option>\r\n                                    <option value=\"btn btn-lg\"  selected='selected'>Large                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_main_button_color\">Button Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#008EC2\"\r\n                    data-target=\"mpb_main_button_color\">\r\n                <input type=\"text\" id=\"mpb_main_button_color\" name=\"mpb_main_button_color\"\r\n                    value=\"#008EC2\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_main_button_text_color\">Button Text Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#ffffff\"\r\n                    data-target=\"mpb_main_button_text_color\">\r\n                <input type=\"text\" id=\"mpb_main_button_text_color\" name=\"mpb_main_button_text_color\"\r\n                    value=\"#ffffff\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                            <\/div>\r\n\r\n                    <div id=\"mpb-trigger-settings-scroll\" style=\"display:none;\">\r\n                                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_scroll_percent\">Scroll %<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_scroll_percent\" name=\"mpb_scroll_percent\"\r\n                    value=\"50\" min=\"10\"\r\n                    max=\"100\" step=\"5\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">50<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                            <\/div>\r\n\r\n                    <div id=\"mpb-trigger-settings-inactivity\" style=\"display:none;\">\r\n                                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_inactivity_seconds\">Inactivity (sec)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_inactivity_seconds\" name=\"mpb_inactivity_seconds\"\r\n                    value=\"5\" min=\"5\"\r\n                    max=\"120\" step=\"5\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">5<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                            <\/div>\r\n                <\/div>\r\n\r\n                <!-- Header Tab -->\r\n                <div class=\"mpb-demo-tab-panel\" id=\"tab-header\">\r\n                            <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_demo_title\">Modal Title<\/label>\r\n            <input type=\"text\" id=\"mpb_demo_title\"\r\n                name=\"mpb_demo_title\" value=\"Popup Box Demo\" class=\"mpb-demo-input\">\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label>Title Visibility<\/label>\r\n            <div class=\"mpb-demo-radio-group\">\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_title\" value=\"show\"  checked='checked'>\r\n                        <span>Show<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_title\" value=\"hide\" >\r\n                        <span>Hide<\/span>\r\n                    <\/label>\r\n                            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_header_font_size\">Font Size<\/label>\r\n            <select id=\"mpb_header_font_size\" name=\"mpb_header_font_size\" class=\"mpb-demo-select\">\r\n                                    <option value=\"12\" >12px                    <\/option>\r\n                                    <option value=\"14\" >14px                    <\/option>\r\n                                    <option value=\"16\" >16px                    <\/option>\r\n                                    <option value=\"18\" >18px                    <\/option>\r\n                                    <option value=\"20\" >20px                    <\/option>\r\n                                    <option value=\"22\" >22px                    <\/option>\r\n                                    <option value=\"24\"  selected='selected'>24px                    <\/option>\r\n                                    <option value=\"26\" >26px                    <\/option>\r\n                                    <option value=\"28\" >28px                    <\/option>\r\n                                    <option value=\"30\" >30px                    <\/option>\r\n                                    <option value=\"32\" >32px                    <\/option>\r\n                                    <option value=\"34\" >34px                    <\/option>\r\n                                    <option value=\"36\" >36px                    <\/option>\r\n                                    <option value=\"38\" >38px                    <\/option>\r\n                                    <option value=\"40\" >40px                    <\/option>\r\n                                    <option value=\"42\" >42px                    <\/option>\r\n                                    <option value=\"44\" >44px                    <\/option>\r\n                                    <option value=\"46\" >46px                    <\/option>\r\n                                    <option value=\"48\" >48px                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label>Alignment<\/label>\r\n            <div class=\"mpb-demo-radio-group\">\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_header_text_alignment\" value=\"text-left\" >\r\n                        <span>Left<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_header_text_alignment\" value=\"text-center\"  checked='checked'>\r\n                        <span>Center<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_header_text_alignment\" value=\"text-right\" >\r\n                        <span>Right<\/span>\r\n                    <\/label>\r\n                            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_header_font_color\">Font Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#ffffff\"\r\n                    data-target=\"mpb_header_font_color\">\r\n                <input type=\"text\" id=\"mpb_header_font_color\" name=\"mpb_header_font_color\"\r\n                    value=\"#ffffff\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_header_bg_color\">Background Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#0073AA\"\r\n                    data-target=\"mpb_header_bg_color\">\r\n                <input type=\"text\" id=\"mpb_header_bg_color\" name=\"mpb_header_bg_color\"\r\n                    value=\"#0073AA\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_animation_effect_header\">Animation<\/label>\r\n            <select id=\"mpb_animation_effect_header\" name=\"mpb_animation_effect_header\" class=\"mpb-demo-select\">\r\n                                    <option value=\"0\" >None                    <\/option>\r\n                                    <option value=\"bounce\"  selected='selected'>Bounce                    <\/option>\r\n                                    <option value=\"flash\" >Flash                    <\/option>\r\n                                    <option value=\"pulse\" >Pulse                    <\/option>\r\n                                    <option value=\"rubberBand\" >Rubber Band                    <\/option>\r\n                                    <option value=\"shake\" >Shake                    <\/option>\r\n                                    <option value=\"swing\" >Swing                    <\/option>\r\n                                    <option value=\"tada\" >Tada                    <\/option>\r\n                                    <option value=\"wobble\" >Wobble                    <\/option>\r\n                                    <option value=\"jello\" >Jello                    <\/option>\r\n                                    <option value=\"flip\" >Flip                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_animation_time_duration\">Duration (s)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_animation_time_duration\" name=\"mpb_animation_time_duration\"\r\n                    value=\"1\" min=\"0.5\"\r\n                    max=\"5\" step=\"0.5\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">1<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_header_border_bottom\">Border Bottom<\/label>\r\n            <select id=\"mpb_header_border_bottom\" name=\"mpb_header_border_bottom\" class=\"mpb-demo-select\">\r\n                                    <option value=\"none\"  selected='selected'>None                    <\/option>\r\n                                    <option value=\"1px solid rgba(255,255,255,0.2)\" >Light                    <\/option>\r\n                                    <option value=\"2px solid rgba(0,0,0,0.15)\" >Dark                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                        <\/div>\r\n\r\n                <!-- Content Tab -->\r\n                <div class=\"mpb-demo-tab-panel\" id=\"tab-content\">\r\n                            <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_demo_content\">Content<\/label>\r\n            <textarea id=\"mpb_demo_content\" name=\"mpb_demo_content\" class=\"mpb-demo-textarea\"\r\n                rows=\"3\">This is a live demo of the Modal Popup Box Premium plugin. Adjust the settings on the left to see instant changes!<\/textarea>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_content_font_color\">Font Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#333333\"\r\n                    data-target=\"mpb_content_font_color\">\r\n                <input type=\"text\" id=\"mpb_content_font_color\" name=\"mpb_content_font_color\"\r\n                    value=\"#333333\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_content_bg_color\">Background Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#ffffff\"\r\n                    data-target=\"mpb_content_bg_color\">\r\n                <input type=\"text\" id=\"mpb_content_bg_color\" name=\"mpb_content_bg_color\"\r\n                    value=\"#ffffff\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_content_padding\">Padding (px)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_content_padding\" name=\"mpb_content_padding\"\r\n                    value=\"20\" min=\"0\"\r\n                    max=\"50\" step=\"5\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">20<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                        <\/div>\r\n\r\n                <!-- Buttons Tab -->\r\n                <div class=\"mpb-demo-tab-panel\" id=\"tab-buttons\">\r\n                            <div class=\"mpb-demo-field\">\r\n            <label>Show Buttons<\/label>\r\n            <div class=\"mpb-demo-radio-group\">\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_buttons\" value=\"one\"  checked='checked'>\r\n                        <span>Button 1 Only<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_buttons\" value=\"two\" >\r\n                        <span>Button 2 Only<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_buttons\" value=\"both\" >\r\n                        <span>Both Buttons<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_buttons\" value=\"none\" >\r\n                        <span>None<\/span>\r\n                    <\/label>\r\n                            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label>Alignment<\/label>\r\n            <div class=\"mpb-demo-radio-group\">\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_buttons_alignment\" value=\"text-left\" >\r\n                        <span>Left<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_buttons_alignment\" value=\"text-center\"  checked='checked'>\r\n                        <span>Center<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_buttons_alignment\" value=\"text-right\" >\r\n                        <span>Right<\/span>\r\n                    <\/label>\r\n                            <\/div>\r\n        <\/div>\r\n                            <div class=\"mpb-demo-divider\"><span>Button 1<\/span><\/div>\r\n                            <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button1_text\">Text<\/label>\r\n            <input type=\"text\" id=\"mpb_button1_text\"\r\n                name=\"mpb_button1_text\" value=\"Close\" class=\"mpb-demo-input\">\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button1_size\">Size<\/label>\r\n            <select id=\"mpb_button1_size\" name=\"mpb_button1_size\" class=\"mpb-demo-select\">\r\n                                    <option value=\"btn btn-xs\" >Extra Small                    <\/option>\r\n                                    <option value=\"btn btn-sm\" >Small                    <\/option>\r\n                                    <option value=\"btn btn-default\"  selected='selected'>Medium                    <\/option>\r\n                                    <option value=\"btn btn-lg\" >Large                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button1_color\">Background<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#008EC2\"\r\n                    data-target=\"mpb_button1_color\">\r\n                <input type=\"text\" id=\"mpb_button1_color\" name=\"mpb_button1_color\"\r\n                    value=\"#008EC2\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button1_text_color\">Text Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#ffffff\"\r\n                    data-target=\"mpb_button1_text_color\">\r\n                <input type=\"text\" id=\"mpb_button1_text_color\" name=\"mpb_button1_text_color\"\r\n                    value=\"#ffffff\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button1_url\">URL<\/label>\r\n            <input type=\"text\" id=\"mpb_button1_url\"\r\n                name=\"mpb_button1_url\" value=\"\" class=\"mpb-demo-input\">\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_animation_effect_btn_1\">Animation<\/label>\r\n            <select id=\"mpb_animation_effect_btn_1\" name=\"mpb_animation_effect_btn_1\" class=\"mpb-demo-select\">\r\n                                    <option value=\"0\" >None                    <\/option>\r\n                                    <option value=\"bounce\"  selected='selected'>Bounce                    <\/option>\r\n                                    <option value=\"flash\" >Flash                    <\/option>\r\n                                    <option value=\"pulse\" >Pulse                    <\/option>\r\n                                    <option value=\"rubberBand\" >Rubber Band                    <\/option>\r\n                                    <option value=\"shake\" >Shake                    <\/option>\r\n                                    <option value=\"swing\" >Swing                    <\/option>\r\n                                    <option value=\"tada\" >Tada                    <\/option>\r\n                                    <option value=\"wobble\" >Wobble                    <\/option>\r\n                                    <option value=\"jello\" >Jello                    <\/option>\r\n                                    <option value=\"flip\" >Flip                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_animation_duration_btn_1\">Duration (s)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_animation_duration_btn_1\" name=\"mpb_animation_duration_btn_1\"\r\n                    value=\"1\" min=\"0.5\"\r\n                    max=\"5\" step=\"0.5\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">1<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                            <div class=\"mpb-demo-divider\"><span>Button 2<\/span><\/div>\r\n                            <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button2_text\">Text<\/label>\r\n            <input type=\"text\" id=\"mpb_button2_text\"\r\n                name=\"mpb_button2_text\" value=\"Learn More\" class=\"mpb-demo-input\">\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button2_size\">Size<\/label>\r\n            <select id=\"mpb_button2_size\" name=\"mpb_button2_size\" class=\"mpb-demo-select\">\r\n                                    <option value=\"btn btn-xs\" >Extra Small                    <\/option>\r\n                                    <option value=\"btn btn-sm\" >Small                    <\/option>\r\n                                    <option value=\"btn btn-default\"  selected='selected'>Medium                    <\/option>\r\n                                    <option value=\"btn btn-lg\" >Large                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button2_color\">Background<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#0073AA\"\r\n                    data-target=\"mpb_button2_color\">\r\n                <input type=\"text\" id=\"mpb_button2_color\" name=\"mpb_button2_color\"\r\n                    value=\"#0073AA\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button2_text_color\">Text Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#ffffff\"\r\n                    data-target=\"mpb_button2_text_color\">\r\n                <input type=\"text\" id=\"mpb_button2_text_color\" name=\"mpb_button2_text_color\"\r\n                    value=\"#ffffff\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_button2_url\">URL<\/label>\r\n            <input type=\"text\" id=\"mpb_button2_url\"\r\n                name=\"mpb_button2_url\" value=\"https:\/\/awplife.com\" class=\"mpb-demo-input\">\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_animation_effect_btn_2\">Animation<\/label>\r\n            <select id=\"mpb_animation_effect_btn_2\" name=\"mpb_animation_effect_btn_2\" class=\"mpb-demo-select\">\r\n                                    <option value=\"0\" >None                    <\/option>\r\n                                    <option value=\"bounce\" >Bounce                    <\/option>\r\n                                    <option value=\"flash\" >Flash                    <\/option>\r\n                                    <option value=\"pulse\"  selected='selected'>Pulse                    <\/option>\r\n                                    <option value=\"rubberBand\" >Rubber Band                    <\/option>\r\n                                    <option value=\"shake\" >Shake                    <\/option>\r\n                                    <option value=\"swing\" >Swing                    <\/option>\r\n                                    <option value=\"tada\" >Tada                    <\/option>\r\n                                    <option value=\"wobble\" >Wobble                    <\/option>\r\n                                    <option value=\"jello\" >Jello                    <\/option>\r\n                                    <option value=\"flip\" >Flip                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_animation_duration_btn_2\">Duration (s)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_animation_duration_btn_2\" name=\"mpb_animation_duration_btn_2\"\r\n                    value=\"1\" min=\"0.5\"\r\n                    max=\"5\" step=\"0.5\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">1<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                        <\/div>\r\n\r\n                <!-- General Tab -->\r\n                <div class=\"mpb-demo-tab-panel\" id=\"tab-general\">\r\n                            <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_animation_effect_open_btn\">Open Animation<\/label>\r\n            <select id=\"mpb_animation_effect_open_btn\" name=\"mpb_animation_effect_open_btn\" class=\"mpb-demo-select\">\r\n                                    <option value=\"md-effect-1\" >Fade in &amp; Scale                    <\/option>\r\n                                    <option value=\"md-effect-2\" >Slide in (right)                    <\/option>\r\n                                    <option value=\"md-effect-3\" >Slide in (bottom)                    <\/option>\r\n                                    <option value=\"md-effect-4\"  selected='selected'>Newspaper                    <\/option>\r\n                                    <option value=\"md-effect-5\" >Fall                    <\/option>\r\n                                    <option value=\"md-effect-6\" >Side Fall                    <\/option>\r\n                                    <option value=\"md-effect-7\" >Sticky Up                    <\/option>\r\n                                    <option value=\"md-effect-8\" >3D Flip (horizontal)                    <\/option>\r\n                                    <option value=\"md-effect-9\" >3D Flip (vertical)                    <\/option>\r\n                                    <option value=\"md-effect-10\" >3D Sign                    <\/option>\r\n                                    <option value=\"md-effect-11\" >Super Scaled                    <\/option>\r\n                                    <option value=\"md-effect-12\" >Just Me                    <\/option>\r\n                                    <option value=\"md-effect-13\" >3D Slit                    <\/option>\r\n                                    <option value=\"md-effect-14\" >3D Rotate Bottom                    <\/option>\r\n                                    <option value=\"md-effect-15\" >3D Rotate In Left                    <\/option>\r\n                                    <option value=\"md-effect-16\" >Blur                    <\/option>\r\n                                    <option value=\"md-effect-17\" >Let me in                    <\/option>\r\n                                    <option value=\"md-effect-18\" >Make way!                    <\/option>\r\n                                    <option value=\"md-effect-19\" >Slip from top                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_open_close_speed\">Speed (ms)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_open_close_speed\" name=\"mpb_open_close_speed\"\r\n                    value=\"500\" min=\"100\"\r\n                    max=\"2000\" step=\"100\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">500<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_onload_time_delay\">Delay (ms)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_onload_time_delay\" name=\"mpb_onload_time_delay\"\r\n                    value=\"500\" min=\"0\"\r\n                    max=\"5000\" step=\"100\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">500<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_overlay_color\">Overlay Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#000000\"\r\n                    data-target=\"mpb_overlay_color\">\r\n                <input type=\"text\" id=\"mpb_overlay_color\" name=\"mpb_overlay_color\"\r\n                    value=\"rgba(0,0,0,0.6)\" class=\"mpb-demo-color\" data-rgba=\"true\">\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_overlay_opacity\">Overlay Opacity<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_overlay_opacity\" name=\"mpb_overlay_opacity\"\r\n                    value=\"0.6\" min=\"0\"\r\n                    max=\"1\" step=\"0.1\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">0.6<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_width\">Width (%)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_width\" name=\"mpb_width\"\r\n                    value=\"45\" min=\"15\"\r\n                    max=\"100\" step=\"5\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">45<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_height\">Height (px)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_height\" name=\"mpb_height\"\r\n                    value=\"300\" min=\"150\"\r\n                    max=\"600\" step=\"25\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">300<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_max_width\">Max Width (px)<\/label>\r\n            <input type=\"number\" id=\"mpb_max_width\"\r\n                name=\"mpb_max_width\" value=\"\" class=\"mpb-demo-input\">\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_border_radius\">Border Radius<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_border_radius\" name=\"mpb_border_radius\"\r\n                    value=\"8\" min=\"0\"\r\n                    max=\"30\" step=\"1\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">8<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_box_shadow\">Box Shadow<\/label>\r\n            <select id=\"mpb_box_shadow\" name=\"mpb_box_shadow\" class=\"mpb-demo-select\">\r\n                                    <option value=\"none\" >None                    <\/option>\r\n                                    <option value=\"small\" >Small                    <\/option>\r\n                                    <option value=\"medium\"  selected='selected'>Medium                    <\/option>\r\n                                    <option value=\"large\" >Large                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_close_btn_style\">Close Button<\/label>\r\n            <select id=\"mpb_close_btn_style\" name=\"mpb_close_btn_style\" class=\"mpb-demo-select\">\r\n                                    <option value=\"icon\"  selected='selected'>\u2715 Icon                    <\/option>\r\n                                    <option value=\"text\" >&quot;Close&quot; Text                    <\/option>\r\n                                    <option value=\"icon-text\" >\u2715 Icon + Text                    <\/option>\r\n                            <\/select>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_close_btn_color\">Close Button Color<\/label>\r\n            <div class=\"mpb-demo-color-wrap\">\r\n                <input type=\"color\" class=\"mpb-demo-color-native\" value=\"#333333\"\r\n                    data-target=\"mpb_close_btn_color\">\r\n                <input type=\"text\" id=\"mpb_close_btn_color\" name=\"mpb_close_btn_color\"\r\n                    value=\"#333333\" class=\"mpb-demo-color\" >\r\n            <\/div>\r\n        <\/div>\r\n                        <\/div>\r\n\r\n                <!-- Visibility Tab -->\r\n                <div class=\"mpb-demo-tab-panel\" id=\"tab-visibility\">\r\n                            <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_cookie_dismiss\">Cookie (days)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_cookie_dismiss\" name=\"mpb_cookie_dismiss\"\r\n                    value=\"0\" min=\"0\"\r\n                    max=\"365\" step=\"1\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">0<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label for=\"mpb_auto_close\">Auto Close (sec)<\/label>\r\n            <div class=\"mpb-demo-range-wrap\">\r\n                <input type=\"range\" id=\"mpb_auto_close\" name=\"mpb_auto_close\"\r\n                    value=\"0\" min=\"0\"\r\n                    max=\"60\" step=\"1\" class=\"mpb-demo-range\">\r\n                <output class=\"mpb-demo-range-value\">0<\/output>\r\n            <\/div>\r\n        <\/div>\r\n                <div class=\"mpb-demo-field\">\r\n            <label>Close on Overlay<\/label>\r\n            <div class=\"mpb-demo-radio-group\">\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_close_on_overlay\" value=\"yes\"  checked='checked'>\r\n                        <span>Yes<\/span>\r\n                    <\/label>\r\n                                    <label class=\"mpb-demo-radio\">\r\n                        <input type=\"radio\" name=\"mpb_close_on_overlay\" value=\"no\" >\r\n                        <span>No<\/span>\r\n                    <\/label>\r\n                            <\/div>\r\n        <\/div>\r\n                            <p class=\"mpb-demo-note\">\r\n                        <span class=\"dashicons dashicons-info\"><\/span>\r\n                        Note: Cookie and auto-close settings are demonstrated but may not fully work in this live preview.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n                        <\/div>\r\n\r\n                <!-- Preview Panel -->\r\n                <div class=\"mpb-demo-preview\">\r\n                    <div class=\"mpb-demo-preview-header\">\r\n                        Live Preview\r\n                        <button type=\"button\" id=\"mpb-demo-refresh-btn\" class=\"mpb-demo-refresh-btn\" title=\"Refresh Simulation\">\r\n                            <span class=\"dashicons dashicons-update\"><\/span>\r\n                        <\/button>\r\n                    <\/div>\r\n                    <div class=\"mpb-demo-preview-stage\" id=\"mpb-demo-preview-stage\">\r\n                                <div class=\"mpb-demo-modal-wrapper\" id=\"mpb-demo-wrapper\">\r\n            <!-- Trigger Button -->\r\n            <div class=\"mpb-demo-trigger-section\" id=\"mpb-demo-trigger-section\">\r\n                <div class=\"md-trigger-demo btn-demo-bg\" id=\"mpb-demo-trigger-btn\" data-modal=\"modal-demo\">\r\n                    Click Me                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Modal -->\r\n            <div class=\"md-modal-demo md-effect-4\" id=\"modal-demo\">\r\n                <div class=\"md-content-demo\">\r\n                    <button type=\"button\" class=\"md-close-demo mpb-close-x-demo\" id=\"mpb-demo-close-btn\">\r\n                        &times;                    <\/button>\r\n\r\n                    <h3 class=\"mbox-title-demo bounce animated text-center\"\r\n                        id=\"mpb-demo-title\">\r\n                        Popup Box Demo                    <\/h3>\r\n\r\n                    <div class=\"mpb-content-body-demo\" id=\"mpb-demo-content-body\">\r\n                        This is a live demo of the Modal Popup Box Premium plugin. Adjust the settings on the left to see instant changes!                    <\/div>\r\n\r\n                    <div class=\"mpb-buttons-demo text-center\" id=\"mpb-demo-buttons\">\r\n                        <a href=\"#\" class=\"btn-demo-1 animated bounce\"\r\n                            id=\"mpb-demo-btn1\">\r\n                            Close                        <\/a>\r\n                        <a href=\"https:\/\/awplife.com\"\r\n                            class=\"btn-demo-2 animated pulse\"\r\n                            id=\"mpb-demo-btn2\" target=\"_blank\">\r\n                            Learn More                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Overlay -->\r\n            <div class=\"md-overlay-demo\" id=\"md-overlay-demo\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- Dynamic Style Element -->\r\n        <style id=\"mpb-demo-dynamic-style\"><\/style>\r\n                            <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Use Cases &amp; Examples<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Place any content inside the modal to create powerful, engaging popups.<\/p>\n\n\n\n<!-- \n  Modal Popup Box - Use Cases Grid\n  Paste this HTML into a WordPress page using the HTML\/Code editor.\n  All styles are inline \u2014 no external CSS needed.\n-->\n\n<div\n    style=\"max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\">\n\n    <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:30px\">\n\n        <!-- Contact Form -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:260px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#1e3a5f,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#3b82f6\">Contact\n                        Us <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b\">\n                        <input\n                            style=\"width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:10px;margin-bottom:6px;background:#f8fafc\"\n                            placeholder=\"Your Name\" readonly>\n                        <input\n                            style=\"width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:10px;margin-bottom:6px;background:#f8fafc\"\n                            placeholder=\"Email Address\" readonly>\n                        <input\n                            style=\"width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:10px;margin-bottom:6px;background:#f8fafc\"\n                            placeholder=\"Message...\" readonly>\n                        <span\n                            style=\"display:inline-block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:#3b82f6;margin-top:4px\">Send\n                            Message<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#3b82f6\">\n                    Forms &#038; Lead Gen<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Contact Form Popup<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Display Contact Form 7, WPForms, or Gravity\n                    Forms inside a modal. Perfect for lead capture without leaving the page.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Newsletter -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:260px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#1e3a5f,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div\n                        style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6)\">\n                        \ud83d\udce7 Stay Updated <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b\">\n                        <p style=\"font-size:11px;color:#374151;margin-bottom:8px\">Get the latest tips &#038; offers directly\n                            in your inbox!<\/p>\n                        <input\n                            style=\"width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:10px;margin-bottom:6px;background:#f8fafc\"\n                            placeholder=\"Enter your email\" readonly>\n                        <span\n                            style=\"display:block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);text-align:center\">Subscribe\n                            Now<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#3b82f6\">\n                    Forms &#038; Lead Gen<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Newsletter Signup<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Grow your email list with Mailchimp, ConvertKit,\n                    or any newsletter form inside a popup \u2014 trigger on exit intent for maximum conversions.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Video -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:260px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#3b1f5e,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#8b5cf6\">Watch\n                        Demo <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div\n                        style=\"background:#000;width:100%;height:90px;display:flex;align-items:center;justify-content:center\">\n                        <div\n                            style=\"width:36px;height:36px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px\">\n                            \u25b6<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#8b5cf6\">\n                    Media<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Video Lightbox<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Embed YouTube, Vimeo, or self-hosted videos.\n                    Great for product demos, tutorials, and promotional content.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Image Gallery -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:260px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#3b1f5e,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#8b5cf6\">Gallery\n                        <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px\">\n                        <div style=\"background:#c4b5fd;height:50px;border-radius:4px\"><\/div>\n                        <div style=\"background:#a78bfa;height:50px;border-radius:4px\"><\/div>\n                        <div style=\"background:#a78bfa;height:50px;border-radius:4px\"><\/div>\n                        <div style=\"background:#c4b5fd;height:50px;border-radius:4px\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#8b5cf6\">\n                    Media<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Image Gallery<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Showcase portfolio work, product photos, or\n                    event galleries inside a beautiful modal popup.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Coupon -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:260px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#134e3a,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#10b981\">\ud83c\udf89\n                        Special Offer! <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b\">\n                        <div\n                            style=\"background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px dashed #f59e0b;border-radius:8px;padding:10px;text-align:center;margin:8px 0\">\n                            <div style=\"font-size:9px;color:#b45309\">USE CODE<\/div>\n                            <div style=\"font-size:18px;font-weight:800;color:#92400e;letter-spacing:3px\">SAVE20<\/div>\n                        <\/div>\n                        <span\n                            style=\"display:block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:#10b981;text-align:center\">Shop\n                            Now \u2192<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#10b981\">\n                    E-Commerce<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Coupon \/ Discount Code<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Show exclusive discount codes on page load or\n                    exit intent. Boost conversions with time-limited popup offers.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Product Quick View -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:260px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#134e3a,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#10b981\">Quick\n                        View <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b\">\n                        <div\n                            style=\"background:linear-gradient(135deg,#d1fae5,#a7f3d0);height:60px;border-radius:6px;margin-bottom:8px\">\n                        <\/div>\n                        <div style=\"font-weight:700;color:#374151;font-size:12px\">Premium T-Shirt<\/div>\n                        <div style=\"color:#10b981;font-weight:700;font-size:14px;margin:4px 0\">$29.99<\/div>\n                        <span\n                            style=\"display:block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:#10b981;text-align:center\">\ud83d\uded2\n                            Add to Cart<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#10b981\">\n                    E-Commerce<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Product Quick View<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Let visitors preview WooCommerce products in a\n                    modal without navigating away from the current page.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Age Verification -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#5c3d0e,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#000;background:#f59e0b\">\u26a0\ufe0f Age\n                        Verification <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(0,0,0,0.5);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b;text-align:center\">\n                        <p style=\"font-size:11px;color:#374151;margin-bottom:8px\">You must be 18 or older to access this\n                            site.<\/p>\n                        <div style=\"display:flex;gap:8px;margin-top:10px\">\n                            <span\n                                style=\"display:inline-block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:#10b981;flex:1;text-align:center\">I&#8217;m\n                                18+<\/span>\n                            <span\n                                style=\"display:inline-block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:#ef4444;flex:1;text-align:center\">Leave<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#f59e0b\">\n                    Announcements<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Age Verification<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Required for alcohol, tobacco, or adult content\n                    sites. Show on page load with no close-on-overlay for mandatory verification.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Cookie \/ GDPR -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#5c3d0e,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#000;background:#f59e0b\">\ud83c\udf6a\n                        Cookie Notice <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(0,0,0,0.5);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b\">\n                        <p style=\"font-size:10px;color:#374151;margin-bottom:8px\">We use cookies to improve your\n                            experience. By continuing, you agree to our privacy policy.<\/p>\n                        <span\n                            style=\"display:block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#000;background:#f59e0b;text-align:center\">Accept\n                            All Cookies<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#f59e0b\">\n                    Announcements<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Cookie Consent \/ GDPR<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Show cookie consent or GDPR compliance notices.\n                    Use the cookie dismiss feature so it only shows once.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Exit Intent -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#5c1a1a,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#ef4444\">Wait!\n                        Don&#8217;t Leave \ud83d\ude4f <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b;text-align:center\">\n                        <p style=\"font-size:12px;color:#374151;font-weight:600;margin-bottom:6px\">Get 15% Off Your First\n                            Order!<\/p>\n                        <input\n                            style=\"width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:10px;margin-bottom:6px;background:#f8fafc\"\n                            placeholder=\"Enter your email\" readonly>\n                        <span\n                            style=\"display:block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:#ef4444;text-align:center\">Claim\n                            My Discount<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#ef4444\">\n                    Engagement<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Exit Intent Offer<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Catch visitors before they leave with an\n                    irresistible offer. Triggered when the mouse moves toward the browser close button.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Social Follow -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#5c1a1a,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div\n                        style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,#ef4444,#f97316)\">\n                        Follow Us! <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b;text-align:center\">\n                        <p style=\"font-size:10px;color:#374151;margin-bottom:8px\">Join our community on social media<\/p>\n                        <div style=\"display:flex;gap:8px;justify-content:center;margin:8px 0\">\n                            <div\n                                style=\"width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;background:#1877f2\">\n                                f<\/div>\n                            <div\n                                style=\"width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;background:#1da1f2\">\n                                \ud835\udd4f<\/div>\n                            <div\n                                style=\"width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(135deg,#f58529,#dd2a7b)\">\n                                \u25ce<\/div>\n                            <div\n                                style=\"width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;background:#ff0000\">\n                                \u25b6<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#ef4444\">\n                    Engagement<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Social Media Follow<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Boost your social following with a popup that\n                    displays your social media profiles and follow buttons.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Login -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#1e3a5f,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#3b82f6\">\ud83d\udd10 Login\n                        <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b\">\n                        <input\n                            style=\"width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:10px;margin-bottom:6px;background:#f8fafc\"\n                            placeholder=\"Username\" readonly>\n                        <input\n                            style=\"width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:10px;margin-bottom:6px;background:#f8fafc\"\n                            placeholder=\"Password\" readonly>\n                        <span\n                            style=\"display:block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:#3b82f6;text-align:center\">Log\n                            In<\/span>\n                        <p style=\"text-align:center;font-size:9px;color:#94a3b8;margin-top:6px\">Forgot password? |\n                            Register<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#3b82f6\">\n                    Forms &#038; Lead Gen<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Login \/ Registration<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Display WordPress login or registration forms in\n                    a popup \u2014 no page redirect needed for a smooth user experience.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Google Map -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#0e4a5c,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#06b6d4\">\ud83d\udccd Find\n                        Us <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:0\">\n                        <div\n                            style=\"background:linear-gradient(135deg,#a7f3d0,#67e8f9);height:100px;display:flex;align-items:center;justify-content:center\">\n                            <div\n                                style=\"width:16px;height:16px;background:#ef4444;border-radius:50% 50% 50% 0;transform:rotate(-45deg)\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#06b6d4\">\n                    Content<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Google Maps \/ Store Locator\n                <\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Embed Google Maps in a popup for store\n                    locations, office directions, or event venues.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Pricing -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#0e4a5c,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#06b6d4\">\ud83d\udc8e\n                        Pricing <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b;text-align:center\">\n                        <div style=\"font-size:24px;font-weight:800;color:#0f172a\">$49<\/div>\n                        <div style=\"font-size:9px;color:#94a3b8\">\/year<\/div>\n                        <div style=\"font-size:9px;color:#374151;margin:6px 0;line-height:1.6\">\u2713 All Features<br>\u2713 1 Year\n                            Support<br>\u2713 Free Updates<\/div>\n                        <span\n                            style=\"display:block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:#06b6d4;text-align:center\">Buy\n                            Now<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#06b6d4\">\n                    Content<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Pricing Table<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Display pricing plans or comparison tables in a\n                    popup for quick product overview without page navigation.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Announcement -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#5c3d0e,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div\n                        style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#000;background:linear-gradient(135deg,#f59e0b,#f97316)\">\n                        \ud83c\udf89 Big Announcement <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(0,0,0,0.5);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b;text-align:center\">\n                        <p style=\"font-size:13px;font-weight:700;color:#0f172a;margin-bottom:4px\">We&#8217;ve Launched v2.0!\n                        <\/p>\n                        <p style=\"font-size:10px;color:#64748b\">Packed with new features, animations, and performance\n                            improvements.<\/p>\n                        <span\n                            style=\"display:block;padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;color:#000;background:#f59e0b;text-align:center;margin-top:8px\">Learn\n                            More<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#f59e0b\">\n                    Announcements<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Site Announcements<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Share important updates, product launches,\n                    holiday notices, or event information with visitors instantly.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Testimonial -->\n        <div\n            style=\"background:linear-gradient(145deg,#1e293b,#1a2332);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden\">\n            <div\n                style=\"height:220px;display:flex;align-items:center;justify-content:center;padding:15px;background:linear-gradient(135deg,#0e4a5c,#1e293b)\">\n                <div\n                    style=\"background:#fff;border-radius:10px;width:85%;max-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative\">\n                    <div style=\"padding:12px 16px;font-weight:700;font-size:13px;color:#fff;background:#06b6d4\">\u2b50\n                        Reviews <span\n                            style=\"position:absolute;top:8px;right:12px;color:rgba(255,255,255,0.7);font-size:16px;font-weight:bold\">\u00d7<\/span>\n                    <\/div>\n                    <div style=\"padding:14px 16px;font-size:11px;color:#64748b;text-align:center\">\n                        <div style=\"font-size:20px;margin-bottom:4px\">\u2b50\u2b50\u2b50\u2b50\u2b50<\/div>\n                        <p style=\"font-size:10px;color:#374151;font-style:italic;margin-bottom:6px\">&#8220;Best popup plugin\n                            I&#8217;ve ever used. Simple yet powerful!&#8221;<\/p>\n                        <div style=\"font-size:10px;font-weight:700;color:#0f172a\">\u2014 John D.<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"padding:24px 28px 28px\">\n                <div\n                    style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#06b6d4\">\n                    Content<\/div>\n                <h3 style=\"font-size:20px;font-weight:700;color:#fff;margin-bottom:10px\">Testimonials &#038; Reviews<\/h3>\n                <p style=\"font-size:14px;color:#94a3b8;line-height:1.7\">Show customer reviews, testimonials, or case\n                    studies in a popup to build trust and social proof.<\/p>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use Cases &amp; Examples Place any content inside the modal to create powerful, engaging popups. Contact Us \u00d7 Send Message Forms &#038; Lead Gen Contact Form Popup Display Contact Form 7, WPForms, or Gravity Forms inside a modal. Perfect for lead capture without leaving the page. \ud83d\udce7 Stay Updated \u00d7 Get the latest tips &#038; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":46,"href":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/wp-json\/wp\/v2\/pages\/5\/revisions\/401"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/demo\/model-popup-box-premium\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}