|
|
| Line 1: |
Line 1: |
| − | <translate>
| + | #REDIRECT [[Tutorials-for-admins/Chat/HowtoUsetheChatWidgetHTMLSnippet]] |
| − | = How to Edit the Full Chat Code for Local Hosting =
| |
| − | Chat conversations are facilitated by chat widget applications that are embedded on mobile and desktop websites. Bright Pattern provides two ways to embed chat widget applications onto websites.
| |
| − | | |
| − | You can use either an out-of-the-box chat application hosted by your service provider, which involves copying the [[Tutorials-for-admins/Chat/HowtoUsetheChatWidgetHTMLSnippet | HTML code snippet]] that provides access to the web elements of the chat application that customers will use to access your contact center via a scenario entry; or you can create your own application by downloading and modifying the full chat code of the client application to match the look and feel of your company website, and implement additional application functionality using the Bright Pattern Contact Center [[Mobile-web-api-specification/Purpose | Mobile/Web API]].
| |
| − | | |
| − | This article describes how to download the client application and modify it for use on your own domain.
| |
| − | | |
| − | == Prerequisites ==
| |
| − | * Be a Bright Pattern Contact Center user with the administrator role and privileges.
| |
| − | | |
| − | * Be familiar with and have access to the [[Contact-center-administrator-guide | Contact Center Administrator]] application and contact center operations.
| |
| − | | |
| − | == Procedure ==
| |
| − | === Step 1: Download client application ===
| |
| − | # In the Contact Center Administrator application, go to section ''Configuration > Scenario Entries > Messaging/Chat'', and select the desired chat scenario entry to view its properties.<br /><br />
| |
| − | # In the properties, go to ''Full chat code for local hosting'' and click the '''Download''' button. A zip file (chat-client.zip) with the code of the chat application will be downloaded to your computer.<br /><br />[[File:Messaging-Chat-Scenario-Entry-Download2-5399.PNG|center|thumb|450px|Web HTML snippet properties]]<br /><br />
| |
| − | # Open the file and extract all/unzip it. This file includes the following folders and HTML files:<br /><br />
| |
| − | ## css<br />
| |
| − | ## emoji<br />
| |
| − | ## images<br />
| |
| − | ## js<br />
| |
| − | ## media<br />
| |
| − | ## client-chat-page.html<br />
| |
| − | ## snippet-page.html<br /><br />[[File:Client-Side-Chat1-5399.PNG|center|thumb|450px|chat-client.zip folder contents]]<br /><br />
| |
| − | # Save the file to your local host (where the chat widget will be hosted).<br /><br />
| |
| − | | |
| − | === Step 2: Open the snippet code ===
| |
| − | 1. Open snippet-page.html for editing. Snippet-page.html includes the JavaScript of your chat application. The following is an example of what you see in the downloaded snippet-page.html.
| |
| − | | |
| − | ==== Contents of snippet-page.html ====
| |
| − | <syntaxhighlight lang="html">
| |
| − | <!DOCTYPE html>
| |
| − |
| |
| − | <!--___PRODUCT_BUILD___ (___PRODUCT_COMMENTS___) ___PRODUCT_DATE___-->
| |
| − |
| |
| − | <html>
| |
| − | <head>
| |
| − | <title>Chat Test Page</title>
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − | <!-- You have to put this piece of JavaScript code into your web page -->
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | SERVICE_PATTERN_CHAT_CONFIG = {
| |
| − | appId: '123', /* Unique identifier of Mobile/Web record of Portal Tenant Management */
| |
| − | clientId: 'WebChat', /* no need to change this */
| |
| − | apiUrl: '/clientweb/api/v1', /* path to public API can be absolute like http://example.brightpattern.com:98/clientweb/api/v1 or relative*/
| |
| − | tenantUrl: 'example.com',
| |
| − | width: 300, /* chat width */
| |
| − | chatPath: '', /* relative path to client-chat-page.html i.e empty here because snippet-page.html and
| |
| − | client-chat-page.html in same directory */
| |
| − | callback:false,
| |
| − | subject: 'TEST SUBJECT',
| |
| − | sound_notification: true,
| |
| − | sound_notification_file: 'media/ding.mp3',
| |
| − |
| |
| − | email: 'barack.obama@gmail.com'
| |
| − | /* Default customer data, it can be collected on current site's context*/
| |
| − | /* Customer data also can be requested via "Request Input" block + "MobileChatCustomerData" formName */
| |
| − | /*
| |
| − | togetherJS_enabled : true,
| |
| − | first_name: '',
| |
| − | last_name: '',
| |
| − | from: '',
| |
| − | email: '',
| |
| − | account_number: '',
| |
| − | phone_number: 91001,
| |
| − | location : {
| |
| − | latitude: 37.5151481,
| |
| − | longitude: -122.4183997
| |
| − | }
| |
| − | */
| |
| − |
| |
| − | };
| |
| − | </script>
| |
| − | <script type="text/javascript" src="js/snippet.js"></script>
| |
| − | </body>
| |
| − | </html>
| |
| − | </syntaxhighlight>
| |
| − | | |
| − | === Step 3: Edit the snippet code ===
| |
| − | Replace the contents of snippet-page.html with the following code, which includes only what you absolutely need to launch the chat application on your webpage.
| |
| − | | |
| − | ==== Copy This ====
| |
| − | <syntaxhighlight lang="html">
| |
| − | <!DOCTYPE html>
| |
| − | <link type="text/css" rel="stylesheet" href="https://<tenant_url>/clientweb/chat-client-v4/css/form.css">
| |
| − | <script type="text/javascript">
| |
| − | SERVICE_PATTERN_CHAT_CONFIG = {
| |
| − | appId: '<app_id>',
| |
| − | apiUrl: 'https://<tenant_url>/clientweb/api/v1',
| |
| − | tenantUrl: '<tenant_url>',
| |
| − | chatPath: 'https://<tenant_url>/chat-client-v4/'
| |
| − |
| |
| − | /*
| |
| − | // Default customer data, it can be collected on current site's context
| |
| − | first_name: '',
| |
| − | last_name: '',
| |
| − | email: '',
| |
| − | phone_number: ''
| |
| − | */
| |
| − | };
| |
| − | </script>
| |
| − | <script src="js/init.js"></script>
| |
| − | </syntaxhighlight>
| |
| − | | |
| − | | |
| − | 2. Edit the values of the following parameters to point to your contact center and the domain where the chat widget will be hosted.
| |
| − | | |
| − | * '''appId''' - The unique identifier of the chat application (e.g., “'428938e0-7b11-41b5-bbaa-b28ebb27812c”), also known as the chat scenario entry launch point. You can find the appID in the chat application’s scenario entry properties.
| |
| − | | |
| − | * '''apiUrl''' - The URL of your domain with the API endpoint (e.g., “ https://company.brightpattern.com/clientweb/api/v1”)
| |
| − | | |
| − | * '''tenantUrl''' - The URL of your contact center (e.g., “company.brightpattern.com”)
| |
| − | | |
| − | * '''script src''' - The source of the JavaScript (i.e., where the full chat code lives). Edit this value to be “js/init.js”.
| |
| − | | |
| − | | |
| − | 3. Save the file.
| |
| − | | |
| − | | |
| − | ==== Example of an edited version of snippet-page.html ====
| |
| − | <syntaxhighlight lang="html">
| |
| − | <!DOCTYPE html>
| |
| − | <link type="text/css" rel="stylesheet" href="https://company.brightpattern.com/clientweb/chat-client-v4/css/form.css">
| |
| − | <script type="text/javascript">
| |
| − | SERVICE_PATTERN_CHAT_CONFIG = {
| |
| − | appId: 'f58ccefbdc6f41f1baa468dd82186c02',
| |
| − | apiUrl: 'https://company.brightpattern.com/clientweb/api/v1',
| |
| − | tenantUrl: 'company.brightpattern.com',
| |
| − | chatPath: 'https://company.brightpattern/chat-client-v4/'
| |
| − |
| |
| − | /*
| |
| − | // Default customer data, it can be collected on current site's context
| |
| − | first_name: '',
| |
| − | last_name: '',
| |
| − | email: '',
| |
| − | phone_number: ''
| |
| − | */
| |
| − | };
| |
| − | </script>
| |
| − | <script src="js/init.js"></script>
| |
| − | </syntaxhighlight>
| |
| − | | |
| − | | |
| − | === Step 4: Embed the JavaScript onto your webpage ===
| |
| − | # Copy the JavaScript from the snippet-page.html file (everything except for <!DOCTYPE html>).<br /><br />
| |
| − | # Paste it onto the webpage where the chat widget will be accessed by customers.<br /><br />
| |
| − | # Save and publish the webpage.<br /><br />
| |
| − | | |
| − | === Step 5: Test the chat ===
| |
| − | # Log in to the Agent Desktop application as an agent on the team assigned to handle the chat and make yourself Ready.<br /><br />
| |
| − | # In a separate web browser tab or window, open the webpage that has the embedded chat widget. You should see the chat widget’s contact tab on the page, which, when clicked, allows you to start a chat with the contact center.<br /><br />
| |
| − | # Start a chat conversation as a customer and accept the chat as the agent.<br /><br />
| |
| − | | |
| − | | |
| − | | |
| − | | |
| − | </translate>
| |
