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. |
|
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 2000. |
|
Poll Retries |
The number of times the widget will poll the challenge. The default value is 60. |
|
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 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. Note:
This field is only shown when PingOne Authentication is selected to use an external identity provider. |
|
PingOne External identity Provider ID |
The ID for the external identity provider from your PingOne environment. Note:
This field is only shown when PingOne Authentication is selected to use an external identity provider. |
|
Link with PingOne Use |
When enabled, DaVinci creates or updates a linked PingOne user account using attributes from the external IdP. Note:
This field is only shown when PingOne Authentication is selected to use an external identity provider. |
|
PingOne Population |
The PingOne population to use when authenticating a user. Note:
This field is only shown when PingOne Authentication is selected to use an external identity provider. |
|
Population ID |
The ID of the PingOne population to use when authenticating a user. Note:
This field is only shown when PingOne Authentication is selected to use an external identity provider. |
|
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 Login. |
|
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 CSS section 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 600px. |
|
Height |
The height of the iframe in pixels. The default height is 600px. |
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 Text and Image options. |
|
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 100 pixels. |
|
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. Note:
A site key must be included in this field for the reCAPTCHA element to display. For more information on creating a site key to use in this field, see https://cloud.google.com/recaptcha-enterprise/docs/create-key. |
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 Select File. |
|
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 Remove. |
|
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 Select All. |
|
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 Unselect All. |
|
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 Submit. |
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 skrisk component to your
flow.
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.