ClickToChat

This example shows you how to integrate a chat experience into your website with the BBM Enterprise 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.

Screenshots

image_alt_preview25

Features

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

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:

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 BBM Enterprise SDK for JavaScript

To initialize the BBM Enterprise SDK for JavaScript you need to pass in your user domain, and specify the Key Provider and Identity Provider implementations to use.

  var bbmSDK = new BBMEnterprise({
    domain: ID_PROVIDER_DOMAIN,
    environment: 'Sandbox',
    userId: userInfo.id,
    getToken: () => {
      return oAuthHelper.getOAuthAccessToken(OAUTH_CONFIGURATION);
    },
    getKeyProvider: (regId, accessToken) => {
      return FirebaseKeyProvider.factory.createInstance(
      regId, firebaseConfig, accessToken);
    },
    description: navigator.userAgent,
    messageStorageFactory: BBMEnterprise.StorageFactory.SpliceWatcher
  });

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

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.

    bbmMessenger.chatStart(CHAT_DETAILS).then(pendingChat => {
      bbmChat.setChatId(pendingChat.chat.chatId);
    });