# @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. Latest version **4.8.5** (published 2019-05-16) · MIT license · 0 weekly downloads ## Install ```sh npm install @comparaonline/ui-offer-web-chat-bitrix pnpm add @comparaonline/ui-offer-web-chat-bitrix yarn add @comparaonline/ui-offer-web-chat-bitrix bun add @comparaonline/ui-offer-web-chat-bitrix ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.8.5 | | Published | 2019-05-16 | | First published | 2018-10-02 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 37.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | ComparaOnline.com | | Maintainers | comparaonline-dev, comparaonlineprivate, emartini, fmartinez, gnza, javierlara1989, jflobos, jokude, juorderg, lisandrop, matotias, mnegrete, suarezcumare, warseph | ## Links - npm: https://www.npmjs.com/package/@comparaonline/ui-offer-web-chat-bitrix - npm.io page: https://npm.io/package/@comparaonline/ui-offer-web-chat-bitrix ## Recent versions - 4.8.5 (latest) — 2019-05-16 - 3.4.4 (staging) — 2018-12-13 - 4.8.4 — 2019-05-15 - 4.8.2 — 2019-05-15 - 3.4.6 — 2019-01-03 - 3.4.5 — 2018-12-13 - 3.4.3 — 2018-12-13 - 3.4.1 — 2018-12-13 - 3.4.0 — 2018-12-13 - 2.2.1 — 2018-12-05 - 2.1.8 — 2018-11-29 - 2.1.8-staging — 2018-11-29 - 2.1.5 — 2018-11-28 - 2.1.0 — 2018-11-28 - 2.0.10-0 — 2018-11-27 - … 16 more at https://npm.io/package/@comparaonline/ui-offer-web-chat-bitrix/versions ## README # @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. ```typescript import React from 'react'; import BitrixWebChat from '@comparaonline/ui-offer-web-chat-bitrix'; import { bitrixWebChatUrl } from 'config'; class App extends React.Component { render() { return ( ); } } ``` 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: ```typescript 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 ( ({onClick}) => ( ); ); } } ``` 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: ```javascript 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 ```typescript 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 ```javascript 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: ```html
Chat en vivo
``` Quick react example component for Layout of widget ```javascript const Layout = () => { return (
); }; ``` for set a new layout consider adding into the config object when start to init ```javascript // soon we can add our custom layout // nextConfig.layout = renderToString(); return nextConfig; ``` --- _Source: https://npm.io/package/@comparaonline/ui-offer-web-chat-bitrix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._