Define a Web Chat Component

You can configure your web chat widget using the Engagement Engine user interface to be consistent with the branding of your site and your service process.

Here's the different configuration tasks you can perform on the component attributes:

• Network Configuration
• Layout Modification
• Functionality Configuration
• Feature Flags

Network Configuration

1. Sign in to the Rule Editor, then go to Settings > Web Chat > Create New Component.
2. Enter a name for the new component, and choose a version.
3. Click Show Attributes to view the component attributes for the version you selected.
4. The categorized attribute list appears along with the mandatory attributes for the component.

   You can browse through each attribute list by clicking the drop-down arrow.

   You can set the attribute value by clicking the (+) icon.

5. In the Network Configuration attributes section, set the mandatory attribute URI with your Fusion instance.

   This value is the full Fusion Service host name without modifcation (FQDN).

6. Click the Service drop-down list and select Fusion.

Functionality Configuration

1. In the explorer, click the Funtionality Configuration drop-down list to view attributes for the pre-launch form and the icons.

   

   Here's an overview of some of the attributes:

   • Icons:
     • Define an image URL for your desired icons to show after starting the conversation
     • The icons used in the widget can be customized in two ways - the URL of the image asset, or an SVG string.

       For the icons that support SVG strings, you can pass the raw SVG data that the widget renders as an inline SVG.

       SVG strings allow for the faster loading of an image, the ability to animate it, or for changing its color.

   • preLaunchFormFields:

     Customize standard attributes to show as fields in the pre-launch form

   • showPreLaunchForm:
     • 'always' - This is the default, every time a new conversation is started the form will be shown before connecting and starting the conversation.
     • 'initial' - The form will only open once, when connecting for the first time. The pre-launch form allows the user to interact before starting the conversation and provide supported profile information like an email, a product, etc.
     • 'never' - Connect and start the conversation without any user interaction.
   • Set the fields for the chat launch form via Pre-Launch Form Fields attribute.

     Any required user information can be entered via a pre-launch form which can pre-fill fields with default values. Click the icon in the top-right corner to display the default JSON and keep the default fields you want to display on the pre-launch form.

     Here's an example:

     [
       {
         "name": "subject",
         "required": false,
         "relaunchValue": "keep"
       },
       {
         "name": "firstName",
         "required": true,
         "relaunchValue": "default"
       },
       {
         "name": "lastName",
         "required": true,
         "relaunchValue": "default"
       },
       {
         "name": "email",
         "required": true,
         "relaunchValue": "clear"
       },
       {
         "name": "productId",
         "required": false,
         "relaunchValue": "clear"
       },
       {
         "name": "categoryId",
         "required": false,
         "relaunchValue": "clear"
       },
       {
         "name": "queueId",
         "required": false,
         "relaunchValue": "clear"
       }
     ]

   Layout Modification:

   In the Layout Modification attributes section you can define the branding and position of your widget with attributes such as colors, fonts, position width and so on.

   Feature Flags:

   In the Feature Flags attributes section you can define additional settings that are available in Oracle Digital Assistant Native Client SDK for Web such as enabling the user to share location, bot audio response or defining the formatting of the timestamp shown with messages.

   Note: Only a subset of the properties available in ODA Native Client SDK for Web are supported in the Web Chat Client.