Adding Undocked Chat and Collaboration Links to the Website

Users can view the HTML code, and use it for pointing to the chat hyperlinks and buttons on the company website to open chat sessions. In a web page, help can be invoked from either a hyperlink or from a form button, the HTML window displays the code to be used for both of these cases.

Along with this code, an infrastructure is used to enable the website for chat, cobrowse, video chat, and offers. As a part of deploying the application, the system administrator should have already configured the website with the OneTag code snippet. Consult your system administrator for more information about obtaining the code snippet.

This section also talks about how to enable auto-login for an entry point and how to show the chat link based on agent availability.

This section does not discuss docked chat implementation. For more information, see Adding Docked Chat to Websites.

The UI does not display the custom chat templates or languages added for a chat or video chat  or callback. Before starting this task, the list of template names and language file names that have been created should be available.

The External URL of Application setting must be configured before obtaining an entry point HTML script.

To add undocked chat and collaboration help links to a website:

  1. From the Navigation menu, browse to Apps > Chat & Messaging > Entry Points.

  2. On the List page, select an entry point.

  3. On the Properties page, click the Show HTML button.

  4. n the Show HTML window that opens, perform the following tasks:

    • Select a template: From the dropdown, select the Aria (Undocked) templates for the entry point.

    • Select a language for the template: From the dropdown, select a language.This window only displays out-of-the-box templates and languages. Custom templates and languages are not displayed here.

    • If Chat Customer Single Sign-On has been configured and enabled for the partition, the Select a provider for Single Sign-On field is displayed. Select a service provider that has been configured from the dropdown menu. For more information, see About Customer Single Sign-On.

    • When you have made your selection, an HTML for chat is generated. Click the Copy HTML button.

      You can only view or copy the HTML. It cannot be edited or deleted. If you are creating a new entry point and want to view its HTML, you have to first save it to enable the Show HTML button.

    Chat Entry Point Show HTML window

  5. Before adding the code to your website, ensure that you replace the server name in the value of the egainChat.liveServerURL property with the fully qualified domain name of the website on which the link is to be hosted. If you are using custom templates and custom languages, change those values as well.

  6. Locate  egainChat.EntryPointId and check the value of the property to see if you need to replace the entry point ID.

  7. Locate  egainChat.Locale and check the value of the property to see if you need to replace the language-country codes with custom languages.

  8. Locate  egainChat.Template and check the value of the property to see if you need to replace the template name with custom templates.

  9. Locate  egainChat.PostChatAttributes and check the value of the property. By default, it is set to false. Set to true to enable posting attributes to the template in use and set any parameters you specified in application-chat-defaults. For example, if you wish to set customer parameters, you can set the parameters in the html:

    egainChat.PostChatAttributes = true;

    egainChat.SetCustomerParameters = function (){

    egainChat.SetCustomerParameters("full_name","Test");

    egainChat.SetCustomerParameters("email_address","test@test.com");

    egainChat.SetCustomerParameters("subject","Test");

    egainChat.CustomerContextParameters[egainAttributeName] = attributeValue;

    If you wish to enable secure chat for the entry point, you also need to set the egainChat.PostChatAttributes property to true and add the following:

    egainChat.SetCustomerParameters("SAMLResponse","")

    Secure chat requires this change to the entry point in addition to the chat template. For more details on configuring the template set for secure chat, see eGain Experience Studio Help.

  10. Edit the following parameters of the entry point code:

    1. Look for the parameter var refererName. By default, the parameter value is blank. Type in a name that describes the page that the hyperlink will appear on. In the following example, the name of the page is “Support”.

      var refererName = "Support"

    2. Edit the following line to change the text that appears in the hyperlink. By default, it is “Test”. Substitute the word “Test” for wording that you deem appropriate, such as “Click here to chat with one of our agents.”

      <a href="#" onClick="openHelp()" style=cursor:hand> Test </a>

  11. Locate var eGainChatUrl and check the value of the property to see if you need to replace the template name, language code and country codes with custom templates or custom languages.

  12. To enable auto-login for an entry point, you need to modify the entry point code so that the customer information collected at the time of login on the website is passed on to the application when the customer initiates a chat session. Also, enable the auto-login feature for the template.

    In the link, you need to add the customer details, which are provided by the customer.

    For example, if the entry point is mapped to a template set that has Name, email ID, and phone number as the login page fields, the following parameters should be added to the URL:

    &fieldname_1=<value1>&fieldname_2=<value2>&fieldname_3=<value3>. Make sure that the values of the parameters are encoded in ASCII encoding.

    Locate the following lines in the code:

    var eGainChatUrl = egainChat.serverURL + '/templates/chat/' + egainChat.Template + '/index.html?entryPointId=' + egainChat.EntryPointId;

    eGainChatUrl += '' + '&templateName=' + egainChat.Template + '&locale=' + egainChat.Locale + '&ver=v11';

    eGainChatUrl += '&postChatAttributes=' + egainChat.PostChatAttributes + '&eglvrefname=' + refererName + '&' + eglvcaseid + vhtIds;

    And modify the following line:

    eGainChatUrl += '&postChatAttributes=' + egainChat.PostChatAttributes + '&eglvrefname=' + refererName + '&' + eglvcaseid + vhtIds+’&fieldname_1=’+ Name+’&fieldname_2=’+ EmailID+’&fieldname_3=’+ Phonenumber+vhtIds;

    Modify the URL to look like:

    where Name, EmailID, Phone-number are the customer details collected at the time of login to the website.

  13. Open the code view of the host web page and add the link code at the appropriate point. You may need to ask your webmaster to perform this task.

Related Topics