Skip to content

Latest commit

 

History

History
173 lines (132 loc) · 7.07 KB

README.md

File metadata and controls

173 lines (132 loc) · 7.07 KB

BlackBerry Spark Communications Platform

Click To Chat Sample for JavaScript

The Click to Chat sample app demonstrates how to integrate a chat experience into your website with the Spark SDK for JavaScript. This app allows a user to click a button on a webpage to start a secure chat with a predefined user or agent. The bbmChat widget handles the rendering of messages within the chat, and allows the user to send text, picture, and file messages.


Integrate

Demo video: Integrate a secure chat widget into your web page

Features

This app demonstrates how easy it is to integrate the bbmChat widget into your webpage. It initializes the Spark SDK for JavaScript, and starts a chat with a predefined user. The app then launches the bbmChat widget which allows the user to:

  • View all sent and received messages in a chat
  • Send a text message, picture, or file attachment
  • Send high priority messages
  • Mark incoming messages as Read
  • Show typing notifications
  • Retract messages
  • Delete messages
  • Show delivered and read message status
  • Show the chat participant

Getting Started

This sample requires the Spark SDK, which you can find along with related resources at the location below.

YouTube Getting Started Video

Getting started video

Prerequisites

Run "yarn install" in the ClickToChat application directory to install the required packages.

Visit the Getting Started with Web section to see the minimum requirements.

To use the ClickToChat example, you must set up the following elements in js/config.js:

  • Oauth2 configuration (AUTH_CONFIGURATION)
  • A hardcoded contact registration ID with whom anyone who views the page will chat (CONTACT_REG_ID)
  • Your Spark user domain (ID_PROVIDER_DOMAIN)
  • Firebase configuration (FIREBASE_CONFIG)
  • User passcode (USER_SECRET)

Walkthrough

Follow this guide for a walkthrough of how to integrate a rich chat experience into your webpage.

Import the bbmChat UI widget into your web application

Your web application simply needs to import the bbmChat widget in order to bring a rich chat experience into your webpages.

  <link rel="import" href="node_modules/bbmChat/bbmChat.html">

The bbmChat widget needs only the ID of the chat you've created and it will handle the rest.

Initialize the Spark SDK for JavaScript

Create new instance of BBMEnterprise.

  bbmeSdk = new BBMEnterprise({
    domain: ID_PROVIDER_DOMAIN,
    environment: ID_PROVIDER_ENVIRONMENT,
    userId: authUserInfo.userId,
    getToken: authManager.getBbmSdkToken,
    description: navigator.userAgent,
    messageStorageFactory: BBMEnterprise.StorageFactory.SpliceWatcher,
    kmsArgonWasmUrl: KMS_ARGON_WASM_URL
  });

For more information about setting up the Spark SDK for JavaScript, visit the Getting Started with Web section of the guide.

Perform setup

When the setup state changes, a 'setupState' event will be emitted. Listen for this to determine when the setup state changes.

  // Handle changes of BBM Enterprise setup state.
  bbmeSdk.on('setupState', state => {
    console.log(`BBMEnterprise setup state: ${state.value}`);
    switch (state.value) {
      case BBMEnterprise.SetupState.Success: {
        const userRegId = bbmeSdk.getRegistrationInfo().regId;
        createUserManager(userRegId, authManager,
          bbmeSdk.getIdentitiesFromAppUserId,
            bbmeSdk.getIdentitiesFromAppUserIds)
        .then(userManager => {
          // User manager is created.
          // Application is able ot start chat now.
          // ... Start chat here.
        });
        break;
      }
      case BBMEnterprise.SetupState.SyncRequired: {
        if (isSyncStarted) {
          reject(new Error('Failed to get user keys using provided USER_SECRET'));
          return;
        }
        const isNew =  bbmeSdk.syncPasscodeState === BBMEnterprise.SyncPasscodeState.New;
        const syncAction = isNew ? BBMEnterprise.SyncStartAction.New : BBMEnterprise.SyncStartAction.Existing;
        bbmeSdk.syncStart(USER_SECRET, syncAction);
      }
      break;
      case BBMEnterprise.SetupState.SyncStarted:
        isSyncStarted = true;
      break;
    }
  });

  // Handle setup error.
  bbmeSdk.on('setupError', error => {
    // Notify user about failure.
    alert(`BBM Enterprise setup failed: ${error.value}`);
    reject(error.value);
  });

  // Start BBM Enterprise setup.
  bbmeSdk.setupStart();

Start a chat with a predefined user

To start a chat with a predefined user and show the bbmChat widget, you need to invoke the bbmMessenger.chatStart API and pass in the user's regId. Upon successfully creating the chat, launch the bbmChat widget to allow the user to view and send messages in the chat.

  const bbmChat = document.querySelector('#bbm-chat');
  bbmMessenger.chatStart(CHAT_DETAILS).then(pendingChat => {
    bbmChat.setChatId(pendingChat.chat.chatId);
  });

License

These samples are released as Open Source and licensed under the Apache 2.0 License.

This page includes icons from: https://material.io/icons/ used under the Apache 2.0 License.

Reporting Issues and Feature Requests

If you find a issue in one of the Samples or have a Feature Request, simply file an issue.