WebChat

Establish the connection

After adding the connector to your application you still need to configure it, so it can connect to the Matrix42 Virtual Support Agent.

 The connection is configured by adding a new <script> element inside the body element of your application.

<script>
M42VsaConnector.renderWebChat({
    // Pass the base URL of your Service Management instance
    serviceManagementUrl: 'https://example.m42cloud.com'
})
</script>

For security reasons files located in <installFolder>\Matrix42\Matrix42 Workplace Management\bin need to be extended: 

Matrix42.Auth.STS.dll.config

<?xml version="1.0"?>
<configuration>
  ...
  <stsconfig>
    <audiences>
      <!-- For each URL where the end-user can use the WebChat you need to add the following line with your custom redirecturloverwrite -->
      <add clientid="Matrix42.MarvinAI.VSAConnector" scope="urn:matrix42NewUX" redirecturloverwrite="https://example.com" />
      <add clientid="Matrix42.MarvinAI.VSAConnector" scope="urn:matrix42NewUX" redirecturloverwrite="https://example.com/sub-site" />
    </audiences>
    ...
  </stsconfig>
</configuration>

SPS.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  ...
  <!-- For each URL where the end-user can use the WebChat you need to add the hostname of this URL into the comma separated list of extraOrigins -->
  <Matrix42.ServiceLayer ... extraOrigins="example.com,..." ... />
</configuration>

Simple Customizing

By using the M42VsaConnector.renderWebChat method an optional configuration object might be provided.

M42VsaConnector.renderWebChat({
    serviceManagementUrl: 'https://example.m42cloud.com',
    // The locale (language) which will be used for the current WebChat instance.
    locale: 'en-US',
    // Optional configuration object for defining the look and feel of the current WebChat instance
    markup: {
        // The title which will be display on top of the WebChat instance
        title: 'Virtual Support Agent',
        // The color of the title text (Any valid CSS color is allowed)
        textColor: '#fff',
        // The background color for the title bar and open/close control of the WebChat instance (Any valid CSS color is allowed)
        backgroundColor: '#1d3a53'
    }
})

Apply global settings

In case you want to force the WebChat using the settings defined in the Matrix42 Enterprise Service Management global settings use the M42VsaConnector.useServiceManagementSettings() method.

M42VsaConnector.useServiceManagementSettings()
M42VsaConnector.renderWebChat({
    serviceManagementUrl: 'https://example.m42cloud.com'
})