Server-Rendered Applications: [No Page Refresh]

    For server-rendered applications that utilize backend frameworks such as JSP, PHP, ASP.NET, and Java, the integration is particularly robust. It also supports a range of other backend technologies like Ruby on Rails, Django, or Express.js. As long as the page does not refresh—meaning the proview’s specific DOM elements remain unchanged or the entire page isn't reloaded with each user action—the integration should be seamless and uninterrupted.

Client-Side Applications:

    For client-side applications, our integration is optimized for single-page applications (SPAs) created with frameworks like React and Angular, which offer dynamic user experiences without refreshing the page. It's compatible with other frontend frameworks such as Vue.js, Ember.js, and Backbone.js, ensuring versatile implementation across various web development stacks. If the proview's div remains static or untouched during user interactions, and full page updates are not triggered, the integration will maintain a seamless experience.


Note: The client Domain needs to be whitelisted before script execution.



To Start Session:


    To integrate Proview and 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.

Script

<script>
  // Initializing proctoring session
  (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', 'https://cdn.proview.io/client/init.js', 'tv');

  tv('init', '<token>', {
    sessionTitle: '<Title for the session>',
    sessionType: '<type of proctoring>',
    profileId: '<assessment_platform_candidate_id>',
    session: '<assessment_session_id>',
    previewStyle: 'position: fixed; bottom: 0px;',
    initCallback: function(err, uuid) {
      // err: Errors from ProctorClient
      // uuid: Unique UUID created by Proctoring system for the session
      console.log(err, uuid);
    },
    networkDisconnectionCallback: function() {
      console.log("Network disconnected, session paused");
      // Additional logic for handling network disconnection
    }
  });
</script>
JavaScript
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 in 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.


Parameter

Type

Mandatory

Description

sessionTitleStringfalseTitle for the session as a string value
sessionTypeStringtrue
  • 'ai_proctor’: computation is carried by the system and deliver a recommendation.
  • ‘record_and_review’: Proctor will manually revalidate the automated system recommendation for false positives and override the recommendation if required.

  • 'live_proctor' session had to be scheduled. A proctor will join the session and monitor the test takers during the session with the aid of automated event identification and notification.

session

String

true

The unique name of the session will be used by Proctoring to tag this session. It is recommended to use a unique ID of the session if so, used the Proview log records can be automatically reconciled by integrating the application’s internal assessment records

profileId

String

true

User ID is unique for each user, this is an optional feature if you like to monitor users across sessions and correlate their usage from multiple sessions.

previewStyle

String

false

A valid CSS style that the assessment platform can use to position the camera preview as per the assessment screen layout. (eg: position: 'fixed', top: '0px')

initCallbackFunctiontrue

A callback function that will be called by the Proview system after the successful completion of all steps(hardware, camera, microphone, etc) based on the session type provided. This function upon called to provide the following two parameters:

  • err - error
  • uuid - Session playback ID
networkDisconnectionCallbackFunctionfalseA callback function that will be called by Proview system when an Internet disconnection is detected.
ProctorClient3.stopFunctionfalse

Stop function that will stop the initialized proctoring session and the function itself takes are ref/function as an argument which will trigger once the session stopped successfully.

ProctorClient3.PauseFunctionfalseA function that will pause the ongoing proctoring session.
ProctorClient3.on
FunctionfalseA function to listen to events triggered by Proview



To Stop Session:


    Upon the completion of the assessment, proctoring can be stopped in two ways.

  1. [RECOMMENDED] The integrating application can make a stop function call to the Proview application by passing a callback as a single parameter. This function takes no arguments.

    Script 
    <script>
  ProctorClient3.stop(function () {
  });
</script>
    JavaScript


  2. [ALTERNATIVE] This approach requires no code changes and initiates automatically upon closing/unload of the window in which proctoring code is injected. The Proview application will unload and attempt to drain the outstanding buffer of data to the server before the window closes. However, there may not be adequate time for the application to exit cleanly, and recordings could be corrupted.
Gener

To pause a session:

If the integration system needs to pause an ongoing proctoring session, the following script will have to be called from the integrating system.


Script
<script>
  ProctorClient3.Pause();
</script>
JavaScript


To listen to an event:

If the integration system requires an action based on a specific event during a proctoring session, incorporate the following script into your application. This script enables event monitoring, allowing you to react or log information when a certain event occurs. Replace '[Event Type I]' in the script with the desired event's ID. For a comprehensive list of events and their IDs, visit here. This customization facilitates targeted responses to particular scenarios in the proctoring environment.


Script
<script>
window.ProctorClient3.on('log:event:all log:event:type:[Event Type ID]', (data) => {
    // Your custom action based on the event
});
</script>
JavaScript

           

Best practices for Proview integration:

  1. Ensure that Proview loads before 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
  9. During integration development, you can reach out to the Talview implementation support team for any queries or issues that you encounter
  10. 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
  11. 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
  12. 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
  13. 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 embedded integration would finally look like.