Note:

This document covers SK-Components in raw HTML format and their SK attributes. For more information on how they function as part of the UI, see SK-Components.

You can create custom components in the Custom HTML field. Use a <div> or <form> wrapper for the component, then add data attributes to provide functionality. The first data attribute in custom HTML should be the data-skcomponent attribute, which invokes the relevant SK-Component. For example, data-skcomponent=”skbutton” invokes the skbutton component.

Important:

If you are writing or importing the custom HTML for SK-components, data attributes with meaningful classes and IDs are important because they serve as the main reference points for managing node outputs within your flow.

skbutton HTML

A complete raw HTML for the skbutton component looks like this:

<button
  type="button"
  data-skcomponent="skbutton"
  id="<some_id>"
  class="<some_class>"
  data-skvalue="value-sent-with-button-submit"
  data-skbuttonvalue="value-sent-with-button-submit"
  data-skbuttontype="form-submit|mfa-reset|otp|next-event|nuance-audio|change-view"
  data-skviewindex="1"
  data-skform="form-id-to-submit"
  data-skotpinput="otp-input-field-id-to-submit"
  data-skbuttonimage="image-src|data-url-to-show-inside-button"
  data-skbuttonimageplacement="left|right"
  data-skbuttonimageclass="button-image-class"
  data-skdefaultloadingcolor="loading-indicator-color"
  data-skcustomloadingindicator="loading-indicator-url"
  data-skcustomloadingindicatorclass="loading-indicator-class"
  >
  Button Label
</button>

This also works with an <input> tag with the type="submit" attribute included:

<input
  type="submit"
  data-skcomponent="skbutton"
  id="<some_id>"
  class="<some_class>"
  data-skbuttonvalue="value-sent-with-button-submit"
  data-skbuttontype="form-submit|mfa-reset|otp|next-event|nuance-audio|change-view"
  data-skviewindex="1"
  data-skform="form-id-to-submit"
  data-skotpinput="otp-input-field-id-to-submit"
  data-skbuttonimage="image-src|data-url-to-show-inside-button"
  data-skbuttonimageplacement="left|right"
  data-skbuttonimageclass="button-image-class"
  data-skdefaultloadingcolor="loading-indicator-color"
  data-skcustomloadingindicator="loading-indicator-url"
  data-skcustomloadingindicatorclass="loading-indicator-class"
  value="Button Label"
  >
</input>

The following table provides descriptions for data attributes that can be used with the raw HTML for the button component.

Attribute Description

data-skbuttonvalue

The value added to the form submit payload.

data-skbuttontype

The event assigned to the button.

data-skform

The ID of the form to be submitted using form-submit button type.

data-skotpinput

The ID of the input field used for OTP value.

data-skbuttonimageplacement

Placement of the image with respect to the label. Valid values are left or right.

data-skbuttonimageclass

The class name assigned to the <img> tag for the data-skbuttonimage attribute.

This attribute styles the image.

data-skdefaultloadingcolor

The color of the loading spinner created by the data-skcustomloadingindicator attribute.

data-skcustomloadingindicator

The URL of a spinner image that is used instead of the default loading icon when the button is submitted.

data-skcustomloadingindicatorclass

The class name assigned to the <img> tag for the data-skcustomloadingindicator attribute.

This class name styles the image.

The following table provides descriptions for the various types of buttons.

Type Description

form-submit

Submits a form.

Used alongside data-skform whose value is used as the ID for getting form values.

mfa-reset

Resets MFA dialogue box back to selection page.

otp

Submits OTP input field value.

The OTP input value will be assigned to a property named OTP.

next-event

Continues to the next screen without submitting input values.

The data-skbuttonvalue attribute will progress to the next page.

nuance-audio

Controls Nuance audio mic recording.

change-view

Switches between views in a multiview screen.

Used with the data-skviewindex attribute, whose value will be the view index that the widget will switch to.

skpolling HTML

The raw HTML for the skpolling component looks like this:

<div data-skcomponent="skpolling" 
  class="<some_class>" 
  data-skpollinterval="2000" 
  data-skpollretries="60">
</div>

skIDP HTML

The raw HTML for the skIDP component looks like this:

<button data-skcomponent="skIDP"
  class="<some_class>"
  data-skidpvalue="<some_idp>"
  data-skbuttonimage="<some_image>"
  data-skbuttonimageplacement="<some_placement>"
  data-skbuttonimageclass="<some_class>">Login text
</button>

skthirdpartyiframe HTML

The raw HTML for the skthirdpartyiframe component looks like this:

<div data-skcomponent="skthirdpartyiframe"
  class="<some_class>"
  data-skwidth="640"
  data-skheight="480">
</div>

skerrormessage HTML

The raw HTML for the skerrormessage component looks like this:

<div data-skcomponent="skerrormessage" 
  class="<some_class>" 
  data-skerrorid="<some_id>">
</div>

The data-skerrorid attribute is the ID of the input field that the error message is associated with.

skinputfile HTML

The raw HTML for the skinputfile component looks like this:

<input data-skcomponent="skinputfile"
  type="file"
  class="<some_class>"
  data-skinputid="<some_id>"
  data-skshowpreview="yes"
  data-skpreviewtype="text"
  data-skpreviewtextclass="<some_class>"
  data-skpreviewimageclass="<some_class>"
  data-skpreviewimagewidth="640"
  data-skpreviewimageheight="480"
  data-skpdfjsurl="<pdf_js_cdn_url>">
</input>

skrecaptcha HTML

The raw HTML for the skrecaptcha component looks like this:

<div data-skcomponent="skrecaptcha"
  class="<some_class>"
  data-skcaptchaid="<some_id>"
  data-skrecaptchasitekey="<some_site_key>">
</div>

skfileselector HTML

The raw HTML for the skfileselector component looks like this:

<div data-skcomponent="skfileselector"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>

skcamera HTML

The raw HTML for the skcamera component looks like this:

<div data-skcomponent="skcamera" 
  data-skroot="sk-camera-root" 
  data-skvideo="liveView" 
  data-skbtnactions="sk-camera-btn-actions" 
  data-skbtncapture="sk-camera-btn-capture" 
  data-skcanvas="liveView"
  data-skcapturemessage="Capture Image" 
  data-skswitchcameramessage="Switch Camera Message"> 
</div>

skiovation HTML

The raw HTML for the skiovation component looks like this:

<div data-skcomponent="skiovation"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>

skrisk HTML

The raw HTML for the skrisk component looks like this:

<div data-skcomponent="skrisk"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>

skfingerprintjs HTML

The raw HTML for the skfingerprintjs component looks like this:

<div data-skcomponent="skfingerprintjs"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>

skscriptloader HTML

The raw HTML for the skscriptloader component looks like this:

<div data-skcomponent="skscriptloader"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>