example/index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- use following instead of local /public/jobcloud-sdk.js for production -->
    <!-- <script src="https://unpkg.com/@jobcloud/applywith-sdk/umd/jobcloud-sdk.min.js"></script> -->
     <script src="/public/jobcloud-sdk.js"></script>
  </head>
  <body>
    <p>JobCloud ApplyWith SDK Example</p>
    <div id="jobcloud-outlet"></div>
    <form id="app-form" method="POST" action="http://localhost:8083/upload" enctype="application/x-www-form-urlencoded">
      <fieldset>
        <label>Salutation: </label><select name="salutation" id="app-gender"><option value="M">Mr.</option><option value="F">Mrs.</option></select>
      </fieldset>
      <fieldset>
      <label>Firstname: </label><input name="firstname" id="app-firstname" type="text" />
      </fieldset>
      <fieldset>
        <label>Lastname: </label><input name="lastname" id="app-lastname" type="text" />
      </fieldset>
      <fieldset>
        <label>Email: </label><input name="email" id="app-email" type="text" />
      </fieldset>
      <fieldset>
        <label>Phone: </label><input name="phone" id="app-phone" type="text" />
      </fieldset>
      <fieldset>
        <label>Zipcode: </label><input name="zipcode" id="app-zipcode" type="text" />
      </fieldset>
      <fieldset>
        <label>City: </label><input name="city" id="app-city" type="text" />
      </fieldset>
      <fieldset>
        <label>Country: </label><input name="country" id="app-country" type="text" />
      </fieldset>
      <fieldset>
        <h3>Picture:</h3>
        <div id="app-picture"></div>
      </fieldset>
      <fieldset>
        <h3>Attachments:</h3>
        <ul id="app-attachments"></ul>
      </fieldset>
      <fieldset>
        <h3>Attachments (useFileRefs):</h3>
        <ul id="app-attachments-ref"></ul>
      </fieldset>
      <fieldset>
        <input type="submit" />
      </fieldset>
    </form>
    <script type="text/javascript">
      var createPicture = function(url) {
        var $picture = document.querySelector('#app-picture');

        var $image = document.createElement('img');
        $image.src = url;

        $picture.appendChild($image);
      }

      var createAttachment = function(name, mimeType, base64String, tags) {
        var $attachments = document.querySelector('#app-attachments');
        var $form = document.querySelector('#app-form');
        // Create visible list item
        var $listItem = document.createElement('li');
        $listItem.textContent = name + ' (' + mimeType + ')';
        $attachments.appendChild($listItem);
        // Create hidden form input
        var $input = document.createElement('input');
        $input.setAttribute('type', 'hidden');
        $input.setAttribute('name', 'attachment[' + name + ']');
        $input.setAttribute('value', base64String);
        $input.setAttribute('data-tags', tags.join(', '));
        $form.appendChild($input);
      }

      var createImage = function(url) {
        var $attachments = document.querySelector('#app-attachments-ref');

        var $image = document.createElement('img');
        $image.src = url;

        var $listItem = document.createElement('li');
        $listItem.appendChild($image);

        $attachments.appendChild($listItem);
      }

      var sdkCallback = function(app) {
        document.querySelector('#app-gender').value = app.gender;
        document.querySelector('#app-email').value = app.email;
        if (app.firstName && app.lastName) {
          document.querySelector('#app-firstname').value = app.firstName;
          document.querySelector('#app-lastname').value = app.lastName;
        }
        if (app.phone) {
          document.querySelector('#app-phone').value = app.phone;
        }
        if (app.zipCode) {
          document.querySelector('#app-zipcode').value = app.zipCode;
        }
        if (app.city) {
          document.querySelector('#app-city').value = app.city;
        }
        if (app.country) {
          document.querySelector('#app-country').value = app.country;
        }

        if (app.picture) {
          createPicture(app.picture);
        }

        // Create list of attachments
        var $attachments = document.querySelector('#app-attachments');
        if (app.cv) {
          createAttachment('JobCloud_CV.pdf', app.cv.mimeType, app.cv.binary, []);
        }

        if (app.documents) {
          app.documents.forEach(function (doc) {
            createAttachment(doc.fileName, doc.mimeType, doc.binary, doc.tags || []);
            if (doc.transientUrl) {
              createImage(doc.transientUrl);
            }
          });
        }
      }

      JobCloudSDK.injectButton({
        accessKey: '22_ffff',
        injectElement: '#jobcloud-outlet',
        useFileRefs: true,
        locale: 'en',
        env: 'test',
        callback: sdkCallback
      });
    </script>
  </body>
</html>