Get User Information on Unbounce Landing Pages

Auth0 Configuration

  1. Create an Auth0 account and navigate to the dashboard.
  2. Go to Clients and click + Create Client. Pick the Single Page Application option and go to Settings. Note the Client ID and Domain. Also, add the callback URL in both Allowed Callback URLs and Allowed Origins (CORS) (it should be your unbounce page URL. For example:
  3. Go to Connections > Social and enable the social providers you want to support.

Social Connections

Unbounce Configuration

  • Add a button (or whatever UI element you consider) that will trigger the login with the provider. Take note of the button ID under Properties > Element Metadata.

  • Add a new JavaScript to your Unbounce landing page, select Before Body End Tag under Placement and add this code. Also make sure to check jQuery as a dependency.

<script src=""></script>
<script type="application/javascript">
  var webAuth = new auth0.WebAuth({
    domain:       'YOUR_AUTH0_DOMAIN',
    clientID:     'YOUR_CLIENT_ID',
    redirectUri:  'REPLACE_WITH_YOUR_UNBOUNCE_PAGE_URL', // e.g
    responseType: 'token'

You should use the clientID and Domain of the client you just configured.

  • You need a way to pass the information coming from the social providers to Unbounce. The way you do that is by creating a Form and adding Hidden fields for each field. In the following example we are using the normalized profile fields name, email, given_name, family_name, nickname and picture. You can also include IdPs specific attributes such as headline if you are using LinkedIn.

  • Finally, go back to the JavaScript editor at Unbounce and add a click handler for each button to trigger the social authentication. Here, you must replace the button ID you took note of previously and the connection name, which can be seen under Connections -> Social and expanding the provider. For example, for google you would use google-oauth2 and for linkedin, linkedin. Also, make sure that you replace the IDs properly, so instead of #INPUT_1 you should put the ID of the form field (you can see it while editing the form, under Field Name and ID).
$('#REPLACE_WITH_BUTTON_ID').bind('click', function() {
    connection: 'REPLACE_WITH_CONNECTION_NAME',  // you get the connection name from Auth0 dashboard (expand social provider)

// After authentication occurs, the parseHash method parses a URL hash fragment to extract the result of an Auth0 authentication response.

webAuth.parseHash({ hash: window.location.hash }, function(err, authResult) {
  if (err) {
    return console.log(err);

  // Use the accessToken to collect userInfo
  webAuth.client.userInfo(authResult.accessToken, function(err, user) {
    // normalized attributes from Auth0

    // provider-specific attributes
    if (user.headline) $('#INPUT_7').val(user.headline);

Now you will be able to see the information provided by the IdP in the Leads section of your Unbounce Admin Panel, after the user submits the form.