Getting up and running with your new Checkin.com flow is super simple. 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
Capture the data

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 import this 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 this to all points where you want to trigger the module.

//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 the user data

When a user has completed the full journey, a specific event is triggered to indicate this. This event should be captured with thesetOnComplete method.

setOnComplete returns 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 push it to your back-end.

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 }) => {
      // 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",
        });
      }

  })
}

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()
      })
  })
}

As a best practice, it is recommended to also include error handling in case something went wrong with storing the data, or in case you want to reject the user due to validations on your end.

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.

Next steps

Depending on your setup and needs, you might want to extend the implementation further.

GetID

If you have GetID (IDScan) configured:

It is recommended to implement the API to fetch the latest status
Additional settings and configurations can be found here

Sign-up

If you also have a sign-up flow configured:

You might want to add additional handling of user data

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.

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.