Prepopulate Widget 2.0 Contact Form fields

If your readers are already authenticated through OAuth or JWT, their name and email address will automatically be prepopulated in the Contact Form fields.

If they aren't already authenticated, you can add some code to prepopulate some of the contact form fields. This can be useful if you'd like to add your end-user's name or email address to the form automatically, so they don't have to fill it out.

To do so, you'll use the updateContact method, and specify values from your application to populate the name and/or email fields:

  • _ko19.updateContact({name: 'Sample Name', email: 'Sample email' });

As with other Widget 2.0 methods, this can be a good method to call from within the _ko19.onLoad or _ko19.onOpen functions, which can be tucked in with your full widget embed script or run separately.

  1. onOpen means that once the user opens the widget, their info will be populated into the contact form fields:
    _ko19.onOpen = function() {
           _ko19.updateContact({name: 'My Name', email: 'My email'});
    }
  2. onLoad will add the end-user's contact form details into the widget when the page loads:
    _ko19.onLoad = function() {
           _ko19.updateContact({name: 'My Name', email: 'My email'});
    }

You can choose to add either function into the overall widget embed script, as below, or run them separately:

<script type="text/javascript">
    var _ko19 = _ko19 || {};
    _ko19.__pc = '5xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxa';
    _ko19.base_url = '//test.knowledgeowl.com';
    
    !function() {
        var ko = document.createElement('script');
        ko.type = 'text/javascript';
        ko.async = true;
        
        ko.src = `${_ko19.base_url}/widget-app/assets/js/load.js`;
        document.head.appendChild(ko);
    }();    
  
      _ko19.onLoad = function() {
        _ko19.updateContact({name: 'My Name', email: 'My email'});      
    }
</script>