Extend the Phone Call or Chat Header

There are two ready-to-use layouts to display customer information to agents.

There's a layout for known customers and a layout for unknown customers. You can extend the header UI in your application to add or remove standard or custom fields to the layout, or mark a standard or custom field as required. You can also display fields conditionally, and make them required conditionally. You can configure a conditional Call or Chat header UI layout based on attributes such as Application Classification, Channel, and Communication Direction.

By default, the Chat header for a known contact has the following details:

• Email address of end-user
• Mobile phone number of end-user
• Queue name of chat
• Account name

By default, the Phone Call header of known contact has the following details:

• Work phone number
• Email of end-user
• Mobile phone number
• Account name

By default, the Chat header for an unknown contact has the following details:

• Email address of end-user
• Queue name of the chat

By default, the Call header for an unknown contact has the following details:

• Phone

Use the following these steps to extend the Call or Chat header UI:

Navigate to the Chat or Call header layout

1. Sign in to the Oracle Cloud Application page containing the component you want to extend.
2. Click the Settings and Actions menu and select Edit Page in Visual Builder to open the page in the VB Studio Page Designer.
3. Create a project or open an existing project.
4. Add required dependencies in the dependencies subtab.
5. Click the Layouts subtab.
6. Select contacts from the Layouts list.

Overview of Extending the Chat or Call header

1. To Extend the Chat header in VB Studio, go to Layouts > Contacts, and select the Chat Header dynamic form.

2. To Extend Call header go to Layouts > Contacts then select the Cti Header dynamic form.

Duplicate the default rule or create a new rule and define conditions

1. In the VB Studio Display Logic area, click the Duplicate Rule icon to clone the default rule.

2. Duplicate existing default rules UI.
3. Enter a name for the duplicate rule then click the Duplicate button to create a copy of the rule and layout.
   Note: Default layouts from dependencies are read-only, you can’t edit them.
4. In the newly copied layout, select Click to add condition to add conditions for when to use this rule and layout.
5. Then select Click to add conditions UI.
   You can add one of multiple conditions depending on your requirements. You can base them on the following:

   • Context
   • Fields
   • Responsive
   • User
6. Create you own rules by clicking the + Rule button to add your own rules.

Add standard fields to the Chat or Call header

1. Select your new layout.

   All available fields are displayed.

2. Select fields in the All Fields list.
3. Reorder the list by selecting then dropping them where you want them.

Add custom fields to the Chat or Call header

1. Create a custom field from Application Composer for the Contacts object and publish it.
2. In Visual Builder, open the Chat/Call header.
3. From the All Fields list, find your custom field and select it to add it to the Select field to display list.

Add data from the chat launch form or IVR to the Chat or Call header

The data entered in chat launch form or collected in IVR will be available in engagement indata/outdata of the processevent API which can be accessed in this form using:componentContext.inData or componentContext.outData. For example: to see interaction ID in the call or chat header, use: [[ $componentContext.outData.SVCMCA_INTERACTION_ID ]] as the Value.

1. In the Contacts layouts, click the Fields tab.
2. Click the + Custom field.
3. Enter an ID and label, and then click Create.
4. Select the newly created field from the Fields list.
5. In the Properties area, click the Value field.

   Say you want to have the contact's job title to be seen. For example: [[ $componentContext.inData.SVCMCA_CONTACT_JOB_TITLE ]].

6. Select the variable that you want to see as this field or use function to write custom code
7. Now click the Rule Sets tab and add this field to your layout.
8. Preview or publish to see the newly created field and tagged values.

Delete a field from the Chat or Call header

1. In the Layout workspace, note the list of fields.
2. To delete a field, hover over the field, and click the Delete button.

Conditionally display a field in the Chat or Call header

1. In the Layout workspace, note the list of fields.
2. Select the checkbox of the desired field from the All Fields list
3. Click the added field, and expand the properties panel
4. In the properties panel, select Show Field and select Always.
5. Update the condition, then save to view the updated Show Field condition.

Mark a field required in the Chat or Call header

1. In the Layout workspace, note the list of fields.
2. Select the checkbox of the desired field from the All Fields list
3. Click the added field, and expand the properties panel
4. In the properties panel, select Required checkbox.

Make fields conditionally required in the Chat or Call header

1. In the Layout workspace, note the list of fields.
2. Select the checkbox of the desired field from the All Fields list
3. Click the added field, and expand the properties panel
4. In the properties panel, hover over the Expression Editor icon fx.
5. Enter a condition in editor, then enter the required key and value.
   Here are some examples:
   • [[ $componentContext.callDirection == 'ORA_SVC_OUTBOUND' ]]
   • [[ $user.userName == 'ctiautouisvr3' ]]

After making changes you can publish the changes and start using the updated Chat or Call header.