{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/displaying-the-loginradius-interface-in-a-pop-up/","result":{"data":{"markdownRemark":{"id":"032c01cc-c9da-5ec8-89ef-c3fa0ed8e951","excerpt":"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…","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","headings":[],"fields":{"slug":"/engineering/displaying-the-loginradius-interface-in-a-pop-up/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":null,"title":"Displaying the LoginRadius interface in a pop-up","canonical":null,"date":"November 09, 2015","updated_date":null,"tags":["HTML","Login","UI","LoginRadius Interface"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/af7b348bc73adfcd737b8df292359566/d399c/simplepop-150x150.png","srcSet":"/static/af7b348bc73adfcd737b8df292359566/d399c/simplepop-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"bio":"Karl is the AVP of Customer Success at LoginRadius, the industry leading Consumer IAM provider. He thrives in fast paced high tech environments working closely with Customers to overcome complex Identity related challenges as part of their digital transformations. Outside of work, he spends his time with his family in and around Vancouver hiking, snowboarding and exploring.","avatar":null}}}},"pageContext":{"id":"032c01cc-c9da-5ec8-89ef-c3fa0ed8e951","fields__slug":"/engineering/displaying-the-loginradius-interface-in-a-pop-up/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}