Proview Helpdesk

For Server Rendered Application [With Page Refresh]

    The iframe methodology of integration is recommended if your application meets one of the two criteria mentioned below. This integration will allow the Talview proctoring to load on the parent page of your application while the workflow loads as an iframe on the same browser tab to act as a seamless experience to the user going through the module. The only additional step would be the Proview proctor check that would be carried out prior to the workflow initiation where your platform will initiate the Proview session. The workflow itself and the termination process will not change for the user.

    If your application has page refresh or full page reloads in between the workflow and your application is built on JSP, PHP, ASP.NET, Java frameworks, you can use the below-mentioned steps to integrate the Proview session initiation and termination.

    Note: Client Domain needs to be whitelisted before script execution.

Start Session

To start a session in your application, the recommended workflow is mentioned below. Insert this JavaScript code snippet into the pages where proctoring needs to be enabled. As a best practice, it is always recommended to start the session prior to initiation of your workflow or the timer beginning as it should not put the user at a disadvantage in case of high response or load time.

1. Below we have the sample source code for the parent page that needs to be injected
2. This code will allow you to initiate the proctor on your page
3. iframe source should be empty on load
4. It will be updated via Proview initCallback on page load
5. Until Proview component is loaded properly, do not initiate your workflow
6. Use ‘// set the assessment source once proview is initialised to set the iframe link of your workflow

Script

<div class="container" style="margin: 100px">
  <div class="ui grid center aligned">
    <div class="twelve wide centered column">
      <iframe id="assessmentFrame" src="" width="1024px" height="600px"></iframe>
    </div>
  </div>
</div>
<script>
  var embeddedLink = "";
  (function (i, s, o, g, r, a, m) {
    i['TalviewProctor'] = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
  })(window, document, 'script', ‘<init-script>’, 'tv');
    tv('init', '<token>', {
      sessionTitle: '<Title for the session>',
        session_type: '<type of proctoring>',
          profileId: '<assessment_platform_candidate_id>',
            session: '<assessment_session_id>',
              event_external_id: '<live_proctoring_event_external_id>', // Optional
                previewStyle:'position: fixed; bottom: 0px;',
                initCallback: function(err, uuid){
                  embeddedLink = 'https://appv7.proview.io/embedded/' + uuid;
                // set the assessment source once proview is initilized
                document.getElementById("assessmentFrame").setAttribute('src', 'https://pages.talview.com/proview/assessment');
                console.log(err, uuid);
    }
  });
                function stopProctoring() {
                  ProctorClient3.stop(function () {
                    alert('Proctoring stopped, loading the embedded view');
                    document.getElementById("assessmentFrame").setAttribute('src', embeddedLink);
                  })
                }
  // Create IE + others compatible event handler
                var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
                var eventer = window[eventMethod];
                var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
                // Listen to message from child window
                eventer(messageEvent, function (e) {
                  // Listen to message from child window
                  eventer(messageEvent, function (e) {
                    if (e.data.hasOwnProperty("exit") && e.data.exit) {
                      stopProctoring();
                    }
                  }, false);
});
</script>

Stop Session

Upon the completion of the workflow, proctoring can be stopped by initiating the below script to notify the Talview that the workflow is terminated and to end the proctoring session.

Script

<script>
 function stopProctoring() {
    ProctorClient3.stop(function () {
      alert('Proctoring stopped, loading the embedded view');
      document.getElementById("assessmentFrame").setAttribute('src', embeddedLink);
    })
  }
</script>

https://cdn.proview.io/client/init.js

    This JavaScript snippet loads all the required assets for Proctoring into your webpage, as an embedded application. The second line of the snippet is where the configurations are mentioned for the type of integration to be done. The init function as described above takes three arguments.

1. The first argument states the nature of the call, i.e. initialization, and must be set the value of 'init' for all applications.
2. The second argument is the account token that is being used for your account. It will be of the GUID format (ex: b3f6224e-d072-4gea-9053-9216b9994d43). Contact your account manager to generate your account token.
3. The third argument is an options hash which supports various configuration options as described.

• Best practices for Proview integration:

  1. Ensure that Proview loads prior to your workflow or module initiation
  2. Terminate Proview after your workflow or module completion by the user
  3. Error handling while Proview initiation must be designed to avoid bad UX
  4. A Proview session must not be allowed to run for more than 90 minutes
  5. If a workflow or module requires more than 90 minutes, a page refresh and data upload should be done at an interim point in the workflow
  6. Ensure camera, microphone and notification permissions are not being overwritten by your application
  7. Server errors and API errors should be handled gracefully for the entire session
  8. Ensure WebRTC and HTTPS protocols are supported by your application
• During integration development, you can reach out to the Talview implementation support team for any queries or issues that you encounter
• Post-development closure, you will also be provided with test scripts and functional scenarios to validate the end to end integration is working as expected
• A Talview QA engineer will test the end to end workflow with your team on staging as well as part of the production validation test to ensure fringe errors do not creep in
• In case you are not opting for the embedded playback, you can log in to the Proview admin account with credentials provided at the time of requirement gathering
• All Proview sessions will be available on that account for your reference with respect to the Session ID of the user

This video gives a brief overview of how an iframe integration would finally look like.