WebChat integrate into HTML

Introduction

The WebChat application can be added to your website by adding some scripts to your page or pages. The scripts will load html, css and javascript to your page. If needed, add the scripts to a masterpage, so the WebChat application will be available on multiple pages.

 

Prerequisites

  • Installed WebChat application on your anywhere server with at least version 4.0.16154.01.
    The version can be checked by going to the WebChat folder root: /bin/sfbwebchatplus.dll, open the file details in the properties of the file and check the version number.

 

Add WebChat elements on page of client

The elements consist of jsrender templates, WebChat html and scripts. The external javascript loads the needed WebChat javascript and css on the page. The basic Anywhere365 WebChat elements can be put on the bottom of the body tag, not nested in your own html.

<html>

<head>

</head>

<body>

<!-- Your own page content here -->

<!-- Anywhere 365 WebChat elements here -->

</body>

</html>

 

WebChat Scripts

Add the scripts to your page

Add the scripts to the page, underneath the previously added WebChat html. The external script init will load all the needed javascript and css to your page automatically.

<!-- Start Anywhere365 WebChat Scripts -->

<script type="text/javascript" src="[WEBCHATROOTURL]sfbwebchatplus/js/jquery-2.1.0.js"></script>

<script id="anywhere365-sfbwebchatplus-client-index-external" src="[WEBCHATROOTURL]sfbwebchatplus/js/anywhere365_sfbwebchatplus_client_index_external.js"></script>

<script>

//default init, uses default settings and determines default url's

var optionalArguments = [];

Anywhere365WebchatIntegration.Init(optionalArguments);

</script>

<!-- End Anywhere365 WebChat Scripts -->

Check Jquery version

Remove the jquery line if Jquery is contained on the page already. The WebChat needs Jquery version 2.x.

 

Replace WebChat root url

Replace all the [WEBCHATROOTURL] tags with the root url of the installed WebChat.

Examples for [WEBCHATROOTURL]:

[protocol][fqdnA fully qualified domain name (FQDN), sometimes also referred as an absolute domain name, is a domain name that specifies its exact location in the tree hierarchy of the Domain Name System (DNS).][webchat application path]

Take protocol from current page (//)

//sub.yourdomain.net/webchat_uccUCC stands for Unified Contact Center and consists of a queue that can be handled by Agents Each Contact Center has its own settings, interactive voice response questions and Agent with specific skills. Agents can be member of, or sign up to, one or more Contact Centers._name_chat/

Note make sure that the protocol from the current page is also available for the webchat application

Force http:

http://sub.yourdomain.net/webchat_ucc_name_chat/

Force https:

https://sub.yourdomain.net/webchat_ucc_name_chat/

 

Change Init Script for your WebChat

If needed, you can initialize the external WebChat integration with optional settings. You can leave single optional settings out if they are not needed to be set. Default values will be used when settings are left out.

<script>

//init with optional parameters:

Anywhere365WebchatIntegration.Init(

{

webchatRootUrl: "//sub.yourdomain.net/yourwebchatapplication/",

settingsXmlUrl: "//sub.yourdomain.net/yourwebchatapplication/sfbwebchatplus/xml/settings.xml",

//uses local file instead of file in WebChat custom assets folder

styleCustomFileUrl: "anywhere365webchatintegration/custom_assets/css/Anywhere365.sfbwebchatplus.stylecustom.css",

//uses local file instead of file in WebChat custom assets folder

presenceCustomFileUrl: "anywhere365webchatintegration/custom_assets/js/anywhere365_sfbwebchatplus_presence_custom.js",

loadResetCss: false

});

</script>

webchatRootUrl

The url to the WebChat root application is normally based on the source of the anywhere365_sfbwebchatplus_client_index_external.js file that is added on your page. When you set the optional parameter, the default value will be overruled. If you let it start with // the url will determine the protocol based on the client application protocol (http or https).

settingsXmlUrl

Url to the settings xml of the WebChat. Use this if you are using multiple xml settings for the same WebChat application (e.g. inpage chat and popup chat). By default, the standard xml file is loaded:

[Webchatrooturl]/sfbwebchatplus/xml/settings.xml. If needed, copy the extra setting xml files in the WebChat application under custom_assets/xml/.

styleCustomFileUrl

Url to the custom stylesheet for the WebChat application. If this option is left out, the default is in the WebChat application: (webchatroot/custom_assets/css/Anywhere365.sfbwebchatplus.stylecustom.css).

presenceCustomFIleUrl

Url to the presence js file, to catch events sent by the WebChat application. If this option is left out, the default is in the WebChat application (webchatroot/custom_assets/js/anywhere365_fsbwebchatplus_presence_custom.js).

loadResetCss

Loads the reset css if set to true (default is false).

 

Check SSL and http(s) configuration

The external javascript file that is added to your page loads all the needed javascript and css to your page. To prevent mixed content issues in browsers, the chosen url’s for the files depend on the current protocol, http or https. If your site is using https configuration, make sure the WebChat application is also configured for https. For modern browsers, a SHA-2 encrypted SSL certificate is needed.

  1. Go to bindings
  2. Add binding
  3. Select HTTPS binding and the proper SSL certificate
  4. HTTPS binding is now in your list

 

Results

A non-iframe WebChat solution is added to your existing page(s). A WebChat sidebar is shown when the signalr connection with the chat hub succeeds. The browser console has a message “presenceConnected succeeded”.