@comparaonline/ui-offer-web-chat-bitrix v4.8.5

@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

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;