# 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.

<div align="left"><figure><img src="https://3281977978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvBFXjH9S1CAy9f5hzg5Q%2Fuploads%2Fo4ouk2Cypnvna0Devxx2%2Fwebchat_policy.png?alt=media&#x26;token=935e9fef-84fc-418b-af16-54c33400a720" alt="" width="563"><figcaption></figcaption></figure></div>

4. Open the **Policy** tab.
5. Customize the **Policy** according to the follow table:

### Webchat Channel Config Parameters

<table data-header-hidden><thead><tr><th width="223.82086181640625"></th><th width="95.4404296875"></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td>T<strong>ype</strong></td><td>D<strong>escription</strong></td><td>E<strong>xample</strong></td></tr><tr><td>webchatMenuConfig</td><td>object</td><td>Parent parameter for menu configuration.</td><td> </td></tr><tr><td>webchatMenuConfig.hideStartOver</td><td>boolean</td><td>Hides the StartOver/Refresh button from the webchat menu.</td><td><code>true | false</code></td></tr><tr><td>webchatMenuConfig.hideProfile</td><td>boolean</td><td>Hides the Profile button from the webchat menu.</td><td><code>true | false</code></td></tr><tr><td>webchatMenuConfig.hideSoundOptions</td><td>boolean</td><td>Hides the Sound button from the webchat menu.</td><td><code>true | false</code></td></tr><tr><td>webchatMenuConfig.hideTranscriptDownload</td><td>boolean</td><td>Hides the Transcript button from the webchat menu.</td><td><code>true | false</code></td></tr><tr><td>webchatMenuConfig.hideLogout</td><td>boolean</td><td>Hides the Logout button from the webchat menu.</td><td><code>true | false</code></td></tr><tr><td>webchatMenuConfig.showRefreshSession</td><td>boolean</td><td>Displays the Refresh Session button from the webchat menu.<br>By default it is false.<br>The button refreshes the conversation server session and reset all sessionVars.</td><td><code>true | false</code></td></tr><tr><td>webchatMenuConfig.extraMenuItems</td><td>array</td><td><p>Array of objects. Each object contains:</p><ul><li>label</li><li>value</li><li>icon (optional)</li><li>type (optional) [link]</li></ul><p>The menu items you set here will get rendered before (on top of) the default buttons.</p></td><td><code>"extraMenuItems": [</code><br><code>{</code><br><code>"label": "List my tickets",</code><br><code>"value": "list my tickets",</code><br><code>"icon": "flaticon-zplex4 flaticon-refresh2"</code><br><code>},</code><br><code>{</code><br><code>"label": "TestNik",</code><br><code>"value": "testnik"</code><br><code>},</code><br><code>{</code><br><code>"label": "Link to external site",</code><br><code>"value": "http://www.aisera.com",</code><br><code>"type": "link"</code><br><code>}</code><br><code>]</code></td></tr><tr><td>preventDefaultForLinks</td><td>boolean</td><td><p>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:</p><ul><li>type: <code>“aisera.webchat.link_clicked"</code></li><li>href: “https://sampleurl”</li></ul><p>Example:</p><p><code>{"type":"aisera.webchat.link_clicked","href":"https://acme.com/isselfservice/go.do?123"}</code></p><p>The parent window is responsible for handling the event.<br>It can open the link in a new tab or redirect to this link in the existing tab.</p></td><td>true | false</td></tr><tr><td>ShortCards</td><td>Object</td><td><p>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.</p><p> </p></td><td><code>"shortCards": [</code><br><code>{</code><br><code>"label": "Upload a File",</code><br><code>"value": "uploadFile",</code><br><code>"icon": "flaticon-zplex4 flaticon-refresh2"</code><br><code>}</code><br><code>]</code></td></tr></tbody></table>

### 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`.

<div align="left"><figure><img src="https://3281977978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvBFXjH9S1CAy9f5hzg5Q%2Fuploads%2FbIdwelaWI9kelz3Yd3KT%2Fmenu_itemx.png?alt=media&#x26;token=059606cf-7609-42ee-bbde-9172554cf5f4" alt="" width="188"><figcaption></figcaption></figure></div>

&#x20;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.&#x20;

<div align="left"><figure><img src="https://3281977978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvBFXjH9S1CAy9f5hzg5Q%2Fuploads%2FTt8ZetZXKAYv3l9tO9HG%2Fitem_menux2.png?alt=media&#x26;token=145e2498-3bff-4f58-86ac-4dcb27e6265b" alt="" width="375"><figcaption></figcaption></figure></div>

### 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.

<div align="left"><figure><img src="https://3281977978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvBFXjH9S1CAy9f5hzg5Q%2Fuploads%2FYQSP57xNUdUej8LH6gWb%2Fpolicy_items.png?alt=media&#x26;token=09cc7fd6-f584-437c-8aed-ab67a007b43e" alt="" width="398"><figcaption></figcaption></figure></div>

### 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>
```

&#x20;

&#x20;

&#x20;

&#x20;