TutorCruncher Socket

TutorCruncher Socket allows you to quickly and easily list approved tutors on your website so that clients can request the services they want in a straightforward way.

What is TutorCruncher Socket, and what can I do with it?

Socket allows you to display your tutors and allow enquiries through your website. The tutors information is pulled directly from TutorCruncher, and whenever a client creates an enquiry they are created within TutorCruncher.

The first step is to enable Socket within TutorCruncher.

Setting Socket Up

How do I enable Socket within TutorCruncher?

Under System > Settings > Branch Credentials, enable the 'Public Tutor profiles' option.

Go to System > Settingss > Add or Edit Integrations, and click 'Add Socket Integration'.

Once you've clicked that, you'll have the following:

Your public API key is included in the Webhook URL.

Your private API key is the one under API key and should never be shared within anyone.

How do I find my public API key?

Once you have Socket enabled, your API key can be found under System > Settings > Integrations and look for the integration called Socket Integration.

Your public API key is the one included in the Webhook URL between https://socket.tutorcruncher.com/ and /contractors/set. In this case, its 123456789abc, and will be used to integrate Socket into your website.

Do not share the API key (abc123...) with anyone.

Do you have a test key I can use?

You can use '9c79f14df986a1ec693c' as a test key to work with any socket integration.

Please note that this will not submit anything to your TutorCruncher account.

Using Socket on my website

There are three main options for using Socket on your website.

Importing Socket

The first step is to import socket into the page.

Anywhere on the page between either the <head></head> or <body></body> tags, insert the following line:

<script src="https://cdn.tutorcruncher.com/socket/latest/socket.js"></script>

We recommend putting it just before the last tag, so it's easy to find. For instance:

<body>
<!-- Rest of your webpage code -->

  <script src="https://cdn.tutorcruncher.com/socket/latest/socket.js"></script>
</body>

List Tutors on my website

Use socket to list my tutors on my website

Wherever you wish to include the tutors, put in the following line:

<div id="socket"></div>

Then, below where you have imported Socket, put in the following:

<script>
  socket('YOUR_API_KEY')
</script>

You need to replace 'YOUR_API_KEY' with your public API key. How do I find that?

How do I let clients request a tutor?

As long as you have a tutor listed on your website, your clients can request a tutor.

See here for an example.

If a client requests a tutor, I'd like a job to be created with the tutor and client attached

No problem!

Under System > Settings > Jobs and Reports, enable the 'Create job for enquiries' option. Now, whenever a client enquires, a new job will be created with the tutor listed as an applicant for it. You can then decide whether or not to assign that tutor, or choose a different one.

How can I choose which tutors should be displayed?

Go to the tutors that you want to approve and apply the label 'Public Profile'.

You can then view the fields that will be displayed under System > Settings > Approve Tutor Profiles.

If no tutors are listed, you can click the 'Refresh Public Profiles' button. If you still have no tutors displayed, you will need to check that you have applied the 'Public Profile' label correctly.

If you think a tutor's profile is ready to be listed, click the 'Approve' button next to each tutor.

My tutors profiles on my website seem out of date, how do I update them?

If an admin or a tutor makes a change to a public profile, then you'll need to approve the change under System > Settings > Approve Tutor Profiles.

How can I remove a public tutor profile?

If you don't want a public tutor profile displayed on your website anymore, first remove the label 'Public Profile' on the tutor in TutorCruncher by clicking on it in the dropdown menu. Then go to System > Settings > API > Approve Public Tutor profiles and click the button 'Refresh Public Profiles'. To remove the tutor's profile you then have to 'Approve and Release' the deleted profile again. Refresh your website to see if the profile was removed.

How can I customise the fields that will be displayed?

The tutors name and town will be displayed in Socket, as well as any Teaching Skills they have chosen. To add more fields, simply add or edit Extra Attributes and make sure to check the 'Client Accessible' option so that they are displayed.

Don't forget to update your list of tutors afterwards!

Please note: Editing the fields shown inside TutorCruncher socket can take up to 24 hours to update.

Enquiry Forms with Socket

Use Socket to embed an enquiry form on my website

Wherever you wish the form to display on your webpage, enter the following line:

<div id="socket-enquiry"></div>

Then, below where you have imported Socket, put in the following:

  <script>
    socket('YOUR_API_KEY', {
      mode: 'enquiry',
      element: '#socket-enquiry'
    })
  </script>

You need to replace 'YOUR_API_KEY' with your public API key. How do I find that?

Use Socket to embed an enquiry popover on my website

This will embed a button on your webpage that loads the enquiry form.

Wherever you wish the button to display on your webpage, enter the following line:

<div id="socket-enquiry-modal"></div>

Then, below where you have imported Socket, insert in the following:

  <script>
    socket('YOUR_API_KEY', {
      mode: 'enquiry-modal',
      element: '#socket-enquiry-modal'
    })
  </script>

You need to replace 'YOUR_API_KEY' with your public API key. How do I find that?

How do I enable other fields in my enquiry form?

You can add or edit Extra Attributes, making sure both the 'Enquiry Form' and 'Client Accessible' options are both checked.

Please note: Editing the fields shown inside TutorCruncher socket can take up to 24 hours to update.

Examples

Example of listing tutors on a website

<body>
  <h1>This is a webpage for my tuition agency</h1>
  <p>Listed below are my tutors</p>

  <div id="socket"></div>

  <p>We just love using TutorCruncher for our business.</p>

  <script src="https://cdn.tutorcruncher.com/socket/latest/socket.js"></script>
  <script>
    socket('YOUR_API_KEY')
  </script>
</body>

See here for an example of it in action.

Example of embedding an enquiry form

<body>
  <h1>This is a webpage for my tuition agency</h1>
  <p>Get in touch by filling in the contact form below</p>

  <div id="socket-enquiry"></div>

  <p>We just love using TutorCruncher for our business.</p>
  <script src="https://cdn.tutorcruncher.com/socket/latest/socket.js"></script>
  <script>
    socket('YOUR_API_KEY', {
      mode: 'enquiry',
      element: '#socket-enquiry'
    })
  </script>
</body>

See here for an example of it in action.

Example of embedding an enquiry popover/modal

<body>
  <h1>This is a webpage for my tuition agency</h1>
  <p>Click the button to contact us</p>

  <div id="socket-enquiry-modal"></div>

  <p>We just love using TutorCruncher for our business.</p>
  <script src="https://cdn.tutorcruncher.com/socket/latest/socket.js"></script>
  <script>
    socket('YOUR_API_KEY', {
      mode: 'enquiry-modal',
      element: '#socket-enquiry-modal'
    })
  </script>
</body>

See here for an example of it in action.

Example of listing tutors and embedding an enquiry form

<body>
  <h1>This is a webpage for my tuition agency</h1>
  <p>Listed here are my tutors</p>

  <div id="socket"></div>

  <p>Get in touch by filling in the contact form below</p>

  <div id="socket-enquiry"></div>

  <p>We just love using TutorCruncher for our business.</p>
  <script src="https://cdn.tutorcruncher.com/socket/latest/socket.js"></script>
  <script>
    socket('YOUR_API_KEY', {
      mode: 'enquiry',
      element: '#socket-enquiry'
    })
  </script>
  <script>
    socket('YOUR_API_KEY')
  </script>
</body>

See here for an example of it in action.

Setting Socket up with my Wordpress website?

It's just as simple as above, you just need to find the place to add the code.

When on your Dashboard, go to Pages > All Pages > The-page-you-want-to-include-Socket-on. Most people would choose Home or Index.

Then select the 'Text' view.

Then find where you wish to insert Socket into the webpage and insert all of the lines together, like so:

Using Socket from a different domain

Because your API key is public, anyone who looked at your website could use your key to display your tutors on their own website. To make sure this cannot happen, we check that the website you are trying to load Socket from is the same one that was entered into TutorCruncher (under System > Settings > Branch Website) when you created the Socket integration.

This means that if you are developing your website on a different domain (testing-example.com for instance), you won't be able to use Socket with your public key. Instead, you can use the demo key, above.

I think I've done everything correctly, but nothing is displayed?

My subject filter is empty, how do I change this/not display it?

If your tutors have no teaching skills added to their profiles, then there will be no subjects displayed.

You can either add teaching skills on their profiles within TutorCruncher, or not display the subject filter by adding an extra option of "subject_filter": false to where you declare Socket on your page.

For instance:

  <script>
    socket('YOUR_API_KEY', {"subject_filter": false})
  </script>

Advanced Customisation

You can browse the codebase at the link below:

https://github.com/tutorcruncher/socket-frontend/

Socket parameters

Name Default Description
api_root TutorCruncher Socket Backend The URL of the backend you wish to use. TutorCruncher Socket Backend
element #socket The id of the element created
router_mode hash The routing mode when clicking on a tutor's profile.
mode grid Which mode you want to use (explained below)
url_root / The root URL of the page you are using Socket from eg. '/our-tutors/'
subject_filter true Whether or not the subject filter is displayed

We use some strings within Socket that you may want to change by passing them as parameters also.

Name Default string
skills_label 'Skills'
contractor_enquiry_message 'Please enter your details below to enquire about tutoring with {contractor_name}.'
enquiry_message 'Please enter your details below and we will get in touch with you directly.'
contractor_enquiry_button 'Contact {contractor_name}'
contractor_details_button 'Show Profile'
submit_enquiry 'Submit Enquiry'
enquiry_submitted_thanks 'Enquiry submitted, thank you.\n\nYou can now close this window.'
enquiry_button_text 'Get in touch'

Modes

grid

Generates a div of your tutors in a grid format, as per the example here.

enquiry

Generates an enquiry form inside the page using fields you customise within TutorCruncher, as per here

enquiry-modal

Generates a button inside the page which, when clicked, will load a modal of the enquiry form. More about modals.