need help with complicated popup scheme

Hello,

I want to use 2 popups. The first should look like a floating round button with no popup box around it, no "x" to close, and no darkened background. Preferably, it would have a hover state. It should appear on page load and is only visible on home page. I want to control where it appears on the page. When clicked, the button should disappear and trigger the opening of a 2nd popup that is your usual box. It needs to have a YouTube video in it that autoplays.

Please help me set up the first button as described.

Thank you,

Earl

  • Predrag Dubajic

    Hi Earl,

    For the video part you can simply paste the video URL in your Hustle Custom Content and then select it to open on click where you will add the ID or Class of your button.

    However the button part is not possible with Hustle directly as it will require disabling Hustle default functionality and that will affect the video popup as well.

    What you can try is adding new button via custom script so it shows on your page and use that class for opening popup.

    I have created a starter function for you and you can continue modifying it from there:

    function popup_button() {
    if ( is_home() || is_front_page() ) {
    	?>
    
    	<style type="text/css">
    		#open-popup-button {
    		    position: fixed;
    		    top: 50%;
    		    left: 50%;
    		    z-index: 99999;
    		    background: red;
    		    padding: 10px 30px;
    		    border-radius: 5px;
    		    color: #000;
    		    cursor: pointer;
    		}
    
    		#open-popup-button:hover {
    			background: blue;
    			color: #fff;
    		}
    	</style>
    
    	<script type="text/javascript">
    		jQuery( document ).ready(function() {
    		    jQuery( 'body' ).append( '<div id="open-popup-button">TEST</div>' );
    		});
    	</script>
    
    <? }
    }
    add_action( 'wp_footer', 'popup_button' );

    Please note that this is custom job that you're looking for and above script might require further development to have it working fully the way you're after.

    If you need to further help with customization you can post a job in our job board where you can hire a developer to assist further:
    http://premium.wpmudev.org/wpmu-jobs/
    Please note that, no WPMU official staff members are allowed to work in the job board.

    Best regards,
    Predrag

  • admin

    Predrag,

    Please disregard previous. I found out that it goes in functions.php and it works nicely. I also found out about Hustle.

    I do have a couple follow up questions....

    I'm assuming that I use the ID #open-popup-button to trigger the popup in Popup Pro. Please confirm.

    Also, I'm not seeing that the button dissapears after being clicked. Can you guide me through that?

    Thanks,

    Earl

  • admin

    Predrag,

    Forgot to offer this additional perspective. The reason I was trying to create the button as a Popup is that I wanted to take advantage of Popup Pro's conditional features. This button would be used to launch a welcome video that encourages the visitor to sign up for a free membership, so it is not necessary to show it to those who are already members. Also, I would want it to disappear if the user scrolled down the page, assuming that they were not interested, or not display it if the user has already seen the video... for things of that nature, I'd like to have some control over when the button is seen or not.

    I'm guessing that it would not be easy to add such conditions to the button you provided. Correct me if I'm wrong. But it this is correct, can you steer me toward some combination of plugins that would help me create a conditional floating button that triggers a popup and then disappears? Thanks.

    Earl

  • Sohag Ronjon Dey

    Hi Earl,

    Thanks for your reply and I hope that you are having a beautiful day!

    You can use some thing like this.

    Please add the following code to the index.php of your site

    <?php if ( (is_home() || is_front_page()) && (!is_user_logged_in() && !isset($_COOKIE['intro_showed']) ) ) { ?>
    		<button id="open-popup-button" style="display: block;">TEST</button>
    <?php } ?>

    You can also add styling to the button is you like.

    Then add the following to your functions.php

    /********************* custom code *******************/
    function popup_button() {
    if ( (is_home() || is_front_page()) && (!is_user_logged_in() && !isset($_COOKIE['intro_showed']) ) ) {
    	?>
    		<script type="text/javascript">
    			jQuery(window).scroll(function() {
    				if (jQuery(this).scrollTop() > 400) { //this will hide if the visitor scrolls down to 400 px
    					console.log(jQuery(this).scrollTop());
    					jQuery('#open-popup-button').css({
    						'display': 'none'
    					});
    				}
    			});
    		</script>
    	<?php
    	}
    }
    
    add_action( 'wp_footer', 'popup_button' );
    
    add_action( 'init', 'set_intro_showed');
    function set_intro_showed(){
    	if(!isset($_COOKIE['intro_showed'])){
    		setcookie( 'intro_showed', true, time() + (86400 * 30), COOKIEPATH, COOKIE_DOMAIN);
    	}
    }

    And in the hustle popup settings enable the "Pop-up" under "Display Settings" and then set the "Pop-up Triggers" to click and insert #open-popup-button in the box below "Trigger after user clicks on existing element with this ID or Class".

    Please check the screenshots.

    What the above code does is it first checks if it is the home or front page and if the user is not logged in and also if the user has already seen the button by checking a cookie. If these conditions are met then the button will be shown and it sets a cookie for 30 days so if the user visits the page again in next 30days it will not be shown. If the conditions are not met then the button will not be shown and if the user scroll down to 400px it will also hide it.

    Please modify the codes according to your need like the button id, time period for the cookie, conditional tag for page according to the page you like to show the button etc.

    Hope this helps.

    Cheers,
    Sohag