Overview

The HTML Display option allows you to incorporate and customize additional content, enabling the creation of rich, visually appealing descriptions to enhance the guided workflow. You can use HTML tags within the designated section to format and style the content as needed.

To make the individual text blocks copyable in the Care Console, wrap the desired content within:

<div class="gp-copiable-block"> content </div>

Purpose of HTML Display

• The HTML Display feature allows developers or users to insert custom HTML code into a form or interface, enabling the display of rich content that goes beyond standard form elements. 

• It provides the flexibility to add interactive elements, styled text, images, links, or even embed third-party content (e.g., videos, widgets). 

​

Various Fields in HTML Display

• Text: Use the text space to add relevant HTML code.

• Choose Controlling Field: This allows you to dynamically update the content displayed based on specific user inputs or selections. By linking the HTML Display to a controlling field, you can tailor the displayed content to reflect real-time changes made by the user in other components, such as dropdowns, picklists, or tables.

• Auto Refresh Content: The user can set the auto-refresh time that will refresh the HTML code.

• Make Text Copyable: This will allow the end user to copy the text of the HTML code. 

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

  • Example  

    • Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High." 

    • Implementation: Visibility Condition: Ticket_Priority == 'High' 

    • Result: The "Priority Escalation" section appears only for high-priority tickets.

​

​

​

Steps to Make an HTML Component Copyable 

​

Introduction

Copyable HTML components improve user experience by allowing users to quickly copy specific text or code snippets with minimal effort. In the Care Console, this functionality can be implemented by wrapping the desired content in a designated HTML block. The following section provides a step-by-step approach to making HTML components copyable, along with troubleshooting tips and customization options. 

​

Implementing Copyable Component (Use Copyable Block Wrapper)

• To make an individual text block copyable, wrap the content within the following <div>: 

  <div class="gp-copiable-block">This text can be copied</div>

  ​

  ​

  ​

• Clicking on the block icon will copy the enclosed text to the clipboard. 

• By following this guide, you can implement and troubleshoot copyable HTML components effectively.