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)

5. 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
6. 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.

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

8. Fill in the Allowed Domains field with URL prefixes separated by semicolons to limit from which domains the chat can be launched.
9. 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.
10. 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

3. In the Advanced section of the form, paste the script you copied into the Custom JavaScript field
4. 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>

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