Back to top

Call widget integration

This widget allows for names recording through a phone call right on the page of your event.

Installation

To get started you need to include our script file in your page. The file doesn't have any dependencies.


<script src="https://www.name-coach.com/namecoach-call-widget-v1.js"></script>


Now you can start using the widget. There are two ways of doing this:

  1. You can use the widget sort of 'as is'. In this form, you don't have to worry about presenting form field UI for email, first name, last name, etc.. If you already have a form on the page, then this is a good way to go.
  2. You can hook the javascript / widget implementation to an existing form. In this case, you are responsible to creating the form field UI for collecting the info.

Usage:

Existing Widget

Note

  • The access_code 1-to-1 maps to a Name Page (see demo Name Page). After subscribed to our Integration Service, you will get an access code that retrieves name recordings for all members of your institution (not just those on a given Name Page.)

Example

  <button type="button" id="initiate-call">Initiate a call</button>

  <script type="text/javascript">
    $(document).ready(function() {

      var form_data = { access_code:  { value: 'TEST'},
                        email:        { value: '[email protected]',  placeholder: 'Email', type: 'email', required: true },
                        first_name:   { value: 'John',          placeholder: 'First Name', required: true },
                        last_name:    { value: 'Doe',           placeholder: 'Last Name' },
                        phone_number: { value: '+16467129255' } };

      namecoach.widget.initModalForm("#initiate-call", form_data,
        function(response) {
          console.log('The call has been successfully made');
          console.log(response);
        }, function(response, code) {
          console.log('Failed to make the call');
          console.log(response);
          console.log(code);
      });
    })
  </script>
  

Call me example

Parameters

  • button selector: the selector of the "Call me" button. It adds an onclick event to it (required parameter)

  • form data: previously saved user data like an email, a name etc.(required parameter)

    • access_code: an access code for the Name Page (required parameter)

    • email: (optional parameter)

    • first_name: (optional parameter)

    • last_name: (optional parameter)

    • phone_number: (optional parameter)

  • Success callback: the callback handles the event when the call is being made (required parameter)

  • Failure callback: the callback handles the event, if the call is failed (required parameter)

    There can be several reasons, why the call can't be made. The response code will help you here

    • 404: The event can't be found by access_code

    • 405: The email is already used. The widget works only if you are a new user

    • 422: Invalid params or the phone number is not supported

    • 500: Internal Server Error. Please, contact Namecoach administrator if you reeive this

Custom form

Note

  • The access_code 1-to-1 maps to a Name Page (see demo Name Page). After subscribed to our Integration Service, you will get an access code that retrieves name recordings for all members of your institution (not just those on a given Name Page.)

It's allowed to attach this widget to the custom form

Example

  <form id="test_form">
    <input type="hidden" name="access_code" value="TEST" />
    <input type="text" name="email"  />
    <input type="text" name="first_name"  />
    <input type="text" name="last_name"  />
    <input type="text" name="phone_number"  />
    <input type="submit" value="Submit"/>
  </form>

  <script type="text/javascript">
    $(document).ready(function() {
      namecoach.widget.initCustomForm("#test_form", function(response) {
        console.log('Call was successfull initiated from custom form');
        console.log(response);
      }, function(response, code) {
        console.log('Call initiation failed from custom form');
        console.log(response);
        console.log(code);
      });
    })
  </script>
  

Parameters

  • Form selector: Custom form selector. It adds an onsubmit event to it (required parameter)

  • Success callback: the callback handles the event when the call is being made (required parameter)

  • Failure callback: the callback handles the event, if the call is failed (required parameter)

    There can be several reasons, why the call can't be made. The response code will help you here

    • 404: The event can't be found by access_code

    • 405: The email is already used. The widget works only if you are a new user

    • 422: Invalid params or the phone number is not supported

    • 500: Internal Server Error. Please, contact Namecoach administrator if you receive this