--- title: SK-Components description: Review the descriptions of each SK-Component and their configuration options. component: davinci page_id: davinci:flows:davinci_sk_components canonical_url: http://docs.pingidentity.com/davinci/flows/davinci_sk_components.html revdate: May 31, 2024 section_ids: skbutton: skbutton skpolling: skpolling skidp: skIDP skthirdpartyiframe: skthirdpartyiframe skerror: skerror skerrormessage: skerrormessage skrecaptcha: skrecaptcha skfileselector: skfileselector skcamera: skcamera skiovation: skiovation skrisk: skrisk skfingerprintjs: skfingerprintjs skscriptloader: skscriptloader --- # 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](davinci_sk_attributes.html). | ## skbutton ![An image of the skbutton component as it appears when added to the Custom HTML Template.](_images/SKButton.png) 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. ![An image of the skbutton component that appears in a user-facing page with the default Button text on the button.](_images/viewskbutton.png) 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-submit`. | | **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 ![An image of the skpolling component as it appears when added to the Custom HTML Template.](https://lh6.googleusercontent.com/QzKUQqyphKpYkddT-WHLQgfP4l0kMI2GEWD9vqDmItcF9QP4Q0n99gkz6D2eKv7yk65h8mfzTDcwCDXEXORcG-KhJv0v7HzW-2_dvjD8BGDxU3doTMiJeBr7taxcieuJp72XfkZ6_wOfxaD0iZit7DDl3oOdNhrZQHiVHKN8XZUf_GNLXX7Go6735ls31Q) 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. ![An animation of the loading indicator that displays to the end user when the skpolling component is included in an HTTP node.](https://lh6.googleusercontent.com/u6SEU_xyYSdSO4HINMeQcIynTJD2dVLYUUUr3sCV8i3Fy7ch6fcXMQg6IA46lZDwWgd-PMY5HkBbBGet8-szotM6Ds454clTWWybPF9PhXAqg_3VCbBIFA3ZuAxY_Q0oRprXE7TCq3C4pOMoAV9jl6wu8SjYLu57vviSo4Ou1TsaHuNHmHfFfukJRaq6_g) 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 ![An image of the skIDP component as it appears when added to the Custom HTML template.](https://lh3.googleusercontent.com/5IjGJTgFb68JwlZCgCDvbMYqLIuTrsUd5EQibJSv9JAzottY3EMXGy8USeX_7gDA4Ce6R8_hSCYi7dgjJuAmXJHwtk4tZDi1G90jmGhmdUzhjvgQ6CLnmP4AklKXSkCx5lGtnz7LYRk2lsVdrjWtG9590vMcq0r0HRbKwUo0oPyhH0gHsOafhDPSw0tCWw) 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. You can find more information in [Identity providers](http://docs.pingidentity.com/pingone/integrations/p1_external_idps.html). 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. ![An image of the skIDP component that appears in a user-facing page with the default Login text on the button.](https://lh6.googleusercontent.com/ShR7wAgc-AxOECcpqDlc3kPXrmlh_nxnqkwGr0jdYxOCVvXpw3XbZn5kudFUu9JV8H2U9iSqLYElb17uoSqamWOaUsGXiOOPYTx9SONIOvenasmEHY6FVihuSGzc9VtvNND-pWV1a8amkwRtdHLzepC8pAtnm3B-Kl9pZ253R9VHZLU_g-n_62SO5fEhSg) 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. 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. This field is only shown when PingOne Authentication is selected to use an external identity provider. | | **Link with PingOne User** | When enabled, DaVinci creates or updates a linked PingOne user account using attributes from the external IdP. 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. 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. 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 ![An image of the skthirdpartyiframe component as it appears when added to the Custom HTML template.](https://lh3.googleusercontent.com/djnTPQ4aTX8KXsqED9tX-oJViP6yKUaDmlD4V-8e9VVSWPv6zQ0vvl-8w1Q9oW9EDdyoi2t31-2RQY2uFew0x2k7eAXRwmeO4_rlLstNU24iPK05sMCpoUXlsBZyp9sQJexH1xPLmc05i-8vnaiJzHbQ-C1LSienemYS9ERHiq-qGfz1iCJDA_1bKXOmuQ) 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`. | ## 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 ![An image of the skerrormessage component as it appears when added to the Custom HTML template.](https://lh4.googleusercontent.com/IZ_bTszIqyfQhYYqy-uocGt_3rDy4Rs6dz3u7U3LYSNCq8XOpAMbouH-9wu4qRRn8cnNL-nbreu1AIG51TTfj6Q2Kn1Q5_S82IhHFfQWwmEXzocpnpcUPnFMBfYgCx7JywL7Kt2OUnvce-xakne6OC65hNSg7RFaoRbxnHb3OHA9iv3UW9NHAAw68TUKEg) 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. | ## skrecaptcha ![An image of the skrecaptcha component as it appears when added to the Custom HTML template.](https://lh3.googleusercontent.com/9u8kltFSDHPoL4F1aEZdfz3ZLg2UYk8aqbnuQXKVlWFMfPOqnTnejUL2hy33OowUzJYR53qfsull4zn3uoS9fkuwTz0rBpBMl-5F_mPB4KzB5piEuYUk-_kSCPYc5TNBAqklGm6ku7kCQuC2ITMF0t6EEvNC_vAoS5zKAplixwW_cNXXX0gx5Fkn30ex3g) 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 `recaptchaValue` and cannot be changed. | | **Recaptcha Site Key** | The site key for the reCAPTCHA element to include in the deployed flow. 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 ![An image of the skfileselector component as it appears when added to the Custom HTML template.](https://lh5.googleusercontent.com/b1hUMKUBAKYUtH_imvzS4764_TAqvHjiI5OWNRdbb329AcqpZK5ZHXkmpERM_Jfr0U7IkviQJp4AdICdHxfZoTBaTH_NdYpYn9XTFHZzLUc2QvN8pgQJPM0uD7WwaD4nnRxRPTk1hwIWO9jwbqPprjEGTEH_dRp4yoSVCg-dYGgWcQHBbm5jXkVnnYcj6w) 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. ![An image of the skfileselector component on a user-facing page which includes Select File and Open Camera buttons on top and Select All, and Unselect All buttons on the bottom of a No File selected box.](https://lh3.googleusercontent.com/G4ueSX4JoFyksZcI51-sNwKrR4aPw5joWC3abmvinx7C0aZ9zAAv2yh4KWRf03Cmf8fFBfQDhKUhNrIT-7vVc153dRjL5dOqeHOFxHJi_t9Oiwoxrs1K6ijV6LhcCFaukxjYpoHEmv4xwONIRr-_FTVp0jT6dY2IwJtbYmZa1KU_Rlkaw1mp8_t6xK2Pqw) 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 ![An image of the skcamera component as it appears when added to the Custom HTML template.](https://lh3.googleusercontent.com/mq6Sj0jH-icjTBxjPMOTHKbmnpd777wEin0PHH9UzE6VIBXLjVl8lpeOjcPeQcDiiPHTkSRH1Z-oj_UYj7SLmcQrTPyTL8SWpBVumcC6s6nNxdsB1VBBgzB6Z-EPwojKDjDPkdt97Q1g0ypyL2DQpZXqD12ZrrPMGYhXNvSIdFsc2HBDeln7bEkrhtOLXQ) 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. Learn more in the [TransUnion TLOxp connector documentation](http://docs.pingidentity.com/connectors/transunion_tloxp_connector.html). 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 ![An image of the skiovation component as it appears when added to the Custom HTML template.](https://lh6.googleusercontent.com/GsROaYgBN6MXyIDjkodgVruyuiExKkMVcLBh-lbU1HqCvbD1QcMRBES2gghLTDMhppQRa0kkTqmLUNKDqklqW3fYWKm46bIQ6jOjqDXF7cU9PEjaVUaFZAD-Xj9gsIL2RwYqHD4mvReTrPLcEgmZ8PS96QsCzQDkJpjuJZsNHfWRcOazvP5nAnbyGQ3cKw) 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 ![An image of the skrisk component as it appears when added to the Custom HTML template.](https://lh4.googleusercontent.com/nN9tpCk2jPN-nkfUpvJwVmhxY40IVtPWDs0j_lK_Nv_RNg4G0MA0YKbWS-Qa2Zql0bjE11ZR2eASLAE2giDTy9C1VxqvAi2iS4mw07sY1DYQ_hSkKQGP-svQQhPIfPsGywVxgqlIl1nYSBQRmPgBc-0xh0rGuz3hfJP70gSUM-Zq63bV8lXvhI4aTNF25Q) 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](http://docs.pingidentity.com/connectors/p1_protect_connector.html) for instructions on adding the PingOne Protect connector and `skrisk` component to your flow. | ## skfingerprintjs ![An image of the skfingerprintjs component as it appears when added to the Custom HTML template.](https://lh3.googleusercontent.com/RqbeYDeNUW0A0mnm9z5_14egkg6Z__58-hXUAg82B0lUwZ9MgnflegQ5jQql7bCHoHPzVHXwuIQpr4shKwmu0mArFR4-Z1dtffqlpCfVqRGsCcsMUONozG9HjEKh8dVO8Jdk-yYlcn7KuWygS_r1N7X7xxkab2U0SsRxUVnUJE29EvfeIa3uhvfUH_SjJg) 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 ![An image of the skscriptloader component as it appears when added to the Custom HTML template.](https://lh6.googleusercontent.com/bfYcmPHn-GT2EwjpUTc23CrNS3y6vACUPLMholy24oiLltEQwpFaIvTgWctp906k5tEXwkXwR01Kzya4tXDLbp9Bzcm7WEl8zByvjvtfOGTLDywIwWGncUdT6kM3oblZUugJXGpu8rkUEcjLupelWahLO8DCJ5hu8HLT_NgSEMudrBGLuuh2nWwYEO-2xA) 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.