Class ChatBubble

ChatBubble

The ChatBubble class is the high-level container class that allows you to render a Chat Bubble in your web page or React Native app.

Main entry point for interfacing with all functions related to the Botsquad chat bubble. Its main purposes are the following:

  • Get information about the chat bubble (bot details, unread message count)
  • Keep the unread message count updated in realtime
  • Send 'page view' events to indicate on which page the bubble is being displayed
  • Configure the (web)app's push token
  • Handle in-app nudges and allow the user to engage with these.
  • Receive events that are sent from the bot

Getting started

Instantiate this class with a [[Config]] object; then call [[ChatBubble.connect]] to establish the connection to the server.

Example code:

import { ChatBubble } from '@botsquad/sdk'

const config = {
  // required:
  botId: '66a8fe768ea6fea876f987ea',
  userAgent: 'testApp/1.0 (Android; 8)',

  // optional:
  locale: 'nl_NL',
  timezone: 'Europe/Amsterdam',
  userToken: '<userToken that was sent on the previous connect()>',
  hostname: 'bsqd.me'
}

const bubble = new ChatBubble(config)

// initiate the connection.
const info = await bubble.connect()

// information that is returned:
const {
  userToken,
  userInfo,
  badgeCount,
  bot: {
    id, title, profilePicture
  }
} = info

console.log(`Connected with user token: ${userToken}`)

bubble.on('badgeCountUpdate', badgeCount => {
  console.log('Got new badge count: ' + badgeCount)
})

// page change
bubble.sendPageView('http://pageurl.com', 'page title')

// nudges
bubble.on('nudge', nudge => {
  const {
    message, profilePicture, caption
  } = nudge

  // show the nudge
  if (caption) {
    // show nudge with title bar and (optionally) a picture
  } else {
    // show basic message-only nudge
  }
})

// dismiss the nudge
bubble.nudgeDismiss(nudge)

// engage with the nudge
await bubble.nudgeEngage(nudge)

// open the chat by visiting the webview URL:
bubble.getWebviewUrl()

// configure push token
await bubble.configurePushToken('pushwoosh', '<token data>')

// send extra user information to the bot
await bubble.putUserInfo({ first_name: "john", last_name: "doe", visitor_id: "12345" })

Hierarchy

  • ChatBubble

Constructors

constructor

Properties

botResponse? config conversations onEventDispatcher onNudgeDispatcher postConnect restClient socket userId? userInfo userToken? visitors

Accessors

onConversationsUpdate onEvent onNudge

Methods

closeConversation connect connectSocket disconnect getConfig getSocket getUserId getUserInfo getWebviewUrl nudgeDiscard nudgeEngage nudgeShown putUserInfo registerPushToken sendChatOpenState sendPageScroll sendPageView whenConnected

Constructors

constructor

Properties

Optional botResponse

botResponse?: BotResponse

Private config

config: Config

Private conversations

conversations: Manager

Private onEventDispatcher

onEventDispatcher: SimpleEventDispatcher<Event> = ...

Private onNudgeDispatcher

onNudgeDispatcher: SimpleEventDispatcher<Nudge> = ...

Private postConnect

postConnect: (() => void)[] = []

Type declaration

    • (): void

    • Returns void

restClient

restClient: Client

Private socket

socket: Socket

Private Optional userId

userId?: string

Private userInfo

userInfo: null | UserInfo = null

Private Optional userToken

userToken?: string

Private visitors

visitors: null | Manager = null

Accessors

onConversationsUpdate

  • get onConversationsUpdate(): ISimpleEvent<ConversationsUpdatePayload>

  • Subscribe to changes in any of the conversations in the chat bubble.

    Usage:

    bubble.onConversationsUpdate.subscribe(info => console.log(`Badge count updated: ${info.badgeCount}`))

    When you subscribe to the conversations update, the callback is invoked right away with the current badge count value.

    Returns ISimpleEvent<ConversationsUpdatePayload>

onEvent

  • get onEvent(): ISimpleEvent<Event>

  • Subscribe to any events that are sent from the server. From within a bot, an event can be emitted to the chat bubble, by doing emit "name", to: :chat_bubble in BubbleScript.

    Returns ISimpleEvent<Event>

onNudge

  • get onNudge(): ISimpleEvent<Nudge>

  • Subscribe to nudges that are sent from the server. Nudges are sent in response to visitor events, mainly page views.

    Returns ISimpleEvent<Nudge>

Methods

closeConversation

  • Close the named conversation

    Parameters

    • g: string

    Returns Promise<void>

connect

Private connectSocket

disconnect

  • Close the connection to the server, if it was opened.

    Returns Promise<void>

getConfig

  • Return the current config. This is the Config object that was passed in, augmented with all the default parameters.

    Returns Config

getSocket

getUserId

  • Return the current user ID of this connection

    Returns undefined | string

getUserInfo

getWebviewUrl

  • Retrieve the URL for the webview that can be embedded to show the bot's conversation(s). Returns null when not connected or when the configured but does not have a publicly accessible web interface.

    Parameters

    • Optional g: string

    Returns null | string

nudgeDiscard

  • Signal the server that the user has discarded a nudge. The given nudge will not be triggered again for this user.

    Parameters

    Returns Promise<void>

nudgeEngage

  • Signal the server that the user has engaged with a nudge.

    Parameters

    Returns Promise<void>

nudgeShown

  • Signal the server that the user has seen the nudge.

    Parameters

    Returns Promise<void>

putUserInfo

  • Push a user information update to the Botsquad platform.

    For any subsequent new chatbot conversation, the information provided in this API call will be available in Bubblescript under the user.* variable namespace.

    Parameters

    Returns Promise<UserInfo>

registerPushToken

  • Register a push token for the current connection.

    Valid push types are web-push, firebase, pushwoosh and expo.

    Parameters

    Returns Promise<OkResponse>

sendChatOpenState

  • Report the opened state of the chat back to the chat bubble

    While the chat is opened, nudges will be suspended from triggering.

    Parameters

    • open: boolean

    Returns Promise<{}>

sendPageScroll

  • Send a page scroll percentage to the server

    Nudges can be triggered when the page has scrolled to a certain percentage.

    Parameters

    • percentage: number

    Returns Promise<{}>

sendPageView

  • Send a page view event to the server.

    Use this to track on which page of the website your user is currently visiting. In the backend this is used to show a realtime view of current visitors.

    Parameters

    • url: string

      The URL of the current page. This parameter needs to be a valid URL, in the form of scheme://hostname/path. For native apps, use something like app://app-package-name/current-screen. If your native app supports Android app links or iOS Universal links, you can also send these.

    • title: string

      The title of the current page or app screen.

    Returns Promise<{}>

Private whenConnected

  • Type Parameters

    • T

    Parameters

    • callback: (() => Promise<T>)
        • (): Promise<T>

        • Returns Promise<T>

    Returns Promise<T>

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc