The user interface can be branded to match the colors and styles of each tenant's business.

The primary sections are:

1.The Login Panel

2.The Inbox / Sent Tabs

3.Reading Messages

4.The Trash Tab

The elements that can be styled using the message-portal-head and message-portal-body custom forms are shown below. Contact your iService administrator or account manager for details on updating these elements.

To change the image used for the logo, add the following to the message-portal-head form.

<script>

   var logoURL = 'https://yourlogo.png';

   var displayLoginName = true; 

   var displayLogout = true; 

</script>

The Login Panel

Elements to customize in the login panel

The Inbox and Sent Tabs

Customizing the tabs for Inbox and Sent

The Read Message Panel

The Read Message panel

The Trash Tab

The Trash tab

The builtin Compose Message form displays all public topics. To override this with a custom topic list, add the following to the message-portal-head form that is referenced in the website. Set the variable useCustomTopicList to true. The example code must be included within a <script> section of that form.

<script>

/*This is custom topic list for the Compose menu*/
var useCustomTopicList = true;
var topicsList = [
  {'id' : '10', name: 'Customer Service' },
  {'id' : '13', name: 'Technical Support'},
  {'id' : '14', name: 'Sales'}
];

</script>

In the example above, the Compose menu would include three topics in the topic list. The display names would be Customer Service, Technical Support, and Sales. The topic ID represents the actual topic that will receive the question (e.g., topic 10 for customer service).

You can include hyperlinks in the Message Portal top banner. Add the following to the message-portal-head form that is referenced in the website and set the value for displayMenus to true. The example code must be included within a <script> section of that form.

<script>

/*These are header menus for the message portal*/

var displayMenus = true;

var menuList = [

  {

    'name': 'Our Website',

    'url': 'https://www.ourwebsite.com',

  },

  {

    'name': 'Our Help Site',

    'url': 'https://www.ourhelpsite.com',

  }

]

</script>

The portal includes a spot to insert you own HTML above and below the message section. Add the following to the message-portal-body form that is referenced in the website and set the content as desired. The example code must be included within a <script> section of that form with the exact id as shown below.

To insert code above the message section.

<script type="text/ng-template" id="message-portal-top.html">

<!-- Your custom HTML goes here -->

<p>This is the top</p>

</script>

To insert code below the message section.

<script type="text/ng-template" id="message-portal-footer.html">

<!-- Your custom HTML goes here -->

<p>This is the bottom</p>

</script>

The location of these examples on the login panel and after login is illustrated below.

The builtin message-portal form provides a spot for inserting a chat button in the bottom right corner of the page. It also includes an option for using a special chat form that is dedicated to the portal and loads within an iFrame on the message-portal page.

Using the embedded chat-message-portal form

A special purpose chat form, named chat-message-portal, can be used within an iFrame in your portal. This is the preferred method of including chat because this form load within the page (no popup), doesn't require a separate login, and uses the portal's Compose form when agents are not available for the selected topic. There are two scripts that must be included in your message-portal-body to activate the embedded chat form.

The button script - this inserts a button into the bottom of the form that allows the chat iFrame to toggle on and off. Add the script exactly as shown below.

<script type="text/ng-template" id="chat-button.html">

   <button class="btn open-button pull-right chat-btn" ng-click="showChatBox()"> <i class="fa fa fa-comments-o" ng-show = "!showchat"></i> <i class="fa fa-chevron-down" ng-show = "showchat"></i> </button>

</script>

The chat-iFrame script - this is the actual chat form that will load when the chat button above is clicked.

<script type="text/ng-template" id="chat-iframe.html">

  <iframe scrolling="no" src="http://qadesign/f/chat-message-portal"></iframe>

</script>

The topic list for the chat-message-portal form can be customized using the same approach as other chat forms.

Inserting a button that opens chat in a new window

You can use the chat button location to insert your own buttons and open any form desired. To load the standard chat2 for insert the following into your message-portal-body customization form.

<script type="text/ng-template" id="chat-button.html">

<a class="btn pull-right chat-btn" href="$value -rootpath$f/chat2" target="_blank" > <i class="fa fa fa-comments-o"></i> Chat With Us</a>

</script>

The secure notification answer panel functions similarly to the standard answer panel. The differences are illustrated below.

The secure answer panel with notifications

1 - The SEND button generates a Secure Response that the customer must log in to read. Similar to an Agent Response, the Secure Response resolves the customer question. The SEND button also sends the contact a Secure Notification email that informs them the answer is available. The interaction properties used for controlling display in the message portal are all set to False, meaning the answer will appear as unread in the message center Inbox of the customer.

2. The SEND - Leave Open button generates a Secure Email, which does not resolve the customer's question. A Secure Notification template is emailed to the customer so they know that an answer is available to their question. Similar to the Secure Response, the customer must log in to the message portal to read the Secure Email.

3. The Resolve button create a Resolve Note that is only available for agents to view. It resolves the customer question and the DoNotReply and Deleted interaction properties will be set to True for the answer. This prevents it from being displayed to the customer in the message portal.

4. The Private Note action is identical to the action in the standard interface. It creates a Private Note that is not viewable by the customer in the message portal. Since the secure message portal does not have a SPAM button, the Private Note button was moved from the SAVE split button to its own button here.

The secure notification process requires every segment using the notifications answer panel to have a Secure Notification defined within the segment. You should only create one Secure Notification template for each segment.

The content within your notification template should explain to the customer that an answer is available, and provide instructions for how to login and read the answer. There are no required variables for the notification template, but the standard variables for name, etc. function similar to other notifications.  

This is deprecated beginning with version 9.0. Use the Answer Panel Buttons page to select the secure notifications answer panels.

For versions v8 and prior only

The secure notification answer panel prior to v9 is set within the Website settings page. The setup for the notifications version of the secure answer panel requires the message center interaction properties, and a secure notification template. Once these are configured you may select the panel in the Website settings page.