WebChat integrate into WordPress

Introduction

The WebChat application can be added to your WordPress website by adding some scripts to your footer. The scripts will load html, css and javascript to your page, 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.

 

How to add webchat to a Wordpress website

  1. Login on your FTP or other way to access your website files
  2. Download you footer.php file
  3. Edit and go to the end, right above this code:

    <?php wp_footer(); ?>

  4. Make sure jQuery (version 2 or up) is already loaded on the website, if not load it here like one of these methods
    1. Download the jQuery file yourself and paste it in your js file. Then call it like this

      <script src="<?php echo get_template_directory_uri(); ?>/js/ /jquery-2.1.0.js"></script>

    2. Load it externally like this:

      <script src="https://code.jquery.com/jquery-2.1.0.js" integrity="sha256-D6d1KSapXjq2tfZ6Ie9AYozkRHyB3fT2ys9mO2+4Wvc=" crossorigin="anonymous"></script>

  5. 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.
    1. Now load the webchat html. Load this like this:

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

    2. Replace the bold lines with the root url of the installed WebChat.
    3. Next load the Anywhere365 Webchat Scripts like this:

      <!-- Start Anywhere365 Webchat Scripts -->

      <script>

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

      Anywhere365WebchatIntegration.Init(

      {

      webchatRootUrl: "//[WEBCHATROOTURL]/webchatwww/",

      settingsXmlUrl: “//[WEBCHATROOTURL]/webchatwww/custom_assets/xml/settings_wspsite.xml",

      presenceCustomFileUrl : "//[WEBCHATROOTURL]/webchatwww/custom_assets/js/anywhere365_sfbwebchatplus_presence_custom.js"

      });

      </script>

      <!-- End Anywhere365 Webchat Scripts -->

    4. Replace the bold lines with your own locations and files (normally this is also located in the installed WebChat location). The webchat should should work
  6. Save the file and refresh your website. If the installation part was done correctly, the webchat should now be visible and working.
  7. For more general information on the WebChat Integration, Learn More