WebChat integrate into HTML


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.



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





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

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




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.

Note Make sure to load in the right jquery version. In this example 2.1 is loaded.

<!-- 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>


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

var optionalArguments = [];



<!-- End Anywhere365 WebChat Scripts -->


Replace WebChat root url

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

Examples for [WEBCHATROOTURL]:

[protocol][fqdnFDQN stands for Fully Qualified Domain Name and specifies the exact location in the tree hierarchy of the Domain Name System (DNS). An example for [hostname].[domain].[top level domain] is [www].[microsoft].[com]][webchat application path]

Take protocol from current page (//)


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

Force http:


Force https:



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.


/*init with optional parameters:*/



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




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


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


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


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


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



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