# Webchat Script

The Webchat popup is embedded into webpage bodies with the [script provided in its settings](https://documentation.proto.cx/docs/modules/ai-agents/publishing/webchat#test-and-deploy).

These Javascript commands control the popup in various ways:

| Script                                                     | Description                            |
| ---------------------------------------------------------- | -------------------------------------- |
| `window.proto.open()`                                      | Opens the popup                        |
| `window.proto.close()`                                     | Closes the popup                       |
| `window.proto.hide()`                                      | Hides both the toggle button and popup |
| `window.proto.show()`                                      | Shows both the toggle button and popup |
| `window.proto.startchat()`                                 | Starts a chat                          |
| `window.proto.isOpen()`                                    | Checks if the popup is open            |
| `window.proto.hideToggleButton()`                          | Hides the toggle button                |
| `window.proto.triggerProactiveMsg('Proactive message ID')` | Triggers the Proactive message ID      |

## Check Toggle State

To check if the popup is open or closed, you can also use the following code:

{% code title="Webchat embed script" %}

```javascript
<script type="text/javascript">
   window.protoSettings = {
      id,
      ...
      onOpen: () => console.log('Webchat opened'),
      onClose: () => console.log('Webchat closed'),
   };
</script>
```

{% endcode %}

***

## Hide Toggle Button

A `showToggleButton` property can keep the popup toggle button permanently hidden:

{% code title="Webchat embed script" %}

```javascript
<script type="text/javascript">
   window.protoSettings = {
      id: '',
      showToggleButton: false	
      onInit: function () { }
   };
   var prs = document.createElement('script');
   prs.src = 'https://embed.proto.cx/index.umd.js';
   prs.type = 'text/javascript';
   prs.async = true;
   prs.onload = function () {
      window.proto.init(window.protoSettings);
   };  
   document.head.appendChild(prs);
</script>
```

{% endcode %}

***

## Identify a Person <a href="#identify-the-customer" id="identify-the-customer"></a>

To send your audience member's custom ID to Proto so they are correctly created—or matched with an existing one—add a new line with the ID as shown below.

{% code title="Webchat embed script" %}

```javascript
<script type="text/javascript">  
  window.protoSettings = {
    id: 'CHANNEL ID',
    onInit: function () {
      window.proto.identify('YOUR CUSTOM ID');
    },
  };
  var prs = document.createElement('script');
  prs.src = 'https://embed.proto.cx/index.umd.js';
  prs.type = 'text/javascript';
  prs.async = true;
  prs.onload = function () {	
    window.proto.init(window.protoSettings);			
  };
  document.head.appendChild(prs);
</script>
```

{% endcode %}

If you're using API to register people in Proto, make sure the ID in the snippet exactly matches the format of the one you're sending via API. A new person is created if the IDs are not a precise match.

{% hint style="warning" %}
Make sure to only send the `window.proto.identify('')` line when the person is authenticated on your website and the ID is not empty. If the person is not authenticated and/or you don't have their ID, this line should not be included or will send an empty ID value. All people with an empty ID will be identified as the same person.
{% endhint %}

If you wish to reset a previously identified user, add `window.proto.reset()` to the script.

***

## Updating Customer Details via Webchat

The Webchat SDK allows you to identify a person using a unique ID and optionally update their existing details during a chat session. This helps keep user information accurate and provides additional context to the AI.

You may include standard fields such as phone number and email, as well as approved custom fields that already exist in your Proto configuration.

```
window.proto.identify("CUSTOM_ID", {
  phone_number: "xxxxx",
  email: "user@example.com",
  custom_fields: {
    Token: ""
  }
});

```

Updates are applied to the existing person profile associated with the provided ID. Only custom fields that already exist can be updated. All updates are sent securely and validated before saving.

{% hint style="success" %}

#### Backward Compatibility

This enhancement is fully backward compatible.\
Existing implementations using `window.proto.identify("CUSTOM_ID")` continue to work without changes.
{% endhint %}