Edit

Customize your Webchat Menu (Policy)

You can customize what your Webchat users will see, and the choices they can make within the bot by adding Policy parameters. The parameters should be entered in JSON format.

To customize the Webchat menu:

  1. Navigate to Settings > Channels in the Aisera Admin UI.

  2. Choose the Channel that you want to customize and double-click on the icon to open it.

  3. Click the pencil icon to open the Edit Channel window.

  1. Open the Policy tab.

  2. Customize the Policy according to the follow table:

Webchat Channel Config Parameters

Parameter

Type

Description

Example

webchatMenuConfig

object

Parent parameter for menu configuration.

webchatMenuConfig.hideStartOver

boolean

Hides the StartOver/Refresh button from the webchat menu.

true | false

webchatMenuConfig.hideProfile

boolean

Hides the Profile button from the webchat menu.

true | false

webchatMenuConfig.hideSoundOptions

boolean

Hides the Sound button from the webchat menu.

true | false

webchatMenuConfig.hideTranscriptDownload

boolean

Hides the Transcript button from the webchat menu.

true | false

webchatMenuConfig.hideLogout

boolean

Hides the Logout button from the webchat menu.

true | false

webchatMenuConfig.showRefreshSession

boolean

Displays the Refresh Session button from the webchat menu. By default it is false. The button refreshes the conversation server session and reset all sessionVars.

true | false

webchatMenuConfig.extraMenuItems

array

Array of objects. Each object contains:

  • label

  • value

  • icon (optional)

  • type (optional) [link]

The menu items you set here will get rendered before (on top of) the default buttons.

"extraMenuItems": [ { "label": "List my tickets", "value": "list my tickets", "icon": "flaticon-zplex4 flaticon-refresh2" }, { "label": "TestNik", "value": "testnik" }, { "label": "Link to external site", "value": "http://www.aisera.com", "type": "link" } ]

preventDefaultForLinks

boolean

If set to true, it prevents links from opening in new tabs. Instead, it will populate an event to the parent window with the following parameters:

  • type: “aisera.webchat.link_clicked"

  • href: “https://sampleurl”

Example:

{"type":"aisera.webchat.link_clicked","href":"https://acme.com/isselfservice/go.do?123"}

The parent window is responsible for handling the event. It can open the link in a new tab or redirect to this link in the existing tab.

true | false

ShortCards

Object

If a short cards object is add to a policy, there will be a plus icon on left side of the text area and the short cards can be used from there.

"shortCards": [ { "label": "Upload a File", "value": "uploadFile", "icon": "flaticon-zplex4 flaticon-refresh2" } ]

Extra Menu Items

One of the parameters in the table above that can add a lot of value to your bot is the Extra Menu Items parameter. Then when the channel is loaded, end users see an extra item in the bot's upper-right menu. In this example, the menu item is called, Change to English.

When the application/bot user clicks on it, the bot will use the value: change my language to english and send it to the Aisera Gen AI platform. The platform will process this phrase as if it was typed by the end user.

Short Cards

Another useful option is Short Cards. These allow you to perform specific actions. For instance, when you add the uploadFile short card to your Policy, you will see a + icon on your application/bot that allows users to upload files.

Example Policy

An example Policy that uses the parameters in the table above:

{
  "preventDefaultForLinks": true,
  "webchatMenuConfig": {
    "hideStartOver": true,
    "hideProfile": false,
    "hideSoundOptions": true,
    "hideTranscriptDownload": false,
    "hideLogout": false,
    "showRefreshSession": true,
    "extraMenuItems": [
      {
        "label": "List my tickets",
        "value": "list my tickets",
        "icon": "flaticon-zplex4 flaticon-refresh2"
      },
      {
        "label": "TestNik",
        "value": "testnik"
      },
      {
        "label": "Link to external site",
        "value": "http://www.aisera.com",
        "type": "link"
      }
    ],
    "shortCards": [
         {
            "label": "Upload a File",
            "value": "uploadFile",
            "icon": "flaticon-zplex4 flaticon-refresh2"
         }
    ]
  }
}

Some of these policy parameters can be seen in the example below.

Handling Links

In order to handle link-clicks in a parent window, you need to include a preventDefaultForLinks parameter in your custom policy for the Webchat channel and set it to true.

{ "preventDefaultForLinks": true }

In the parent window, add a script in the head tag that enables a listener for message events.

The message.type in for a link click is 'aisera.webchat.link_clicked'.

The URL associated with the link is passed in message.href.

Sample script that alerts the URL when the link is clicked:

   <script>
      window.addEventListener(
         'message',
         function (event) {
            if (typeof event.data !== 'string') {
               return;
            }
            let message = JSON.parse(event.data);
            if (message.type === 'aisera.webchat.link_clicked') {
               // Replace with your action here to handle the link-click event
               alert(`Url clicked: ${message.href}`);
            }
         },
         false
      );
   </script>

PreviousWebchat SSO-SAML and OAuth2-SSO Integration with Auth0NextTicket AI Agent Assist

Last updated

Was this helpful?