Creating a People Picker in a web-part page SharePoint 2013

After building a client site app using Knockout.js, I had a need to get a people picker into the app so users could select someone from our organization.

I found the following post:

Which laid out how to get a people picker in a SharePoint app.  But what if I just wanted to put it into a snippet on the page?

I tried various Script SOD commands and most of them were causing me issues.  So I eventually went the old school way and manually included all of the js files needed.

Adding this script to my snippet created a people picker on the page.  After this, I can now modify to use in my app.

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></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>

  <div id="peoplePickerDiv"></div>
        <input type="button" value="Get User Info" onclick="getUserInfo()"></input>
        <h1>User info:</h1>
        <p id="resolvedUsers"></p>
        <h1>User keys:</h1>
        <p id="userKeys"></p> 
        <h1>User ID:</h1>
        <p id="userId"></p>
// Create a schema to store picker properties, and set the properties.
var schema = {};
schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = true;
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.
SPClientPeoplePicker_InitStandaloneControlWrapper("peoplePickerDiv", 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];
        for (var userProperty in user) { 
            userInfo += userProperty + ':  ' + user[userProperty] + '<br>';

    // Get user keys.
    var keys = peoplePicker.GetAllUserKeys();

    // Get the first user's ID by using the login name.

// Get the user ID.
function getUserId(loginName) {
    var context = new SP.ClientContext.get_current();
    this.user = context.get_web().ensureUser(loginName);
         Function.createDelegate(null, ensureUserSuccess), 
         Function.createDelegate(null, onFail)

function ensureUserSuccess() {

function onFail(sender, args) {
    alert('Query failed. Error: ' + args.get_message());