Dialogue Cloud

Install WebChat 2.0 FrontEnd

Note This product is part of an Invitation Release. Please contact your Sales Contact for more information.

Note Enterprise license and higher

Note Additional Anywhere365 WebAgent license required.

 

Installation

The WebChat FrontEnd can be loaded into a webpage as a script. As a preview step you can deploy a demo site (see option a). When you are happy with your configuration you can put it on a website (see option b)

 

Option A: Deploy preview as demo site

The WebChat FrontEnd is loaded into a web page. The package contains a empty page which can be hosted in IIS.

 

  1. Extract the contents of the zip file and host contents of the WebChat folder in IIS

    Copy
    Path
    C:\inetpub\wwwroot
  2. Within the WebChat folder, there is a config folder containing a config.json file. The config in the zip will look like this:

    Copy
    config.json
    {
    "apiurl": "https://your.website.url/WebChatDialogueProvider",
    "uccName": "ucc_",
    "logWebAgentMessages": false,
    "reduxDevToolsEnabled": false,
    "mapsApiKey": ""
    }
    1. apiUrl = should be replaced with the url for your installed WebChatDialogueProvider instance

      Warning: apiUrl needs to be accessible by the customer.

    2. uccName = should be replaced with the UCC name for your default UCC.

    Note: We advise not to alter the logWebAgentMessages and reduxDevToolsEnabled values, to prevent leaking internals to the console or the redux dev tools.

  3. Open IIS.

  4. In IIS choose option ‘Convert to Application’. A popup will appear.

  5. Click on the ‘OK’ button.

  6. To verify select 'Browse *' on the right side of IIS.

 

Option B: Integrate in website

  1. Extract the contents of the zip file and place the webchat folder in a path relative to your website. Include the webchat.bootstrap.js file from the webchat folder on your website:

    Copy
    HTML
    <script src="path/to/webchat/webchat.bootstrap.js"></script>

    Note: When the webchat script is not deployed in a path relative to your website, but is hosted on another (sub)domain then you probably need to enable [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) on the server where the webchat is deployed. In this case please configure the webserver to add the domain url of your website to the `Access-Control-Allow-Origin` header. Please consult the documentation of your webserver on how to do this.

  2. Within the WebChat folder, there is a config folder containing a config.json file. The config in the zip will look like this:

    Copy
    config.json
    {
    "apiurl": "https://your.website.url/WebChatDialogueProvider",
    "uccName": "ucc_",
    "logWebAgentMessages": false,
    "reduxDevToolsEnabled": false,
    "mapsApiKey": ""
    }
    1. apiUrl = should be replaced with the url for your installed WebChatDialogueProvider instance

      Warning: apiUrl needs to be accessible the customer.

    2. uccName = should be replaced with the UCC name for your default UCC.

    Note: We advise not to alter the logWebAgentMessages and reduxDevToolsEnabled values, to prevent leaking internals to the console or the redux dev tools.

  3. Run the following script:

    Copy
    Script
    WebChat.load();
  4. With the following Typescript definition of the configuration object:

    Note: We will discuss the various properties of this configuration object in additional configurations Learn More

    Copy
    Script
    interface Configuration {
        teaseMessageSettings?: TeaseMessageSettings;
        templates?: Templates;
        parent?: HTMLElement;
    }

This will initialize and run the Anywhere365 WebChat with the basic configuration.