If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

In the tutorial, you’ll learn how to use this plugin to connect with the ServicePattern Mobile API. In particular, you will learn how to:

  1. Link the app with your particular Mobile/Web scenario.
  2. Add a “help me” page to connect with an agent.
  3. Use the pre-built UI pages for rich contact center interaction.
  4. Use the provided JavaScript API to build your custom UI and application logic easily.

Before you begin

You need to be a ServicePattern customer with a Mobile/Web scenario entry set up in your ServicePattern configuration. The unique identifier of the scenario entry should match the “appId” value used in the plugin. For more detailed instructions about how to set up the scenario entry, please see BrightPattern reference guide.

All other official docs can be found here.

Create a new app

To start, you are going to create a new app.

  1. Click “Create new app.” For app name, enter ServicePattern and click Create
  2. When the app builder loads, you will see the Start page. Every new app has a default page. You can open the page by going to Pages > startScreen.

Next you are going to import the ServicePattern Mobile API plugin.

Import the plugin

  1. To import the plugin, click Create New > From Plug-in:
    from_plugin
  2. Check the box for ServicePattern Mobile API:
    bright_pattern_plugin
  1. Click “Import selected plug-ins.”
  2. On the next screen, select SP_settings as the start page for the app. Click Apply settings.
  3. Once the plugin is successfully imported, you should see a list of pages and services. Go to Services > SP_mobileSettings. Set the appId value to the unique identifier of your ServicePattern Mobile/Web scenario entry. Set clientId to a unique value. Set the clientWebServerUrl value to be the URL of your ServicePattern client web server. Set the tenantUrl value to be your particular tenant URL in ServicePattern.
    Your settings should look like the following:
    settings

Using the Javascript API

The REST services have already been mapped with the pre-built UI pages provided with the plugin. However, if you wish to build your own UI or modify the provided UI, it is very easy to do so by registering your own event listeners with the provided JavaScript object SP_mobileAPI. If you open the SP_chat page, you can see the event mappings with the pre-built UI by the following JavaScript run on load:

The following sections show you how to set up these mappings and use the JavaScript API to connect with ServicePattern Mobile API.

Connecting to an agent

Once the connection is established, a JavaScript object SP_mobileAPI.session  would be created. To test if there is an active connection, use the following logic:

Sending a new chat message

If the connection is active, you can send a new chat message by calling the following code:

Receiving a chat message

First, register an event listener like the following:

Then onChatMessage would be invoked whenever a new chat message is received.

Typing events

When the agent is typing, the event chat_session_typing occurs. When the agent stops typing, the event chat_session_not_typing occurs. To notify the server when the client is typing, use the following code:

To notify the server when the client is not typing, use the following code:

Uploading an image

If the connection is active, you can call the following function within your app to upload an image:

Ending the conversation

You can end the conversation by using the following code:

Showing forms

To receive the event for showing the form involved with your scenario, register the event listener for chat_session_form_show:

The function onFormShow would be called with the parameters form_name and form_id defined by your scenario entry. The demo UI provides a survey form with a form name called MobileChatSurvey.

Testing the app

Once the app is started, the SP_Settings page would appear as follows:

app_settings

As you can see, values specified in SP_settings will be automatically copied to the page fields.

Once the “Save” button is clicked, the SP_home page would appear:

sp_home

Once the “Help me” button is clicked, the app would attempt to connect to an available agent through the scenario entry defined by the appId. The user has the option to enter the first message and/or upload an image that he wishes the agent to see once the connection is made.

After “Help me” is clicked, the app would navigate to the SP_chat page where the interaction between the user and the agent takes place. When an agent is successfully found, a message would appear showing <agent name> has joined the chat:

chat_window

The user can chat with the agent and upload an image from his phone. After the interaction is done, the user should be presented with a survey form if the scenario requests it:

survey

Once the survey form is sent, the whole interaction is complete and the user is brought back to the SP_home page.