Overview

Enhance your workflow screen by integrating buttons with functionalities such as Next Screen Action, Back Screen Action, Close Screen Action, Send Payload, and Authentication. By including an authentication button, you enable agents to authenticate customers seamlessly before they proceed further in the workflow. Select the desired Single Sign-On (SSO) method for authentication.

Customize the buttons' appearance by configuring properties such as Label, Icon, Icon Position, Button Position, and Variant. Furthermore, you can set Visibility Conditions to control when buttons are displayed based on specific criteria. Additionally, specify Disability Conditions for components to restrict user interaction until predefined conditions are met, ensuring a tailored and secure user experience.

​

Various Fields in CTA

• CTA Variant: This will by default be Button.

• API Name: The API Name is a unique identifier used to reference a particular object, field, or component in an application programmatically. It is typically used in backend code, integrations, or API calls. API Names are often system-generated and follow a specific naming convention, such as using underscores instead of spaces (e.g., Customer_Status__c). 

• Label: The Label is the user-friendly name for an object, field, or component that is displayed in the user interface (UI). It is designed to be easily understood by end-users and often includes spaces or capitalization for readability (e.g., "Customer Status"). Labels are intended for human interaction rather than programmatic use. Through this field, you can also change the icon design and icon position.

•  Variant 

  • Primary:  

    • Typically used for the main action on a screen or form.

    • Example: A "Submit" or "Next" button. 

  • Secondary:  

    • Used for supporting actions that are not as prominent as the primary action. 

    • Example: A "Cancel" button alongside a "Save" button. 

  • Tertiary:  

    • A more subtle style, often used for less critical actions. 

    • Example: "Learn More" or "Back" options. 

  • Minimal:  

    • A simplified, lightweight button design used for unobtrusive actions. 

    • Example: Options like "Skip" or "Dismiss." 

  • Link:  

    • Buttons styled as text links, often used for navigational purposes or actions that lead to new pages. 

    • Example: "Forgot Password?" or "View Details." 

      ​

      ​

• Button Position: The button's position can be adjusted to suit the design layout and user experience:  

  • Centre-Aligned: Ideal for drawing attention to the button, commonly used for primary actions. 

  • Left-Aligned: Often used in scenarios where buttons are part of a text-heavy layout. 

  • Right-Aligned: Suitable for actions that progress to the next step, like "Next" or "Save." 

• Button Width: You can add the button width in percentage.

• Button Action: The CTA component is not just about appearance; it also incorporates specific actions that users can associate with the button. These actions define the button's functionality and the behaviour it triggers upon interaction. The following are the available options:

  • Move to the Next Screen:  

    • Advances the user to the next step or page in a process or workflow. 

    • Example: A "Next" button in a multi-step form. 

  • Close the Screen:  

    • Closes the current interface or modal window. 

    • Example: A "Close" or "Dismiss" button to exit a pop-up or form. 

  • Go to the Previous Screen:  

    • Takes the user back to the previous step or page. 

    • Example: A "Back" button in a navigation sequence. 

  • Send Payload:  

    • Triggers the transmission of data (payload) to a backend system or API. 

    • Example: A "Submit" button that sends form data for processing. 

      ​

      ​

      ​

• Input Disability Condition: A disability condition is a rule or set of criteria that determines whether a specific element, such as a field, button, or component, should be disabled (i.e., grayed out and non-interactive) in a user interface. It restricts user interaction based on certain conditions, ensuring that actions are contextually valid or preventing errors. 

  • Example: 

    • Based on Field Value: 

      • Condition: Disable the "Submit" button if the "Terms and Conditions" checkbox is unchecked. 

      • Result: The user cannot submit the form until they accept the terms. 

    • Based on User Role: 

      • Condition: Disable the "Delete Record" button for users without "Admin" permissions. 

      • Result: Only admins can delete records, while other users see the button but cannot interact with it. 

    • Based on Data Completeness: 

      • Condition: Disable the "Next" button until all required fields are filled. 

      • Result: Users are prevented from moving forward until they complete the required steps. 

Disability conditions improve user experience by guiding behavior and preventing invalid actions. 

• Send Payload: Send Payload is used when you want to send payload to the parent website upon this button actions

• Event name: Event name can be anything it is a variable

• Payload: We will specify the payload to be sent to the parent website. When integrating a guided workflow into the website, the website team will determine the payload, which must be updated here.

• Single Sign on: Currently, we support only the UAE Pass app. Single sign-on can be configured at the platform level. If it is set up directly through the guided workflow, only UAE Pass will be available, and the option to select it will be provided here.

• Auth Token Variable: Auth token variable will store the authentication variable

• Error Variable: If an issue occurs, the error will be stored in the error variable.

• Visibility Conditions: A rule or set of rules that determine whether a specific element, field, or component is visible to users on screen. These conditions are typically based on factors such field values, or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security.