I am working in an environment where I am not able to deploy SharePoint-hosted add-ins. I wanted to test the ClientPeoplePicker in my environment with a simple Content Editor Web Part to get the user email. I tweaked the script at the following Microsoft article by setting the schema setting AllowMultipleValues to accept one selected user and only users in the schema setting PrincipalAccountType.
Original code: https://msdn.microsoft.com/en-us/library/office/jj713593(v=office.15).aspx

I added the following lines for the quick test:

 var user = users[i];
       var email = users[0].EntityData.Email;
  $('#userEmail').html(email);

You can copy the script to a text file and add it to the Content Editor Web Part link for a quick test. The complete code to drop inside a file and point to from a Content Editor Web Part:

<div id="peoplePickerDiv"></div>
    <div>
        <br/>
        <input type="button" value="Get User Info" onclick="getUserInfo();"></input>
        <br/>
        <h1>User info:</h1>
        <p id="resolvedUsers"></p>
        <h1>User keys:</h1>
        <p id="userKeys"></p>
 <h1>User email</h1>
        <p id="userEmail"></p>
    </div> 

<script type="text/javascript"  src="https://mydomeain.com/sites/mysitecollection/SiteAssets/jquery-1.11.2.min.js" type="text/javascript"></script> 
   <script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script> 
   <script type="text/javascript" src="/_layouts/15/clientforms.js"></script> 
   <script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script> 
   <script type="text/javascript" src="/_layouts/15/autofill.js"></script> 
   <script type="text/javascript" src="/_layouts/15/sp.js"></script> 
   <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> 
   <script type="text/javascript" src="/_layouts/15/sp.core.js"></script> 
 <script type="text/javascript" >

$(document).ready(function () {

    // Specify the unique ID of the DOM element where the
    // picker will render.
    initializePeoplePicker('peoplePickerDiv');
});

// Render and initialize the client-side People Picker.
function initializePeoplePicker(peoplePickerElementId) {

    // Create a schema to store picker properties, and set the properties.
    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = false;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';

    // Render and initialize the picker. 
    // Pass the ID of the DOM element that contains the picker, an array of initial
    // PickerEntity objects to set the picker value, and a schema that defines
    // picker properties.
    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}

// Query the picker for user information.
function getUserInfo() {

    // Get the people picker object from the page.
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

    // Get information about all users.
    var users = peoplePicker.GetAllUserInfo();
    var userInfo = '';
    for (var i = 0; i < users.length; i++) {
        var user = users[i];
       var email = users[0].EntityData.Email;
  $('#userEmail').html(email);  

        for (var userProperty in user) { 
            userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
             
        }
    }
    $('#resolvedUsers').html(userInfo);

    // Get user keys.
    var keys = peoplePicker.GetAllUserKeys();
    $('#userKeys').html(keys);
}

</script>