{"componentChunkName":"component---src-templates-tag-js","path":"/tags/login-radius-interface/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/displaying-the-loginradius-interface-in-a-pop-up/"},"html":"

In order to display your LoginRadius Login Interface in a pop-up you can leverage Jquery-ui which is a well documented, easy-to-use library that allows you to handle some common functionality such as pop-up dialogs and other UI features. In this article we go over the steps to use Jquery-ui to display a pop-up on your page with a LoginRadius login interface using the LoginRadius HTML SDK.

\n

1. Get the required references this guide relies on: Jquery and Jquery-ui. You can include the hosted reference files in the header of your page:

\n
<!--\n\n-->
\n

2. Include the LoginRadius Interface Javascript and HTML5 SDK reference:

\n
<!--\nvar options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n    $ui = LoginRadius_SocialLogin.lr_login_settings;\n    $ui.interfacesize = "";\n    $ui.apikey = "";\n    $ui.callback="";\n    $ui.lrinterfacecontainer ="interfacecontainerdiv";\n    LoginRadius_SocialLogin.init(options);\n});\n-->
\n

3. Create the HTML structure for your page. Below we have created a button to trigger our pop-up display as well as the dialog container that will be displayed in the custom pop-up which is hidden by default. We have also included a div to display profile data after successfully authenticating.

\n
<!--Login\n\n    \n\n -->
\n

4. Create a JavaScript function to handle the display of the pop-up dialog. The below function utilizes Jquery-ui functions to display the dialog and the LoginRadius login interface initialization function to render the login interface on the popup:

\n
function Login(){\n    $( "#dialog" ).dialog();\n    LoginRadius_SocialLogin.init(options);\n}
\n

5. Include the JavaScript callback script to handle a successful authentication and display the profile data.

\n
LoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n    LoginRadiusSDK.getUserprofile( function( data) {\n        $( "#dialog" ).dialog("close");\n        document.getElementById("profile").innerHTML = JSON.stringify(data);\n    });\n}
\n

Full Example:

\n
<!--\n\n\n\n\n var options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n$ui = LoginRadius_SocialLogin.lr_login_settings;\n$ui.interfacesize = "";\n$ui.apikey = "";\n$ui.callback="";\n$ui.lrinterfacecontainer ="interfacecontainerdiv";\nLoginRadius_SocialLogin.init(options); }); \n\n\n \nfunction Login(){\n    $( "#dialog" ).dialog();\n    LoginRadius_SocialLogin.init(options);\n}\n \nLoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n    LoginRadiusSDK.getUserprofile( function( data) {\n        $( "#dialog" ).dialog("close");\n        document.getElementById("profile").innerHTML = JSON.stringify(data);\n    });\n}\n \nLogin\n \n\n \n-->
\n","frontmatter":{"date":"November 09, 2015","updated_date":null,"title":"Displaying the LoginRadius interface in a pop-up","tags":["HTML","Login","UI","LoginRadius Interface"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b457f6215159c9dcc593ccf7c891be5b/e7487/simplepop-150x150.webp","srcSet":"/static/b457f6215159c9dcc593ccf7c891be5b/e7487/simplepop-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}}]}},"pageContext":{"tag":"LoginRadius Interface"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}