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
Embed the Synaps Javascript SDK to your web app
using script tag
<script src="https://sdk.synaps.io/2.0.3/verify.js"></script>
using npm
npm install @synaps-io/synaps-client-sdk-js
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-btn">Verify with Synaps</button>
Note that you can also use it as a link
<a id="synaps-btn">Verify with Synaps</a>
Make sure that the element have synaps-btn
as id
attribute
Add the following element to add the verification flow to your page
<div id="synaps-embed"></div>
Make sure that the element have synaps-embed
as id
attribute
To init the Synaps SDK, simply write down the following line in your JS.
session_service must be replaced either by workflow or corporate
workflow - for know your customer
corporate - for know your business
const Synaps = new SynapsClient('session_id', 'session_service');Synaps.init();
To get a session_id you need to create an app on Synaps Manager. Once you selected your service type, you will have to go in your "integration" tab and copy your Api-Key.
The Api-Key is hided because it is highly confidential. You have to store it on your server and never on the client side. The only thing that should be exposed to the user is the session_id.
To create a session_id, you have to call the API related to the service you chose. For instance, if you chose Identity service, go to Identity > Sessions in the documentation.
Once you initliazed your session_id, you will have to init the SDK with your session_id and a session_service.
session_service must be replaced either by workflow or corporate
workflow - for know your customer
corporate - for know your business
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('session_id', 'session_service');Synaps.init({type: "embed",})
Synaps Web SDK (javascript) lets you set callbacks on some events.
On completed onboarding, Synaps will trigger a callback.
Synaps.on('finish', () => {// Do something});
If the user close the workflow (modal only), Synaps will fire a callback.
Synaps.on('close', () => {// Do something});
2 buttons styles are integrated by default in the SDK
<button class="synaps-verify-btn-blue" id="synaps-btn">Verify with Synaps</button>
<button class="synaps-verify-btn-white" id="synaps-btn">Verify with Synaps</button>
We give you the possibility to customize your workflow with your colors. You can set a primary color and a secondary color, it will create a verification flow tailored to your compliance needs and your brand.
To add primary and secondary colors, simply add colors with primary and secondary inside without the hashtag '#'.
const Synaps = new SynapsClient('session_id', 'session_service');Synaps.init({type: "embed",colors: {primary: "212b39",secondary: "ffffff",}})
If for some reason you need to bind our workflow on other element ID, you can.
Simply add, element_id as an option and it will automatically bind it.
const Synaps = new SynapsClient('session_id', 'session_service');Synaps.init({type: "modal",element_id: "synaps-identity-btn"})
With the code above, you will be able to execute the following easily. It will see synaps-identity-btn as the element to bind and once you will click on the button, it will shows the modal.
<button class="synaps-verify-btn-blue" id="synaps-identity-btn">Verify with Synaps</button>