The Copytalkerconstructor takes two arguments, a configuration object and a callback to execute upon instantiation. In the example above, the configuration object passed was as follows:

    {
    context: { "examplecontext": "This is from a tutorial." },
    apiKey: '5968d1e9-f54b-48bf-b822-df676d4af9be',
    esotericUserId: 'externalidentifier@yourwebsite.com',
    userToken: '9f82077f-66ee-4e3d-946d-f6a3c6119f4f'
    }

Let's took a look at this object first, highlighting the critical properties it will need to expose.

• apiKey - This key is created and administered by Copytalk. Each integration partner looking to host the button will be given their own unique api key.
• esotericUserId - This identifier is necessary for creating and retrieving a user token. It should be a unique identifier for each user you wish to expose the Copytalker button to.
• userToken[optional] - A user token is an obfuscation of a Copytalk subscriber customer identifier. The user token is used to associate any uploaded dictations with an active Copytalk account. User tokens are automatically created the first time a user uses the Copytalker on your domain. You can persist the user token in your database for future usage.
• context[optional] - This is an optional JSON object which can be used to provide more context for the uploaded dictation. An example of how context may be used is to inform Copytalk that the uploaded dictation is part of a back end integration work flow.

The second argument of the Copytalker constructor is a callback function which will be called after successful instantiation of the button. In the example we're using, the callback is as follows:

    function (recorder) {
        if (recorder) {
        recorder.init();
        /*Additional code here*/
        }
        else {
        console.err("Failed to create Copytalker.");
    }

The first user experience we'll examine is one where you as the host of the Copytalker can provide a valid user token. This is the most seamless of the user experiences as it requires no additional authentication from your end user. The following is an example of how to instantiate the Copytalker with a previously validated user token:

    var recorder = new CtRecorder(
    {
    apiKey: '5968d1e9-f54b-48bf-b822-df676d4af9be',
    esotericUserId: 'externalidentifier@yourwebsite.com',
    userToken: '9f82077f-66ee-4e3d-946d-f6a3c6119f4f'
    }
    , ...

You should notice a few differences from our initial example. First, we've excluded the callback function just to save space in the tutorial. More importantly, the optional context property was not included in the configuration object.

This configuration prepares the button for immediate use.
Note: If your user has never used the button from your domain, the user will be prompted to white list your domain by logging into their Copytalk account.

The next user experience we'll examine is one where you can not provide a valid user token. An example follows:

    var recorder = new CtRecorder(
    {
    apiKey: '5968d1e9-f54b-48bf-b822-df676d4af9be',
    esotericUserId: 'externalidentifier@yourwebsite.com'
    }
    , ...

This configuration will appropriately render the button. Once your users clicks the button, they will be prompted to either log into an existing Copytalk account or become a Copytalk subscriber. A successful login or registration of a new Copytalk account will return a user token, as well as white listing of the domain which originated the request. The user will then be able to create and upload dictations through the Copytalker.

Sent Dictations

The context property of the configuration object passed to the Copytalker constructor can be used to provide additional information relative to the dictations created and uploaded through the button. This property is a plain JSON object. The most common use of the context property is to provide Copytalk with information to use when delivering a transcript. This allows for deeper back end integration and automation during the transcript delivery process.

Let's use the following scenario as example. Let's assume your website is a CRM and your user is dictating notes from an annual review with a client contact. At the end of the transcription workflow, you want to archive the dictation content by creating a note under that contact's profile. You could make Copytalk aware of this intent through the context object like so:

{"clientcontactid":"8gbn489f0d","actiontype":"createnote"}

Note that to truly make use of back end automation, you'll need to work with our developers. They will need to write code to interpret and appropriately handle the context passed. Contact the Copytalker development team at copytalkerteam@copytalk.com for more information.

End-to-end Integration

The Copytalker is designed to facilitate end-to-end integration. This means the transcription content of audio uploaded by the Copytalker can be returned in a variety of ways simply by exposing certain properties within the context object. The following is a walkthrough of how to utilize our generic transcription return workflow.

{
    //The api endpoint address which Copytalk will send transcription information back to.
    "callback": /*url endpoint*/ 
    //Information necessary for constructing a web request against the provided endpoint.
    ,"requestData": 
        {
            "authorization":/*Bearer or Basic*/
            ,"token":/*an authorized token*/
            ,"method":/*POST or PUT*/
        }
    //Optional additional information you may use when handling Copytalk's returned transcription content.
    [,optional additional properties 
    ]
}

{
    "Copytalk":
        {
            "Transcript":
                {
                    "Created":[timestamp]
                    ,"Subject":[subject (if specified)]
                    ,"Text" :[text]
                }
            ,"Context":[original context object provided]
    }
}

{
    "callback": "https://mycrm.com/api/contact/194/createnote" 
    //194 is the contact's unique ID
    ,"requestData": 
        {
            "authorization":"Bearer"
            ,"token":"tu959+ewtwegkjh54rWRCgrge566fdfsdfFxmKeeYYg="
            ,"method":"POST"
        }
    ,"internalContext": 
        {
            "source":"Copytalker Tutorial"
            ,"followup":"Create Activity Record"
            ,"contactid":"194"
        }
}

{
 "Copytalk":
            {
            "Transcript":
                {
                    "Created":"2019-04-23 15:38:32"
                    ,"Subject":"Annual Review Meeting"
                    ,"Text" :"Met with Mark on April 23rd"[...]
                }
            ,"Context":
                {
                    "callback": "https://mycrm.com/api/contact/194/createnote" 
                    ,"requestData":
                    {
                        "authorization":"Bearer"
                        ,"token":"tu959+ewtwegkjh54rWRCgrge566fdfsdfFxmKeeYYg="
                        ,"method":"POST"
                        }
                    ,"internalContext":
                    {
                        "source":"Copytalker Tutorial"
                        ,"followup":"Create Activity Record"
                        ,"contactid":"194"
                    }
                }
       }
}

POST /api/contact/194/createnote HTTP/1.1
Host: mycrm.com
Authorization: Bearer tu959+ewtwegkjh54rWRCgrge566fdfsdfFxmKeeYYg=
Content-Type: application/json
Cache-Control: no-cache

 
{"Copytalk":{
    "Transcript":
    {
        "Created":"2019-04-23 15:38:32"
        ,"Subject":"Annual Review Meeting"
        ,"Text" :"Met with Mark on April 23rd"
    }
    ,"Context":
    {
        "callback": "https://mycrm.com/api/contact/194/createnote" 
        ,"requestData":
        {
            "Authorization":"Bearer"
            ,"token":"tu959+ewtwegkjh54rWRCgrge566fdfsdfFxmKeeYYg="
            ,"method":"POST"
            }
        ,"originalContext":
        {
            "source":"Copytalker Tutorial"
            ,"userid":"Create Activity Record"
            ,"objectid":"194"
        }
    }
 }
}

The following table outlines the various UI elements utilized by Copytalker, as well as the necessary class name that must be provided to override them. Following the table is a visual diagram of the individual components.

Example using an object reference

The following code snippet shows the proper syntax for overriding the default Copytalker UI by passing an object to the init method. Notice that the elements are found via the document.getElementsByClassName method. This is for two reasons. One, any existing ID attributes that you have given to your elements will be overwritten. Two, each property within the object passed must be a primitive HTML element type as defined by the browser (and not a jQuery object, for example).

                            
var recorder = new CtRecorder(
{ 
    ...abbreviated...

}, function (recorder) {
    if (recorder) {
        var htmlOverrides =  {
                
                logOutBtn:   document.getElementsByClassName('ctr-logout')[0],
                stopBtn:  document.getElementsByClassName('ctr-stop')[0],
                discardBtn: document.getElementsByClassName('ctr-discard')[0],
                previewBtn:  document.getElementsByClassName('ctr-preview')[0],
                sendBtn:  document.getElementsByClassName('ctr-send')[0],
                recordBtn:  document.getElementsByClassName('ctr-record')[0],
                recordingTimer:  document.getElementsByClassName('ctr-timer')[0],
                recordingMessage: document.getElementsByClassName('ctr-message')[0],
                recordingHeader: document.getElementsByClassName('ctr-header')[0],
                workingElem: document.getElementsByClassName('ctr-working')[0],
                
            };
        var htmlElements = recorder.init(htmlOverrides);
        console.log(htmlElements);