@comparaonline/ui-offer-web-chat-bitrix

This package will wrap the bitrix chat widget as a React Component to work with its api as a Component.

Installation

yarn add @comparaonline/ui-offer-web-chat-bitrix

Usage

This package will render the web chat for establishing comunication between bitrix and client.

import React from 'react';
import BitrixWebChat from '@comparaonline/ui-offer-web-chat-bitrix';
import { bitrixWebChatUrl } from 'config';

class App extends React.Component {
  render() {
    return (
      <Container>
        <BitrixWebChat
          name={name}
          email={email}
          id={formId}
          autoInit={true}
          src={bitrixWebChatUrl}
        />
      </Container>
    );
  }
}

if you really don't like the default layout that Bitrix provide us, so you can add your custom markup for your Bitrix Button Chat, so the way that you should go is like so:

import React from 'react';
import BitrixWebChat from '@comparaonline/ui-offer-web-chat-bitrix';
import Button from '@material-ui/core/Button';
import { bitrixWebChatUrl } from 'config';

class App extends React.Component {
  render() {
    return (
      <Container>
        <BitriWebxChat
          name={name}
          email={email}
          id={formId}
          autoInit={true}
          src={bitrixWebChatUrl}
        >
          ({onClick}) => (
          <Button onClick={onClick} color={'primary'}>
            Chat with us
          </Button>
          );
        </BitriWebxChat>
      </Container>
    );
  }
}

in that way we can provide our custom button to open our chat view.

Quick Start

If you don't want to apply all this setup, so you can start really quick, so this package is also exported a factory function that will create a connected bitrix chat with your redux store, so you can start like this:

import { makeBitrixContainer } from '@comparaonline/ui-offer-web-chat-bitrix';

const mapStateToProps = (state: any) => {
  const { form } = state.quoteForm;
  return {
    name: form ? form.firstName : '',
    email: form ? form.email : '',
    id: form ? form.id : ''
  };
};

const WebChatBitrixContainer = makeBitrixContainer({
  mapStateToProps,
  src: 'THE WIDGET SCRIPT URL'
});

export export WebChatBitrixContainer;

as you can see you are importing a factory function that will create a connected bitrix chat component, that will setup all the config for your and will react to any changes into your redux store, so any time that name, email or id (mostly refer to formId) attributes change the component will restart and send the updated data to bitrix.

Props

This package provide the following props to be used by our component

| Prop Name | Description | Default Value | Expected Type Value | Required | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------ | -------- | | src | The source url to load the widget for Bitrix | void | string | true | | autoInit | if the chat should initialize automatically | true | boolean | false | | location | Location where our buttons are shown, will take effect only for loading multiple widgets | 'bottom' | string (top, bottom) | false | | pulse | will or not show the pulse animation effect | true | boolean | false | | disableOnMobile | if true, will hide the button on mobile screens, (if provide custom markup this won't take any effect) | false | boolean | false | | id | a unique id to be sent to bitrix when initialize the widget | '' | string | false | | name | the name for the customer | '' | string | false | | email | the email for the customer to be contacted by bitrix consultans | '' | string | false | | buttonBgColor | this will change the default color for the button that bitrix provide (this will take effect only when there are mutiple widgets loaded) | undefined | string | false | | buttonIconColor | this will change the default color for the icon button that bitrix provide (this will take effect only when there are mutiple widgets loaded) | undefined | string | false | | delayBeforeStart | the number of second that will take before start the widgets (value should be placed in seconds) | 4 | number | false | | initialMessage | this will replace the default initial message when widgets gets init, usually this property won't be used | undefined | HelloMessage | false | | serverURL | this prop is used to set the url server address where chat will be connected, normally this prop won't be used | the server address where widget script is created | string | false | | onInstall | this prop works as a hook when widget gets install | undefined | function(bitrixContent) | false | | onInit | this prop works as a hook when widget is starting to be setting up, here could be used to overrides the default config if required, usually should be used the component props instead | undefined | function(bitrixContent, props) | false | | onLoaded | this prop works as a hook when widget is loaded. | undefined | function(bitrixContent) | false | | onShow | this prop works as a hook when button opener chat is being shown | undefined | function(bitrixContent) | false | | onHide | this prop works as a hook when form is shown and button opener is hide | undefined | function(bitrixContent) | false | | children | this children work as a render prop pattern | undefined | function({ onClick }) | false | | classes | classnames to be added for the default bitrix layout | undefined | WebChatBitrixClasses | false |

Types

The following types are the required when you try to change the default styles with your own styles rules

export interface WebChatBitrixClasses {
  container?: string;
  shadow?: string;
  buttonContainer?: string;
  helloContainer?: string;
  helloIconContainer?: string;
  helloNameContainer?: string;
  helloMessageContainer?: string;
  helloCloseButtonContainer?: string;
}

So if you need to modify the default styles for the default layout, so you can do it as a @material-ui style, so

import { withStyles, Theme } from '@material-ui/core';

const styles = (theme: Theme) => {
  return {
    container: {
      [theme.breakpoints.down('sm')]: {
        left: 16,
        bottom: '16px !important',
        right: 'inherit !important'
      }
    }
  };
};

const WebChatbitrixWithStyles = withStyles(styles)(WebChatBitrixContainer);

so as you can see it's so easy to change the styles for the bitrix chat layout

Notes

This package is still under development process, because I believe that some things could done better and indetify some others props that by the time of this reading is not discovered yet.

Layout

Web Chat Bitrix has a layout to render the markup for the front-end, a quick explanation of this could be:

data [data-b24-crm-button-cont]

This data attribute is for the main container

data [data-b24-crm-button-shadow]

This data attribute is for shadow container effect

data [data-b24-crm-button-block]

This data attribute is for template button to be cloned

data [data-b24-crm-button-block-button]

This data attribute is for container for button to open chat view

data [data-b24-crm-hello-cont]

This data attribute is for container to show the hello wrapper

One valid HTML markup for this layout structure will be:

<div data-b24-crm-button-shadow="" class="b24-widget-button-shadow"></div>
<div style="display: none;">
  <a data-b24-crm-button-widget-blank="" data-b24-crm-button-widget="" class="b24-widget-button-social-item" title="">
    <span data-b24-crm-button-tooltip="" class="b24-widget-button-social-tooltip"></span>
  </a>
</div>

<div dir="ltr" data-b24-crm-button-cont="" class="b24-widget-button-wrapper b24-widget-button-position-bottom-right b24-widget-button-visible">
  <div data-b24-crm-hello-cont="" class="b24-widget-button-popup" style="border-color: #00AEEF;">
    <span data-b24-hello-btn-hide="" class="b24-widget-button-popup-btn-hide"></span>
    <div class="b24-widget-button-popup-inner">
      <div class="b24-widget-button-popup-image">
        <span data-b24-hello-icon="" class="b24-widget-button-popup-image-item"></span>
      </div>
      <div class="b24-widget-button-popup-content">
        <div data-b24-hello-name="" class="b24-widget-button-popup-name"></div>
        <div data-b24-hello-text="" class="b24-widget-button-popup-description"></div>
      </div>
    </div>
    <div class="b24-widget-button-popup-triangle" style="border-color: #00AEEF;"></div>
  </div>

  <div data-b24-crm-button-block="" class="b24-widget-button-social">

  <a data-b24-crm-button-widget-blank="" data-b24-crm-button-widget="openline_livechat" class="b24-widget-button-social-item b24-widget-button-openline_livechat" title="" data-b24-widget-sort="100" style="background-color: rgb(0, 174, 239); background-image: url(&quot;data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2231%22%20height%3D%2228%22%20viewBox%3D%220%200%2031%2028%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M23.29%2013.25V2.84c0-1.378-1.386-2.84-2.795-2.84h-17.7C1.385%200%200%201.462%200%202.84v10.41c0%201.674%201.385%203.136%202.795%202.84H5.59v5.68h.93c.04%200%20.29-1.05.933-.947l3.726-4.732h9.315c1.41.296%202.795-1.166%202.795-2.84zm2.795-3.785v4.733c.348%202.407-1.756%204.558-4.658%204.732h-8.385l-1.863%201.893c.22%201.123%201.342%202.127%202.794%201.893h7.453l2.795%203.786c.623-.102.93.947.93.947h.933v-4.734h1.863c1.57.234%202.795-1.02%202.795-2.84v-7.57c0-1.588-1.225-2.84-2.795-2.84h-1.863z%22/%3E%3C/svg%3E&quot;);">
    <span data-b24-crm-button-tooltip="" class="b24-widget-button-social-tooltip">Chat en vivo</span>
  </a></div>
  <div data-b24-crm-button-block-button="" class="b24-widget-button-inner-container">
    <div data-b24-crm-button-block-border="" class="b24-widget-button-inner-mask" style="background: #00AEEF;"></div>
    <div class="b24-widget-button-block">
      <div data-b24-crm-button-pulse="" class="b24-widget-button-pulse b24-widget-button-pulse-animate" style="border-color: #00AEEF;"></div>
      <div data-b24-crm-button-block-inner="" class="b24-widget-button-inner-block" style="background: #00AEEF;">
        <div class="b24-widget-button-icon-container">
                                                <div data-b24-crm-button-icon="openline" class="b24-widget-button-inner-item b24-widget-button-icon-animation" style="">
              <svg class="b24-crm-button-icon b24-crm-button-icon-active" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 29">
                <path class="b24-crm-button-chat-icon" fill="#FFFFFF" fill-rule="evenodd" d="M878.289968,975.251189 L878.289968,964.83954 C878.289968,963.46238 876.904379,962 875.495172,962 L857.794796,962 C856.385491,962 855,963.46238 855,964.83954 L855,975.251189 C855,976.924031 856.385491,978.386204 857.794796,978.090729 L860.589592,978.090729 L860.589592,981.876783 L860.589592,983.76981 L861.521191,983.76981 C861.560963,983.76981 861.809636,982.719151 862.45279,982.823297 L866.179185,978.090729 L875.495172,978.090729 C876.904379,978.386204 878.289968,976.924031 878.289968,975.251189 Z M881.084764,971.465135 L881.084764,976.197702 C881.43316,978.604561 879.329051,980.755508 876.426771,980.93027 L868.042382,980.93027 L866.179185,982.823297 C866.400357,983.946455 867.522357,984.94992 868.973981,984.716324 L876.426771,984.716324 L879.221567,988.502377 C879.844559,988.400361 880.153166,989.448891 880.153166,989.448891 L881.084764,989.448891 L881.084764,987.555864 L881.084764,984.716324 L882.947962,984.716324 C884.517696,984.949819 885.742758,983.697082 885.742758,981.876783 L885.742758,974.304675 C885.742659,972.717669 884.517597,971.465135 882.947962,971.465135 L881.084764,971.465135 Z" transform="translate(-855 -962)"></path>
              </svg>
            </div>
                    </div>
        <div class="b24-widget-button-inner-item b24-widget-button-close">
          <svg class="b24-widget-button-icon b24-widget-button-close-item" xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"><path fill="#FFF" fill-rule="evenodd" d="M18.866 14.45l9.58-9.582L24.03.448l-9.587 9.58L4.873.447.455 4.866l9.575 9.587-9.583 9.57 4.418 4.42 9.58-9.577 9.58 9.58 4.42-4.42"></path></svg>
        </div>
      </div>
    </div>
  </div>
</div>

Quick react example component for Layout of widget

const Layout = () => {
  return (
    <div data-b24-crm-button-cont>
      <div data-b24-crm-button-shadow />
      <div data-b24-crm-button-block />
      <div data-b24-crm-button-block-button />
      <div data-b24-crm-hello-cont />
    </div>
  );
};

for set a new layout consider adding into the config object when start to init

// soon we can add our custom layout
// nextConfig.layout = renderToString(<Layout />);
return nextConfig;