Tutorial: checkin-com

checkin-com

CheckIn.com

CheckIn.com provides the ability to create a registration, document verification or any other detail-oriented flow in the Portal.

In order to have this integration working in Portal, you'll need an account in CheckIn.com with a configured form according to their documentation.

Once you have the account, you would need a link to the JS file taken from their backoffice e.g. 'https://[operator].regily.com/[key].js' that you would need to use in the guide below.

In addition to that you would need to know the list of fields that CheckIn.com will provide you.

Registration Flow

This flow is used when you would like to use CheckIn.com in registration flow so that players will undergo the full document verification while performing registration.

Configuration

This section describes the steps you would need to take in order to connect your CheckIn.com form with Portal. In subsequent sections you'll see how to connect the form to some button on Portal.

  1. Go to Portal’s Control Panel, Tags Manager;
  2. Click “Create Tag” and select “Custom JS”;
  3. Give it a name (e.g. “CheckIn”), give a description;
  4. Assign a “On App Init” condition to this tag
  5. Insert the following contents of the Tag:
Playtech.API.common.getScript('https://[operator].regily.com/[key].js');
window.onCheckinLoad = (sdk) => {
    /**
     * This is needed if you are using email / userName fields in your CheckIn form. 
     */
	sdk.dataFlow.setOnUpdate(async (data, dataDiff) => {
		if (dataDiff?.credentials?.email) {
			const response = await Playtech.API.server.checkIfUsernameIsAvailable({ email: dataDiff.credentials.email });

			if (response.emailAvailable === 'unavailable') {
				sdk.generate.dataError.duplicateUsername();
			}
		} else if (dataDiff?.credentials?.username) {
			const response = Playtech.API.server.checkIfUsernameIsAvailable({ userName: dataDiff.credentials.username });

			if (!response.usernameAvailable) {
				sdk.generate.dataError.duplicateUsername();
			}
		}
	});

    async function onComplete({
        data,
        completeData
    }) {
        const {
            email,
            // userName,
            password,
            birthdate,
            firstname,
            lastname,
            gender,
            zip,
            countrycode,
            // region,
            // state,
            stateCode,
            city,
            address,
            cellphone,
            phonePrefix,
            currencyCode,
            job: {
                occupation,
                otherOccupation
            },
            tc,
            citizenship,
            streetName,
            buildingNumber
        } = data;

        const { userId } = await Playtech.API.auth.register({
            dataMap: {
                email,
                // userName,
                password,
                ...birthdate ? { birthdate: birthdate.split('T')[0] } : {},
                firstname,
                lastname,
                ...gender ? { sex: gender === 'male' ? 'M' : 'F' } : {},
                zip,
                countrycode,
                ...stateCode ? { state: stateCode } : {},
                city,
                address,
                cellphone: `${phonePrefix}${cellphone}`,
                phone: `${phonePrefix}${cellphone}`,
                currencyCode: 'CAD',
                occupation: otherOccupation || occupation,
                citizenship,
            },
            addressDetails: {
                streetName: streetName,
                buildingNumber: buildingNumber
            }
        });

        await Playtech.API.auth.login(userName, password);

        await Playtech.API.server.checkInDotComListenerRequest({
            requestContent: btoa(unescape(encodeURIComponent(JSON.stringify(completeData)))),
            getParameters: []
        });
    }

	sdk.dataFlow.setOnComplete((...args) => onComplete(...args));
};

Show CheckIn.com as a button in a Web Content

Use the following HTML in your Web Content and modify accordingly:


<button class="btn" id="checkInButton">Register</button>
<script>
    document.querySelector('#checkInButton').addEventListener('click', (event) => {
		// cancel default browser behaviour
		event.preventDefault();
	    // ensure a correct language is set
	    window.checkin.settings.setLang(Playtech.API.language.getCurrentLanguage().slice(0, 2));
	    // set existing player data
	    const {
		    firstName,
		    lastName,
		    birthDate,
		    username
	    } = Playtech.fetchUserDetails();

	    window.checkin.dataFlow.setKnownData(JSON.stringify({
		    user: {
			    firstName,
			    lastName,
			    birthdate: birthDate,
			    externalId: username
		    }
	    }));
	    // open checkIn.com overlay
	    window.checkin.signUp.open();
    });
</script>

Show CheckIn.com when clicking on Register button in the header

  1. Create a page called /check-in-registration, give it a title
  2. Mark it as "Show Page as Popup", select "Hide title" and "Make modal" checkboxes
  3. Create a WebContent CHECK_IN_LOADER with the following content:

<div style="padding: 2em; text-align: center;">
	<h3>Loading your new registration form...</h3>
	<hub2-loader></hub2-loader>
</div>
<script>
	setTimeout(() => {
		// ensure a correct language is set
		window.checkin.settings.setLang(Playtech.API.language.getCurrentLanguage().slice(0, 2));
		// open checkIn.com overlay
		window.checkin.signUp.open();
		// set existing player data
		const {
			firstName,
			lastName,
			birthDate,
			username
		} = Playtech.fetchUserDetails();

		window.checkin.dataFlow.setKnownData(JSON.stringify({
			user: {
				firstName,
				lastName,
				birthdate: birthDate,
				externalId: username
			}
		}));
        // close current page as popup
		Playtech.API.popup.closePageAsPopup();
	}, 500);
</script>
  1. Place CHECK_IN_LOADER WebContent onto the /check-in-registration page
  2. In Settings -> Site configure Registration page to be /check-in-registration
  3. Open Portal as a guest (e.g. in incognito) and click on Sign Up button

Document Upload Flow

This flow is used when player is already registered, but you still need to do the document upload flow separately in My Account.

Configuration

This section describes the steps you would need to take in order to connect your CheckIn.com form with Portal. In subsequent sections you'll see how to connect the form to some button on Portal.

  1. Go to Portal’s Control Panel, Tags Manager;
  2. Click “Create Tag” and select “Custom JS”;
  3. Give it a name (e.g. “CheckIn”), give a description;
  4. Assign a “On App Init” condition to this tag
  5. Insert the following contents of the Tag:
Playtech.API.common.getScript('https://[operator].regily.com/[key].js');
window.onCheckinLoad = (sdk) => {
    sdk.dataFlow.setOnComplete(({
        completeData
    }) => {
        Playtech.API.server.checkInDotComListenerRequest({
            requestContent: btoa(unescape(encodeURIComponent(JSON.stringify(completeData)))),
            getParameters: []
        });
    });
};

Show CheckIn.com as a button in a Web Content

Use the following HTML in your Web Content and modify accordingly:


<button class="btn" id="checkInButton">Register</button>
<script>
    document.querySelector('#checkInButton').addEventListener('click', (event) => {
		// cancel default browser behaviour
		event.preventDefault();
	    // ensure a correct language is set
	    window.checkin.settings.setLang(Playtech.API.language.getCurrentLanguage().slice(0, 2));
	    // set variant
	    window.checkin.settings.setVariant('idscan');
	    // open checkIn.com overlay
	    window.checkin.signUp.open();
    });
</script>

Other flows

In case you would like to have some more complex flows, you may use Player Tags from our Public API in order to show the button only in certain cases. Feel free to reach out to your Portal representative in case