Integration

In this section, we will see how to integrate your Verify with Synaps button easily.

If you need any assistance, don't hesitate to contact technical support at riwan@synaps.io

1. Integrate Synaps Web SDK

Embed the Synaps Javascript SDK to your web app

using script tag

<script src="https://sdk.synaps.io/verify.js"></script>

using npm

npm install @synaps-id/synaps-js

2. Add Synaps element

There is two integration methods : modal or embed

modal : place a button and open the verification flow when user click on the button

embed : integrate directly the verification flow into your interface

Add the following element to your page to add the button.

<button id="synaps-kyc">Verify with Synaps</button>

Note that you can also use it as a link

<a id="synaps-kyc">Verify with Synaps</a>

Make sure that the element have synaps-kyc as id attribute

Embed integration

Add the following element to add the verification flow to your page

<div id="synaps-kyc-embed"></div>

Make sure that the element have synaps-kyc-embed as id attribute

3. Init SDK

To init the Synaps SDK, simply write down the following line in your JS.

const Synaps = new SynapsClient('YOUR_CLIENT_ID');
Synaps.init();

By default, the SDK type is set to modal which means that need to implement the Verify with Synaps button to your page to make it work. However, you can set the type to embed, simply by passing it as an option while you declare the SynapsClient.

const Synaps = new SynapsClient("YOUR_CLIENT_ID", {
type: "embed"
});
Synaps.init()

4. Callbacks

Synaps Web SDK lets you set callbacks on some events.

Onboarding success

On completed onboarding, Synaps will trigger a callback with an authorization code in it. This code is required when you request a user's access tokens. (see OAuth Workflow)

Synaps.on('userOnboardSuccess', (code) => {
// Call your API to exchange code with user access tokens
});

Onboarding declined

When users don't want to share their data with your app.

Synaps.on('userOnboardDeclined', () => {
// Some action
});

Verification flow exited

When users close the verification flow

Synaps.on('userExited', () => {
// Some action
});

5. Customization

2 buttons styles are integrated by default in the SDK

Blue version

<button class="synaps-verify-btn-blue" id="synaps-kyc">
Verify with Synaps
</button>

White version

<button class="synaps-verify-btn-white" id="synaps-kyc">
Verify with Synaps
</button>

However, we let you customize the button as much as you want. We strongly advise you to keep the text "verify with synaps" so users already verified know that they can share their data with you in 2 clicks. You can add the following Synaps logo (blue/white version) to your button.

6. Options

To start the Synaps verification flow, an email is required. If the user has already a Synaps account he will then log in and share his documents in a few seconds. Otherwise, the user has to create his Synaps account only with his email. To avoid the user to type his email, we let you prefill it by calling the following method.

To start the Synaps verification flow, an email address is required. If the user already has a Synaps account, they will then log in and share their documents in a few seconds. Otherwise, the user has to create their Synaps account only with their email address. To avoid the user having to type in their email address, we let you prefill it by using the following method.

Synaps.init({
email: 'john.doe@synaps.io'
});