# C2C plugin

Bootstrap c2c plugin provide a way for clients to display custom click to chat button on their web pages.

Bootstrap c2c plugin honors all the events and states that from Nuance chat framework.

Plugin comes with a rich set of features and css animation and code flow architecture that clients can inherit or override to make the C2C button more fancier

Plugin is instantiated by calling
new BootStrapC2C({})

BootstrapC2C takes an option object which can contain follong properties, most the below properties are optional. Application can still control the look and feel of c2c button through the css classes aswell.

- ##### accessibilityMessages

  Accessibility messages for the Click2Chat button, to be read out-loud when a user who is using a screen-reader focuses (tabs over) the Click2Chat button.

      var c2c = new BootStrapC2C({
          accessibilityMessages: {
              end: "End Chat",
              resume: "Resume Chat",
              start: "Start Chat",
              onMinimize: "Chat window minimized. To resume, select chat button or press alt plus 1",
              newMessageSingular: "You have {count} unread message.",
              newMessagePlural: "You have {count} unread messages."
          },
      });

- ##### animate

  Does c2c button animate when moving from one state to another

- ##### animateDelay

  Delay that appears before staring an animation within a state

- ##### right

  c2c button right position value

- ##### bottom

  c2c button bottom position value

- ##### width

  c2c button width

- ##### height

  c2c button height

- ##### readyBackgroundColor

  Background color that is applied when c2c button in ready state

- ##### readyBackgroundImageURL

  Background image that is applied when c2c button in ready state

- ##### afterHoursBackgroundColor

  Background color that is applied when c2c button in after hours state

- ##### afterHoursBackgroundImageURL

  Background image that is applied when c2c button in after hours state

- ##### disabledBackgroundColor

  Background color that is applied when c2c button in disabled state

- ##### disabledBackgroundImageURL

  Background image that is applied when c2c button in disabled state

- ##### buzyBackgroundColor

  Background color that is applied when c2c button in buzy state

- ##### buzyBackgroundImageURL

  Background image that is applied when c2c button in buzy state

- ##### minimizedBackgroundColor

  Background color that is applied when c2c button in minimized state

- ##### minimizedBackgroundImageURL

  Background image that is applied when c2c button in minimized state

- ##### closeBtnOnActive

  Does the c2c button in disabled state also must act as a close btn, disabled state is when chat window is open

- ##### readyHtmlContent

  Inner html that can be set to render when c2c is in ready state

- ##### disabledHtmlContent

  Inner html that can be set to render when c2c is in disabled state

- ##### afterHoursHtmlContent

  Inner html that can be set to render when c2c is in after hours state

- ##### buzyHtmlContent

  Inner html that can be set to render when c2c is in buzy state

- ##### minimizedHtmlContent

  Inner html that can be set to render when c2c is in minimized state

Properties that can be set in options object for controlling the FlyIn window

- ##### flyInWelcomeMsg

  Welcome message that is displayed in the flyin opener

- ##### flyInHeader

  Flyin opener header

- ##### flyInWelcomeDelay

  Delay after which flyin opener is displayed

- ##### flyInAvatarUrl

  Avatar url that is displayed along side welcome opener

- ##### flyInAvatarWidth

  Flyin opener avatar width

- ##### flyInAvatarHeight

  Flyin opener avatar height

- ##### showMinimizedBadge

  Display a notification badge which will show the minimized message counter.

- ##### showFlyinMinimizedMessage

  Does the agent messages should be displayed in the flyin window when minimized.

Rich content in flyIn window

- ##### openerWidget

  Pass a rich media Json spec which will be displayed in the flyIn Window

- ##### openerWidgetCallback

  Call back to receive user action

- ##### minimizedWidget

  Pass a rich media Json spec which will be displayed in the flyIn Window during a minimzied state

- ##### minimizedWidgetCallback

  Call back to receive user action for the minimized Rich widget