Dialog-shift-sdk NPM

SDK Documentation

A client library for build integration with DialogShift on websites. Written in TypeScript and published in UMD and ES2015.

Installation

You can install SDK using npm or you can use http link directly.

Install from npm

npm i dialog-shift-sdk --save

Include from CDN

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/dialog-shift-sdk/bundles/dialog-shift-sdk.umd.min.js"
/>

Quick start (TypeScript & ES2015)

import { DialogShift } from 'dialog-shift-sdk'

const chat = DialogShift.instance({
  id: '%id%',
})

Quick start (HTML & UMD)

Your app will interact with the DialogShift Web Client through the WebClient instance, which now is available in your scope.

<!DOCTYPE html>
<html>
  <head>
    <title>Dialog Shift SDK</title>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/dialog-shift-sdk/bundles/dialog-shift-sdk.umd.min.js"
    ></script>
  </head>
  <body>
    <script type="text/javascript">
      var chat = DialogShift.instance({
        id: '%id%',
      })
    </script>
  </body>
</html>

Configuration

Property	Type	Description
id	string	Chat id obtained from the application dashboard.
visitorId?	string	Id using for identifying this visitor.
locale?	string	Chat locale. Defaults to `en`.
position?	'left' \| 'right'	Chat position on webpage.
isChatboxVisible?	boolean	Show chat window expanded if `true`. Defaults to `false`.
isButtonVisible?	boolean	Show toggle button if `true`. Defaults to `true`.
renderButton?	boolean	Render toggle button if `true`. If button is not rendered show or hide it later is impossible. Defaults to `true`.
isTeaserVisible?	boolean	Show attention grabber button if `true`. Defaults to `false`.
buttonText?	string	Text for toggle button. If text is setted icon and text render at same time. Defaults to no text.
teaserText?	string	Text for attention grabber. Defaults to 'Chat'.
hideOnMobile?	boolean	Hide chat on mobile device if `true`. Defaults to `false`.
showFooter?	boolean	Hide chat footer with input controls if `false`. Defaults to `true`.

Events

Name	Description
render	Fires whenever chat widgets actually placed in the DOM. You can manipulate chatbox, button, teaser.
ready	Fires whenever the chat DOM is ready, configuration is loaded and chat connected to conversational channel. You can send messages. Mind that chat connects to conversational channel only after first open.
chatbox.show.before	Fires before the chat window is shown.
chatbox.show	Fires whenever the chat window is shown.
chatbox.hide.before	Fires before the chat window is hidden.
chatbox.hide	Fires whenever the chat window is hidden.
conversation.start	Fires whenever a visitor or operator sends the first message.
message.sent	Fires whenever a visitor sent message.
message.received	Fires whenever a visitor recieved message.
operator.available	Fires whenever operator is available for chat.
operator.away	Fires whenever operator is away.

API Methods

Name	Parameters	Description
instance	config chatConfig	Returns the chat singleton instance.
on	string eventName, function handler	Listen on a new event by type and handler. The handler will not be listen if it is a duplicate.
once	string eventName, function handler	Listen on an once event by type and handler. The handler will not be listen if it is a duplicate.
off	string eventName?, function handler?	Listen off an event by type and handler. Or listen off events by type, when if only type argument is passed. Or listen off all events, when if no arguments are passed.
offAll		Listen off all events.
showChatbox		Show chatbox.
hideChatbox		Hide chatbox.
showButton		Show toggle button.
hideButton		Hide toggle button.
showTeaser		Show attention grabber.
hideTeaser		Hide attention grabber.

Dialog Shift Dialog Shift Javascript Dialog Shift SDK

@infinitebrahmanuniverse/nolb-dia @everything-registry/sub-chunk-1477 @zalastax/nolb-dia

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago