Getting up and running with your new Checkin.com flow is super simple, regardless if it's a full sign-up flow or a stand-alone ID Scan flow. Before you get started it will be useful to have a look at the section on technical key concepts.

Once the pre-configuration is done, it will be adjusted to fit your current back-end requirements. All data comes correctly formatted and labeled for you to re-use all your current API connections.

Integrating your Checkin.com flow is done in three simple front-end steps:

Load the library
Add trigger points
Read and store the data (optional for stand-alone ID Scan flow)

If you want to extend your integration, there is also an optional step where you can add intermediate validations and data handling during the user journey.

1. Load your Checkin.com library

Once your flow has been pre-configured, you will receive your script together with a tailor-made integration guide.

You should load this library by adding it to the opening <head> tag in your main index.html file.

<script src="https://[partner].regily.com/[key].js" async></script>

2. Trigger the flow

The flow is triggered by using the globally scoped window.checkin.signUp.open method.

You should add the trigger to all your registration buttons.

//This should be executed as a call when a "signup", "register" or "verification" button is pressed
window.checkin.signUp.open()

//Button example
<button onClick='window.checkin.signUp.open()'>Open with button click</button>

// This will ensure that the Checkin library is fully loaded
window.onCheckinLoad = (checkin) => {
  checkin.signUp.open()
}

// There are many possible settings and a good practice is to set them inside the onCheckinLoad
window.onCheckinLoad = (checkin) => {
  checkin.settings.setLang('de')
  checkin.settings.setCountry('DE')
  checkin.signUp.open()
}

3. Capture and create the user account

This step is optional for stand-alone ID Scan flows.

When a user has completed the registration, a complete event is triggered. This event can be captured by using the setOnComplete method.

The setOnComplete will return two JSON structures:

data contains the captured JSON structure and is pre-configured by Checkin.com to match your backend
normalizedData contains all data collected in the standard Checkin.com Framework JSON format. This is normally not needed but can be handy for logging purposes.

Once you have captured the data, you should submit it to your backend.

In case the account creation fails, or you want to reject a user, you can also return and display an error message.

The following examples shows how you can capture the complete event with the setOnComplete() function.

window.onCheckinLoad = (checkin) => {
  checkin.dataFlow.setOnComplete(({ data, normalizedData }) => {
  // you should save all data to your backend here.
    console.log('Complete dataset captured', data)
    
    //This is an example function and should be changed 
    yourDataProcessorBackendSave(data)
  })
}

window.onCheckinLoad = (checkin) => {
  checkin.dataFlow.setOnComplete(({ data, normalizedData }) => {
  // you should save all data to your backend here.
    console.log('Complete dataset captured:', data)
    
    // Add your current endpoint for registrations here
    var url = 'https://localhost:8888/api/signup'
    
    fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: data})
      .then(function (data) {
        if (data.status == 200) {
          console.log('Save successful!', data)
          resolve()
        }
      }).catch(function (err) { 
      	return checkin.generate.dataError.unknown()
      })
  })
}

window.onCheckinLoad = (checkin) => {
  checkin.dataFlow.setOnComplete(({ data, normalizedData }) => {
      // process your data and extract your errors
      const { error } = yourDataProcessor(data)
      if ( error === 'duplicateAccount' ) {
        return checkin.generate.dataError.duplicateAccount()
      } else if ( error === 'custom' ) {
        return checkin.generate.dataError.custom({
          title: "Custom Error title",
          message: "Custom Error message",
          type: "Custom Error type",
        });
      }

  })
}

The Checkin.com SDK provides several pre-configured error message, but you can also customize the content of your error messages.

For more detailed information on error handling, see this section.

4. Done!

When you have completed the steps above, you are ready to start testing your Checkin.com implementation.

Please see the next section for some best practices and test scenarios.

Optional Steps

Validate data updates during the registration

In addition to the complete event, an update event is triggered after each step the user goes through.

You can use dataFlow.setOnUpdate to subscribe to data changes in order to verify and/or generate error messages based on your back-end validations. All possible front-end input validation is already implemented and handled by Checkin.com

To allow for potential delays in partner side validations, error handling is asynchronous and error messages are always displayed at the end of each chapter rather than directly.

setOnUpdate contains two sets of data.

data contains the full JSON data collected so far during the registration
diff contains the specific field which was updated

window.onCheckinLoad = (checkin) => {
  sdk.dataFlow.setOnUpdate((data, diff) => {
    console.log('Update captured', {data, diff})
    // process your data here
    
  })
}

window.onCheckinLoad = (checkin) => {
  sdk.dataFlow.setOnUpdate((data, dataDiff) => {
    // example of data check and error trigger
    if (dataDiff.credentials && dataDiff.credentials.email) {
      if (dataDiff.credentials.email.startsWith("custom")) {
        return checkin.generate.dataError.custom({
          title: "Custom Error Title",
          message: "Custom Message",
          type: "Custom Type",
        });
      }
      if (dataDiff.credentials.email.startsWith("duplicate")) {
        return checkin.generate.dataError.duplicateAccount();
      }
      if (dataDiff.credentials.email.startsWith("unknown")) {
        return checkin.generate.dataError.unknown();
      }
      if (dataDiff.credentials.email.startsWith("standalone")) {
        return checkin.generate.dataError.standalone();
      }
    }
  })
}

For more detailed documentation on the update events, see this page

Settings and configurations

You will find more settings and configuration options provided by the Checkin.com SDK here.