Back to top

Recording widget integration

This widget provides a convenient way for users to record their name on a Name Page.

It's functionally equivalent to recording via the main Web site, including form fields for custom attributes as well as the phone and Web recorder.

Usage:

To get started you need to include NameCoach Widget plugin into your head block.

<script src="https://www.name-coach.com/api_utils/widget-min.js" type="text/javascript"></script>

The script will fetches its own CSS, namespaced under nc-widget class.

If you have CSS conflicts, you can manually include it.

<link id="nc-widget-css" rel="stylesheet" href="https://www.name-coach.com/api_utils/widget-min.css" type="text/css">

Ensure the link goes before your styles, so widget styles are properly overridden. Don't forget to turn off CSS loading (see below).

Recording Widget

Example 

<button class="btn-nc-widget">NameCoach Widget</button>

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    $(".btn-nc-widget").nameCoachWidget(function(config){
        config.accessToken = "demo_token"; // Your access token
        config.accessCode = "QUINCY2013"; // Your Event Code
        config.fields = {
            first_name:  'John',
            email:       { value: 'johnsnow@got.tv', type: 'readonly' },
            middle_name: { value: '', type: 'hidden' }
        }
    });
  });
</script>

Options

You can assign following properties in widget configuration callback:

  • accessToken String (required) The authorization token for the customer account that contains the Name Page. You can get or create this value on 'Access Tokens' account settings page

  • accessCode String (required) The code for the event that you want to store recordings into. You can get this code by looking at the end of the recording link on the 'Request Names / Your Link' tab for the Name Page.

  • loadCss Boolean Indicates whether to load CSS or not. Use this when you want to override widget styles.

  • fields Object Describes fields presentation options. See above for examples. You can pass in values for firstName, lastName, middleName and Email.