Configure Contact Form

Introduction

The contact form is an additional feature which makes it possible to have the customer fill in a contact form, when the WebChat is a non-available state.

 

Prerequisites

Before proceeding installation, please ensure following prerequisites are met.

  • Installed Webchat
  • Installed Webchat Plus Webservice

 

Configure Contact Form

To enable and configure this form, the following steps must be done

  1. Open the Settings.xml from C:\inetpub\wwwroot\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\sfbwebchatplus\xml\settings.xml
  2. Set the enabled value to true
  3. Done, other items are optional

<contactusform>

<enabled>true</enabled>

<showonstatus>6500,15500,18000</showonstatus>

<questions>

<question type="name" placeholder="Fill in you name here">What is your name?</question>

<question>Please enter you email address.</question>

<question type="textarea">Please enter your message.</question>

</questions>

</contactusform>

With the <showonstatus> key, you can determine when you want this contact form to be displayed.

Status

Code

Available

3500

Busy

6500

Away

15500

Offline

18000

 

(Optional) Show Contact Us Button

If you are using the out-of-the-box template, you will need to customize your template, Learn More

Below an example on how you can add the contact us button to the default template.

  1. Open the settings.xml, located in your webchat folder:

    C:\inetpub\wwwroot\WebChat_ucc_<Name>\sfbwebchatplus\xml

  2. Change the following setting to true:

    <defaulttemplateloadfromcustomtemplatefile>true</defaulttemplateloadfromcustomtemplatefile>

  3. Open the templates.html located in your webchat folder:

    C:\inetpub\wwwroot\WebChat_ucc_<Name>\custom_assets\presencetemplates

  4. Replace the content with

    <!--Anywhere365 Webchatplus custom jsrender template file-->

    <!-- Custom templates file, also add corresponding javascript/jquery in custom_assets/js/anywhere365_sfbwebchatplus_presence_custom.js file-->

    <!-- Start Anywhere365 Webchat Custom Presence Templates -->

    <!-- add more templates if needed, eg: -->

    <!--

    <script id="yourCustomPresenceItemInPageTemplateId" type="text/x-jsrender">

    <div class="anywhere365PresenceItem" {{if Status == 3500}} style="cursor: pointer;" {{/if}}>

    <div class="presenceImages">

    <img id="presenceChatAnywhere365" class="person" src="{{: WebChatRootUrl }}sfbwebchatplus/images/status/default_{{: Status}}.png" alt="Start webchatplus" />

    </div>

    <div class="chatName">{{: WebChatGroupName }}</div>

    <div class="status" style="display: none">{{: Status }}</div>

    <div class="callmeCallMe adds a button on your website where the customer can enter his / her number to be called by the UCC, saving the customer in telephone costs." style="display: none">{{: CallMe }}</div>

    </div>

    </script>

    -->

    <!-- Start Default Anywhere365 Webchat Presence Templates -->

    <script id="presenceItemInTab" type="text/x-jsrender">

    <div class="anywhere365PresenceItem sidebarPresence {{if Status == 3500}}presenceOnline{{else Status == 6500}}presenceBusy{{else Status == 15500}}presenceAway{{else Status == 18000 || Status == 0}}presenceOffline"{{/if}}">

    <div class="anywhere365presence">

    <div class="chatName">{{: WebChatGroupName }}</div>

    <div class="status" style="display:none;">{{: Status }}</div>

    <div class="callme" style="display: none">{{: CallMe }}</div>

    <div class="statustxt"> {{if Status == 3500}}<span class="green">Available</span>{{else Status == 6500 }}<span class="red">Busy</span>{{else Status == 15500}}<span class="yellow">Away</span>{{else Status == 18000 || Status == 0 }}<span class="gray">Offline</span>{{/if}}</div>

    {{if Status != 3500}}

    <div class="contactuspresence">

    <!--<div class="contactuspresencetxt"><span>Our opening hours: </br>M-F : 8am to 8pm </br>Sat : 9am to 3pm</span></div>-->

    <input type="button" class="contactuspresencebutton" value="Contact us"/>

    </div>

    <div style="clear:both;"></div>

    {{/if}}

    <div class="sortOrder" style="display: none">{{: SortOrder }}</div>

    </div>

    <div class="presenceImages">

    {{if WebChatGroupNameImagesEnabled == true }}

    <img id="presenceChatAnywhere365" class="person" src="{{: WebChatRootUrl }}sfbwebchatplus/images/status/{{: WebChatGroupName }}_{{: Status}}.png" alt="Start webchatplus" onerror="javascript: this.src='{{: WebChatRootUrl }}sfbwebchatplus/images/status/Default_{{: Status}}.png'" />

    {{else}}

    <img id="presenceChatAnywhere365" class="person" src="{{: WebChatRootUrl }}sfbwebchatplus/images/status/Default_{{: Status}}.png" alt="Start webchatplus"/>

    {{/if}}

    </div>

    </div>

    </script>

    <!-- End Default Anywhere365 Webchat Presence Templates -->

    <!-- End Anywhere365 Webchat Custom Presence Templates -->

  5. Do a IIS reset