SK-Components
Review the descriptions of each SK-Component and their configuration options.
|
This document covers SK-Components from the UI. For more information on their raw HTML format, see SK attributes in custom HTML. |
skbutton
The skbutton component is a generic button component that you can configure to perform various operations, such as form submit and next event.
At the most basic level, the button element will progress an end user to the next user-facing page created by the flow when clicked.
The following image shows what the component looks like on the user-facing page for the node.
The following table describes each configuration field on the Identity Provider tab.
| Field | Description |
|---|---|
Button ID |
The ID of the button that serves as the main reference for any output the node can return. |
CSS Class |
The CSS class applied to the button element in the widget. |
Label |
The text that a user sees in a button on a user-facing page. If the field is left empty, the default label will be |
Button Value |
The value of the button provides additional data that can be attached to a submit event that might not be defined in the form fields. |
On the Image tab, there are additional configuration options, described in the following table.
| Field | Description |
|---|---|
Button Image (URL for an image) |
Configures a custom button image with a URL. |
Button Image Class |
The CSS class applied to the button image that you can define in the Custom CSS section in the flow or by an external CSS file linked in the flow settings. |
Button Image Placement |
The position of the button on the user-facing page. |
On the Event tab, there are additional configuration options, described in the following table.
| Field | Description |
|---|---|
Button Type |
The function of the button. For example, |
Form ID |
Field to enter the ID of the form tied to the button. |
OTP Input ID |
Field to enter the ID of the OTP input field being tied to the button. |
On the Loading tab, there are additional configuration options, described in the following table.
| Field | Description |
|---|---|
Color of Default Loading Indicator |
The color of the loading indicator when the button is pressed. |
Custom Loading Indicator Image URL |
A custom loading indicator configured through a valid URL for when a user clicks the button. |
Custom Loading Indicator Image Class |
The class of the custom loading indicator added through a valid URL when the button is pressed. |
skpolling
The skpolling component displays a loading animation component that is tied to a polling function defined by a challenge in the flow details. The skpolling component continues polling until the challenge status changes.
The following image is what the component displays on the user-facing page for the node.
The following table describes each configuration field on the Identity Provider tab.
| Field | Description |
|---|---|
CSS Class |
The CSS class applied to the indicator icon in the widget. |
Poll Interval |
The duration between polling functions that the widget will run in milliseconds. The default value is |
Poll Retries |
The number of times the widget will poll the challenge. The default value is |
Poll Challenge Status |
Select True or False to turn polling on or off. |
skIDP
The skIDP component is a Login button component you can use to trigger IdP logins as an alternative to using individual IdP connectors.
You can also use the skIDP component to reference external IdPs defined in PingOne in the Integrations → External IDPs section. For more information, see Identity providers. To reference an external IdP, add the component to a Custom HTML Template and select PingOne Authentication in the Identity Provider Connector field.
The following image is what the component displays on the user-facing page for the node.
The following table describes each configuration field on the Identity Provider tab.
| Field | Description | ||
|---|---|---|---|
Identity Provider Connector |
Selects an identity provider. Select a connector in your flow to act as an IdP. You can also select PingOne Authentication to reference an external identity provider. |
||
PingOne External Identity Provider |
Select an external identity provider from your PingOne environment.
|
||
PingOne External identity Provider ID |
The ID for the external identity provider from your PingOne environment.
|
||
Link with PingOne Use |
When enabled, DaVinci creates or updates a linked PingOne user account using attributes from the external IdP.
|
||
PingOne Population |
The PingOne population to use when authenticating a user.
|
||
Population ID |
The ID of the PingOne population to use when authenticating a user.
|
||
Button Text |
The text that a user sees in the button on a user-facing page. If the field is left empty, the default label will be |
||
Button ID |
The ID of the button that serves as the main reference for any output the node can return. |
||
Button CSS Class |
The CSS class applied to the button that can be referenced in other nodes in the same flow. |
On the Image tab, there are additional configuration options, described in the following table.
| Field | Description |
|---|---|
Button image (URL for an Image) |
Configures a custom button image with a URL. |
Button Image Class |
The CSS class applied to the button image that can be defined in the Custom CSS section in the flow or by an external CSS file linked in the flow settings. |
Button Image Placement |
The position of the button when displayed on the HTML page. |
skthirdpartyiframe
The skthirdpartyiframe component is used with specific connectors, such as the Jumio connector, to render custom screens. For example, when used with the Jumio connector, the component renders a Jumio authentication screen within an iframe.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description |
|---|---|
Class |
The CSS class applied to the iframe that can be defined in the Custom CSSsection in the flow or by an external CSS file linked in the flow settings. |
Width |
The width of the iframe in pixels. The default width is |
Height |
The height of the iframe in pixels. The default height is |
skerror
The skerror component is used to show validation error messages tied to specific input fields in a form.
By default, this element is not rendered. The error message is dynamically generated based on the validation message for that input field.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description |
|---|---|
Class |
The CSS class applied to the error message that can be referenced in other nodes within the flow. |
ID of input field associated with error message |
The ID of the input field that you want to display an error message for under particular conditions. |
skerrormessage
The skerrormessage component is used to show validation error messages tied to specific input fields in a form.
By default, this element is not rendered. The error message is dynamically generated based on the validation message for that input field.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description |
|---|---|
Class |
The CSS class applied to the error message that can be referenced in other nodes within the flow. |
ID of input field associated with error message |
The ID of the input field that you want to display an error message for under particular conditions. |
skinputfile
The skinputfile component is a Choose File button component that allows end users to upload files to a page.
The following image is what the component displays on the user-facing page for the node.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description |
|---|---|
Class |
The CSS class applied to the input field element. |
ID of component that will be associated with the base64 value of the file |
The ID of the component that will be associated with the base64 value of the file. |
On the Preview tab, there are additional configuration options, described in the following table.
| Field | Description |
|---|---|
Show Preview |
Configures whether or not a preview is displayed when adding files. |
Image |
Configures between |
Class of span added next to input button when file is set |
The CSS class applied to the span added next to the input button when a file is uploaded. |
Class of image added next to input button when file is set |
The CSS class applied to the image added next to the input button when a file is uploaded. |
Width of preview image in pixels |
The width of the preview image in pixels. The default width is |
Height of preview image in pixels |
The height of the preview image in pixels. |
skrecaptcha
The skrecaptcha component is a reCAPTCHA component that validates the end user is not a bot.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description | ||
|---|---|---|---|
Class |
The CSS class applied to the reCAPTCHA element. |
||
ID of component that will be associated with the recaptcha value |
The ID of the component that will be associated with the reCAPTCHA value and that can be referenced in other nodes within the flow. The autofilled ID is |
||
Recaptcha Site Key |
The site key for the reCAPTCHA element to include in the deployed flow.
|
skfileselector
The skfileselector component is a PDF and image file selector component intended to be used with a form submit view.
The following image is what the component displays on the user-facing page for the node.
The user interface for the file selector includes a Select File and Open Camera button. Additionally, there are Select All and Unselect All buttons for the end user to manage the files they have added before submitting.
After a user uploads files, a Remove button appears on each file.
Clicking the component followed by the General tab displays the PDFJS CDN Url field, which is the only configuration option for this component. This field loads a PDFJS library used to process selected PDFs and extract individual pages from it.
On the View Classes tab, there are additional configuration options, described in the following table.
| Field | Description |
|---|---|
Root View class |
The CSS class applied to the root view element on the file selector. |
Input file button class (hidden by default) |
The CSS class applied to the input file button, which is hidden by default. |
Input file container class |
The CSS class applied to the input file container element. |
Input field label (Shown instead of input field by default) |
The CSS class applied to the display name that appears for the input field. |
Main file view class |
The CSS class applied to the main file view element. |
File list view class |
The CSS class applied to the file list view element. |
File preview class |
The CSS class applied the file preview element. |
File name shown inside file preview |
The CSS class applied to the file name shown inside the file preview. |
File preview image |
The CSS class applied the file preview image. |
Button view class containing buttons |
The CSS class applied to the button view element containing the Remove, Select All, Unselect All, and Submit buttons. |
Remove button class inside file preview |
The CSS class applied to the Remove button. |
Select All button in bottom left |
The CSS class applied to the Select All button. |
Unselect button in bottom right (Hidden by default) |
The CSS class applied to the Unselect All button. |
Submit button in bottom right (Hidden by default) |
The CSS class applied to the Submit button. |
Bottom left button container |
The CSS class applied to the container for the Select All button. |
Bottom right button container |
The CSS class applied to the container for the Unselect All button. |
On the Messages tab, there are additional configuration options, described in the following table.
| Field | Description |
|---|---|
Input label content |
The text that users see in the input field element on the user-facing page. If the field is left empty, the default label is |
Remove button label |
The text that users see in the Remove button element on the user-facing page. If the field is left empty, the default label is |
Select All button label |
The text that users see in the Select All button element on the user-facing page. If the field is left empty, the default label is |
Unselect All button label |
The text that users see in the Unselect All button element on the user-facing page. If the field is left empty, the default label is |
Submit button label |
The text that users see in the Submit button element on the user-facing page. If the field is left empty, the default label is |
skcamera
When used with the TransUnion TLOxp connector, the skcamera component embeds a camera element for an end user to take pictures from their device and upload them.
The TransUnion TLOxp connector lets you verify a user’s identity information in your flow by checking TransUnion’s trusted data sources. For more information, see the TransUnion TLOxp connector documentation.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description |
|---|---|
Capture Message |
The message displayed when a picture is captured by the camera element in a user-facing page. |
Capture Message |
The message displayed when a picture is captured by the camera element in a user-facing page. |
On the View Classes tab, there are additional configuration options, described in the following table.
| Field | Description |
|---|---|
Root Class |
The CSS class applied to the root element for the camera. |
Video Class |
The CSS class applied to the video element for the camera. |
Button Container |
The CSS class applied to the Capture button container for the camera. |
Capture Button |
The CSS class applied to the Capture button element for the camera. |
Camera Canvas |
The CSS class applied to the camera canvas element for the camera. |
skiovation
The skiovation component is an Iovation script loader to get a blackbox value, an encrypted string generated by the Iovation connector.
An Iovation connector added to your flow performs device risk checks and OTP during enrollment, authentication, and other transactions.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description |
|---|---|
Iovation Loader CDN Link |
The CDN URL for the Iovation script loader element. |
Iovation Loader Version |
The loader version for the Iovation script loader element. |
Iovation Loader Sub Key |
The sub key for the Iovation script loader element. |
Blackbox Property Name |
The name of the blackbox value of the Iovation script loader element that can be referenced in other nodes of the same flow. |
skrisk
The skrisk component can be added to HTML forms to provide access to browser data for risk signals used in the PingOne Protect connector.
Including the skrisk component in an HTTP node placed before the relevant PingOne Protect connector automatically obtains additional risk-related variables without having to write the usual code in your HTML Template field.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description |
|---|---|
Environment ID |
The environment ID of your PingOne environment. |
Risk Property Name |
The name assigned to the Risk property. |
|
See the PingOne Protect connector documentation for instructions on adding the PingOne Protect connector and |
skfingerprintjs
The skfingerprintJS component is a script to get a browser fingerprint value. Add it to HTML forms to identify end user behavior with the FingerprintJS connector.
The following table describes the configuration fields on the Identity Provider tab.
| Field | Description |
|---|---|
FingerprintJS CDN Link |
The CDN URL for the FingerprintJS element. |
Fingerprint JS Browser Token |
The browser token for the FingerprintJS element. |
FingerprintJS Property Name |
The name assigned to the FingerprintJS property that can be referenced in other nodes in the same flow. |
skscriptloader
The skscriptloader component is an SK script loader to load any external scripts.
Clicking the component displays the CDN Link field on the Identity Provider tab, which is the only configuration option for this component. This field is for configuring the CDN URL for the script loader element.