Setting Up a WebChat Channel

To add a new WebChat channel:

  1. From the Settings menu, select SimpleChat Channels under the SimpleChat section
  2. Click the New button to open a new SimpleChat Channel form
  3. Fill in the fields in the different sections as explained under Setting up SimpleChat Channels above
  4. In Channel Type field under the SimpleChat Channels, select Web Chat and click Save.

The Account Name and Code fields will be updated (these data can be changed manually, they determine the name of the site where the chat bubble will appear. If they are manually changed they script must also be updated accordingly, as detailed ahead)

  1. In the Web Chat section that will be displayed, update the properties of the web chat control that will be displayed to the customer as follows:
    1. UI Language: Defines the user interface language of the customer's web chat control
    2. Location: The location of the customer's web chat control, on the left or right side of the page
    3. Directionality: Sets the directionality of the user interface of the web chat control
    4. Logo Tooltip: Defines the tooltip of the customer's web chat control logo
    5. Greeting Title: Sets the greeting title to be displayed in customer's web chat control
    6. Greeting Message: Sets the greeting message to be displayed in the customer's web chat control
    7. Window State: The initial state of the customer's web chat control, collapsed or expanded
    8. Cache Design (Minutes): The duration in minutes for the design to be stored in memory. The higher the number, the better the performance, but updates to the design will be less immediate. Default if not set: 5 minutes
  2. After saving, a Script field containing a script that must be copied and planted on the client site is displayed on the form.

It is required to embed this script on every page on the site where the customer is interested that a chat bubble will direct the customers to this channel.

  1. Click the Design / Test Chat button to see a preview of customer's web chat control.

In the window that opens, you can also design many other parameters of the appearance and behavior of the customer's web chat control, such as the width and height of the window and the icon that will be displayed when it is open and closed, as detailed further below.

Click the Save button to save the design as a draft or the Publish button to publish the new design to apply it to the web chat control embedded in your web site. Or, to return to the previous settings, click the Reset button.

Note: To migrate the designs between environments, export and import the channel information using the Web Chat Channels view.

  1. Fill in the Allowed Domains field with URL prefixes separated by semicolons to limit from which domains the chat can be launched.
  2. Fill in the Word Blacklist with words separated by commas that will be automatically removed from customer messages, to prevent malicious scripts from being run.
  3. To enable SSO sign-in from a portal's personal area securely, fill in a value in the SSO Key field and run from the portal a system service where the caller ID that is passed to the service is encrypted with the same key, and with a time limit. The ID is decrypted using this key and if it was passed within the legal time period, it is automatically filled in the Caller Name field in the SimpleChat conversation, whereby logic can be applied to link the conversation to the caller

Below is a list of all the properties that can be set on the Chat Design screen that opens from the Design / Test Chat button for the channel:

Tab

Section

Property

Explanation

General

 

 

 

 

Dimensions

 

 

 

 

Width

Chat panel width

 

 

Height

Chat panel height

 

Chat Slider

 

 

 

 

Open Icon

Image of icon that opens the chat panel

 

 

Close Icon

Image of icon that collapses the chat panel

 

 

Width

Slider icon width

 

 

Height

Slider icon height

 

 

Vertical Position

Slider icon position on the panel

 

Border

 

 

 

 

Left Border Width

The thickness of the panel's left border

 

 

Left Border Color

The color of the panel's left border

 

 

Top Border Width

The thickness of the panel's top border

 

 

Top Border Color

The color of the panel's top border

 

 

Right Border Width

The thickness of the panel's right border

 

 

Right Border Color

The color of the panel's right border

 

 

Bottom Border Width

The thickness of the panel's bottom border

 

 

Bottom Border Color

The color of the panel's bottom border

 

Shadow Effect

 

 

 

 

Shadow Effect

Border shadow. CSS box-shadow property

Header

 

 

 

 

Dimensions

 

 

 

 

Width

Chat panel header width

 

 

Height

Chat panel header height

 

Background

 

 

 

 

Color

Chat panel header background color

 

 

Logo

Image displayed in the chat panel header

 

Border

 

 

 

 

Left Border Width

The thickness of the header's left border

 

 

Left Border Color

The color of the header's left border

 

 

Top Border Width

The thickness of the header's top border

 

 

Top Border Color

The color of the header's top border

 

 

Right Border Width

The thickness of the header's right border

 

 

Right Border Color

The color of the header's right border

 

 

Bottom Border Width

The thickness of the header's bottom border

 

 

Bottom Border Color

The color of the header's bottom border

Chat Area

 

 

 

 

Dimensions

 

 

 

 

Width

Chat panel's chat area width

 

 

Height

Chat panel's chat area height

 

Background

 

 

 

 

Color

Chat panel's chat area background color

 

Welcome Message

 

 

 

 

Width

Welcome message width

 

 

Background Color

Welcome message background color

 

 

Text Color

Welcome message text color

 

 

Text Size

Welcome message text size

 

 

Rounded Corners

CSS border-radius property

 

Bot Message

 

 

 

 

Icon

Icon displayed next to bot messages

 

 

Background Color

Bot message background color

 

 

Text Color

Bot message text color

 

 

Text Size

Bot message text size

 

 

Alignment

Bot message text alignment

 

 

Rounded Corners

CSS border-radius property

 

Customer Message

 

 

 

 

Icon

Icon displayed next to customer messages

 

 

Background Color

Customer message background color

 

 

Text Color

Customer message text color

 

 

Text Size

Customer message text size

 

 

Alignment

Customer message text alignment

 

 

Rounded Corners

CSS border-radius property

 

Agent Message

 

 

 

 

Icon

Icon displayed next to agent messages

 

 

Background Color

Agent message background color

 

 

Text Color

Agent message text color

 

 

Text Size

Agent message text size

 

 

Alignment

Agent message text alignment

 

 

Rounded Corners

CSS border-radius property

Input Area

 

 

 

 

Dimensions

 

 

 

 

Width

Chat panel's input area width

 

 

Height

Chat panel's input area height

 

Background

 

 

 

 

Color

Chat panel's input area background color

 

Send Button

 

 

 

 

Icon

Send button image

 

 

Size

Send button width and height

 

Attach Button

 

 

 

 

Icon

Attach File button image

 

 

Size

Attach File button width and height

 

Text Box

 

 

 

 

Height

Text box width

 

 

Width

Text box height

 

 

Alignment

Text box text alignment

 

 

Text Color

Text box text color

 

 

Font Size

Text box font size

 

 

Border Color

Text box border color

 

 

Border Width

Text box border width

 

 

Rounded Corners

CSS border-radius property

 

 

Background Color

Text box background color

 

To integrate the SimpleChat panel on a page in the built-in CRM Portal (ADX):

  1. Install the portal add-in according to Microsoft guidelines
  2. Locate and open the Web Page record of the page where you want to display the SimpleChat bubble

Note: For each page in the web site, there is a CRM record where Root field equals Yes and an additional record for each language for which Root field equals No. To add the bubble to all languages, select the record where Root field equals Yes

  1. In the Advanced section of the form, paste the script you copied into the Custom JavaScript field
  2. Add before the script you pasted a </script> tag after the script a <script> tag

That is, it will look like this:

</script>

[paste here the script that you copied from Dynamics]

<script>

  1. Save the record.
  2. Navigate to a page on your site or refresh it if it's already displayed. The SimpleChat bubble should appear