A simple Bootstrap modal form that includes inputs for an Agora AppID and token, a PubNub pubkey and subkey, along with channel name, and a user ID.

agora-pubnub-login-form.html

<!-- Join Form - Modal Overlay -->
<div class="modal fade" id="modalForm">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Join Channel</h4>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-4">
          <input type="text" id="form-appid" class="form-control">
          <label for="form-appid">Agora AppId</label>
        </div>
        <div class="md-form mb-4">
          <input type="text" id="form-token" class="form-control">
          <label for="form-token">Agora Token</label>
        </div>
        <div class="md-form mb-4">
          <input type="text" id="form-publishKey" class="form-control">
          <label for="form-publishKey">PubNub PublishKey</label>
        </div>
        <div class="md-form mb-4">
          <input type="text" id="form-subscribeKey" class="form-control">
          <label for="form-subscribeKey">PubNub SubscribeKey</label>
        </div>
        <div class="md-form mb-4">
          <input type="text" id="form-channel" class="form-control">
          <label for="form-channel">Channel</label>
        </div>
        <div class="md-form mb-4">
          <input type="number" id="form-uid" class="form-control" value="1001" data-decimals="0"/>
          <label for="form-uid">UID</label>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button id="join-channel" class="btn btn-default">Join Channel</button>
      </div>
    </div>
  </div>
</div>