Loading ...

Displaying the 'Login' & 'Join' Prompts on Pagebuilder Pages | Communifire Support

Home » Spaces » Communifire Support » forum » Communifire API & Developers » Displaying the 'Login' & 'Join' Prompts on Pagebuilder Pages
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Edit navigation item

Required The name that will appear in the space navigation.
Required
Required
Required The url can point to an internal or external web page.
 
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Communifire API & Developers

Displaying the 'Login' & 'Join' Prompts on Pagebuilder Pages

Subscribe to RSS
  • IanScholten

    Wondering if there is an easy way to have the 'Login to follow, share, and participate...' (for people who aren't logged in) and the 'Join this Space to participate' prompts displayed on page builder pages? (Screenshots attached for reference).

    I used Chrome to Inspect the element and can see the code for it. Do I just add that into a custom HTML widget visible only to Guests? Or is there a different approach to take that doesn't require me to input HTML?

  • Foster

    Hi Ian,

    I will go ahead and take a look into the best way to do this for you.

    Thanks!
    Foster

  • IanScholten

    Hi Foster,

    Wondering if you've had any luck with solutions to this issue.

    Thanks,

    Ian

  • Foster

    Hi Ian,

    I apologize for the delay on this. You are correct that the best way to have this display in a pagebuilder is to create a RAW HTML widget and set the visibility to guest only. You can paste in the following to a RAW HTML widget and it should create the option on pagebuilder pages to join.

     

    
    
    <script type="text/javascript">
    
        ///#region check space validation
        function SpaceValidation(itm, userID, spaceID) {
    
            var dvId = document.getElementById(itm);
            dvId.className = 'progress';
            dvId.innerHTML = 'Checking availability...';
            var path = Communifire.buildCommonWSUrl('AddSpaceUser'); 
           
            $.ajax({
                type: 'POST',
                url: path,
                data: "{'spaceID':" + spaceID + ",'userID':" + userID + "}",
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function(response)
                {
                    if (response == null || response.d == null) return;
                    $('#fadeScreen').fadeOut();
                    $(String.format('div.{0}', Communifire.modalContainerClass)).hide();
                    
    
                    if (response.d)
                    {
                        dvId.innerHTML = 'Your membership is approved';
                        dvId.className = '';
                        document.location.href = window.location.href;
                    }
                    else
                    {
                        dvId.innerHTML = 'PENDING APPROVAL';
                        dvId.className = '';
                        document.location.href = window.location.href;
                    }
                    $('#ctl00_ctl00_ctl00_ContentPlaceHolder1_MainBodyPlaceHolder1_SpaceDetail1_btnAddSpace').fadeOut('slow');
                }
            });
            return false;
        } 
        
    </script>
    <div class="axero-space-notification success clear  overflow-hidden" id="axero-space-loggedin-message">
        <span id="SpaceHeaderJoinUserSpan"><a id="SpaceHeaderJoinUserAnchor" class="axero-cool-button" href="#">Join this space</a> to participate.</span>
        <span id="SpaceHeaderJoinUserStatusSpan"></span>
    </div>
    
    
    
    
    <script type="text/javascript">
    
        $('#SpaceHeaderJoinUserAnchor').click(function (e) {
            e.preventDefault();
            //var spanIsMySpace = $('#axero-space-loggedin-message');
            var statusSpan = $('#SpaceHeaderJoinUserStatusSpan');
            var anchor = $('#SpaceHeaderJoinUserSpan');
            statusSpan.html('Checking availability...');
            anchor.hide();
            $.cfAjax({
                url: Communifire.buildCommonWSUrl('AddSpaceUser'),
                data: "{'spaceID':" + spaceID + ",'userID':" + parseInt('5', 10) + "}",
                success: function (response) {
                    if (response == true) {
                        statusSpan.html('You have successfully joined this space.');
                    } else {
                        statusSpan.html('Your membership for this space is pending approval.');
                    }
                }
            });
        });
    </script>

     

    Thanks,
    Foster

  • IanScholten

    Thanks for this Foster however, this seems to only provide the green bar encouraging existing members to join the space (the green bar in my original message). This doesn't work for people who aren't actually signed into the platform (it just gets stuck 'Checking Availability' if you click on it).

    Do you have code to get the blue bar which prompts people to 'Login' or if they're not a member to 'Join Now'? It's the second screen shot I attached.

    Thanks,

    Ian

  • Foster

    Hi Ian,

    I'll check on adding this functionality as well. I can try to incorporate a way to hide the other menu when not logged in as well.

    Thanks,
    Foster

  • Foster

    Hi Ian,

    You can add the below code to add the login prompt button. I am still looking into how we can check if the user is logged in already and hide the message if they are. 

     

    <script type="text/javascript">
    
        ///#region check space validation
        function SpaceValidation(itm, userID, spaceID) {
    
            //<summary>check space validation</summary>
            //<param>itm<param>
            //<param>UserID<param>
            //<param>itm<param>
            //<param>spaceID<>
            // var itm = document.getElementById(itm);
            var dvId = document.getElementById(itm);
            //var dvId = itm.parentNode;
            dvId.className = 'progress';
            dvId.innerHTML = 'Checking availability...';
            var path = Communifire.buildCommonWSUrl('AddSpaceUser'); 
           
            $.ajax({
                type: 'POST',
                url: path,
                data: "{'spaceID':" + spaceID + ",'userID':" + userID + "}",
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function(response)
                {
                    if (response == null || response.d == null) return;
                    $('#fadeScreen').fadeOut();
                    $(String.format('div.{0}', Communifire.modalContainerClass)).hide();
                    
    
                    if (response.d)
                    {
                        dvId.innerHTML = 'Your membership is approved';
                        dvId.className = '';
                        document.location.href = window.location.href;
                    }
                    else
                    {
                        dvId.innerHTML = 'PENDING APPROVAL';
                        dvId.className = '';
                        document.location.href = window.location.href;
                    }
                    $('#ctl00_ctl00_ctl00_ContentPlaceHolder1_MainBodyPlaceHolder1_SpaceDetail1_btnAddSpace').fadeOut('slow');
                }
            });
            return false;
        } 
        
    </script>
    
        </div>
        <div class="span10" >
    
            <!-- start notice area -->
            
    <div class="axero-space-notification info clear overflow-hidden" id="axero-space-guest-message">
        <div class="left">
            <a href="/login?ReturnUrl=%2fspaces%2f1%2ffoster-s-space" id="ctl00_ctl00_ctl00_ContentPlaceHolder1_MainBodyPlaceHolder1_SpaceNoticeContainer1_LoginAnchor" class="axero-cool-button">Login</a>&nbsp;to follow, share, and participate in this space.
        </div>
        <div class="right">
            Not a member?<a href="/register" id="ctl00_ctl00_ctl00_ContentPlaceHolder1_MainBodyPlaceHolder1_SpaceNoticeContainer1_RegisterAnchor">Join now</a>
        </div>
    </div>
    
    
    
    
    
    
    <script type="text/javascript">
    
        $('#SpaceHeaderJoinUserAnchor').click(function (e) {
            e.preventDefault();
            //var spanIsMySpace = $('#axero-space-loggedin-message');
            var statusSpan = $('#SpaceHeaderJoinUserStatusSpan');
            var anchor = $('#SpaceHeaderJoinUserSpan');
            statusSpan.html('Checking availability...');
            anchor.hide();
            $.cfAjax({
                url: Communifire.buildCommonWSUrl('AddSpaceUser'),
                data: "{'spaceID':" + spaceID + ",'userID':" + parseInt('0', 10) + "}",
                success: function (response) {
                    if (response == true) {
                        statusSpan.html('You have successfully joined this space.');
                    } else {
                        statusSpan.html('Your membership for this space is pending approval.');
                    }
                }
            });
        });
    </script>

     

     

    Thanks,
    Foster

  • IanScholten

    Hi Foster,

    Wondering if you've had any success with finding a way to have the block work the same as the bars that appear on non-page builder pages. Is it not possible to just copy the code for that bar? I presume it's more complicated than that but want to check.

    With the second set of code you sent, it partially works but has a couple of kinks.

    The primary issue is that when I'm logged out and click the Login button, then sign-in, it takes me to a screen that asks me to join a different space. I've attached a screen shot of the space that I added the code to and a screen shot of what it wants me to join after I log in.

    The second is just the formatting of the bar. It seems to have a really big margin above and no margin below. Since this is appearing under the name but above the content, could you even out the margins? I would do it myself but don't see anywhere clear in the code to adjust and wouldn't want to screw it up.

    Thanks,

    Ian

  • IanScholten

    Hi Foster,

    Wondering if you've had any success adjusting this code to fix the issues I flagged above.

    Are you able to just use the code for the prompts that are built into the standard pages of the spaces?

    I need to get this fixed as soon as possible. If you need more clarification on the issues, let me know.

    Thanks,

    Ian

  • Hi  Foster Clark  still looking for an answer here. This is a big gap for us on our site to convert guests to members.

    Please let me know if how we can move this forward.

    Thanks,

    Ian

  • Hey Ian,

    I apologize for the delays here. I am checking into how to adjust the margin of the bar.

    The code I supplied before is pulled straight from the non-logged in page. I am not sure why it would be pulling you to a separate space, the code should just be pulling the ID of the space you are already on. 

    I did also find a way to check if the user is logged in via javascript, so I will see if that can be added so that the login option only shows when a user is not logged in.

    Thanks,
    Foster

  • Hi Ian,

    We have re-done these widgets as well as added some CSS overrides to make everything look the best way possible. These steps also fix the space above the banner, the incorrect redirections, and now successfully join spaces or sends them to pending approval.

    To add the blue and green banners on a pagebuilder page, please do the following. 

    1) Create a pagebuilder page, and add 2 Raw HTML widgets (Login and Join Space

    2) For the Login widget, please add the following. 

    <div class="axero-space-notification info clear overflow-hidden hide" id="axero-space-guest-message">
        <div class="left">
            <a href="/login" id="ctl00_ctl00_ctl00_ContentPlaceHolder1_MainBodyPlaceHolder1_SpaceNoticeContainer1_LoginAnchor" class="axero-cool-button">Login</a>&nbsp;to follow, share, and participate in this space.
        </div>
        <div class="right">
            Not a member?<a href="/register" id="ctl00_ctl00_ctl00_ContentPlaceHolder1_MainBodyPlaceHolder1_SpaceNoticeContainer1_RegisterAnchor">Join now</a>
        </div>
    </div>
    
    <script type="text/javascript">
        let loginAnchor = $('#ctl00_ctl00_ctl00_ContentPlaceHolder1_MainBodyPlaceHolder1_SpaceNoticeContainer1_LoginAnchor');
        let registerAnchor = $('#ctl00_ctl00_ctl00_ContentPlaceHolder1_MainBodyPlaceHolder1_SpaceNoticeContainer1_RegisterAnchor');
        let guestContainer = $('#axero-space-guest-message');
    
        loginAnchor.attr('href', '/login?ReturnURL=' + location.href);
        registerAnchor.attr('href', '/register?ReturnURL=' + location.href);
        
        if (CF_USERID == 0) guestContainer.show();
    
    </script>

    3) Create a Join Space Raw HTML Widget. Add the following code. 

     

    
    <div class="axero-space-notification success clear overflow-hidden hide" id="axero-space-loggedin-message">
        <span id="SpaceHeaderJoinUserSpan"><a id="SpaceHeaderJoinUserAnchor" class="axero-cool-button" href="#">Join this space</a> to participate.</span>
        <span id="SpaceHeaderJoinUserStatusSpan"></span>
    </div>
    
    <script type="text/javascript">
        let container = $('#axero-space-loggedin-message');
        var statusSpan = $('#SpaceHeaderJoinUserStatusSpan');
        var anchor = $('#SpaceHeaderJoinUserSpan');
        
        if (CF_USERID > 0) {
        	// Check if the user is already member of this space.
        	$.ajax({   
        		method: "GET",   
        		url: location.protocol + "//" + location.hostname + "/api/users/" + CF_USERID + "/spaces/" + CF_SPACEID + "/membership/status",
        		contentType: "application/json" 
        	})
        	.done(function( response ) {
        	    container.show();
        		if (response.ResponseData == "Member") {
        			container.hide();
        		} else if (response.ResponseData == "Pending"){
        			statusSpan.html('Your membership for this space is pending approval.');
        			anchor.hide();
        		}
        	});
        }
    
    	<!-- On click event -->
        $('#SpaceHeaderJoinUserAnchor').click(function (e) {
            e.preventDefault();
    		
            statusSpan.html('Checking availability...');
            anchor.hide();
    		
    		$.ajax({   
    			method: "POST",   
    			url: location.protocol + "//" + location.hostname + "/api/spaces/" + CF_SPACEID + "/users",  
    			data: CF_USERID, 
    			contentType: "application/json" 
    		})
    		.done(function( response ) {
    			if (response.ResponseData == "Member") {
    				statusSpan.html('You have successfully joined this space.');
    			} else if (response.ResponseData == "Pending"){
    				statusSpan.html('Your membership for this space is pending approval.');
    			}
    		});
    	});
    
    </script>

     

    4) Once this is done, the pagebuilder page will show both banners. To only show the Login banner to logged-out users and vice versa, we will add the following to your Footer Scripts. This can be found in your Control Panel > General Settings > Header and Footer Scripts .

    <script type="text/javascript">
       if (CF_USERID == 0) {
            document.getElementById('axero-space-loggedin-message').style.display = 'none';
        }
    else {
            document.getElementById('axero-space-guest-message').style.display = 'none';
    }
    </script>

     

    5) Finally, navigate to your CSS Overrides and add the following to get rid of the margins around the banners, so that there is no gap.

    #axero-space-loggedin-message{margin:0;}
    #axero-space-guest-message{margin:0;}

     

    Once these steps are completed, your page builder page should now show a login option to logged out users, that will redirect back to the space once you log in. Upon logging in, you will then see the green "Join Space" Banner. 

    If you have any issues with this or general questions, please let me know!

    Best,
    Foster

Page 1 of 1 (12 items)