react-olark-plugin/README.md

React component to render an Olark chatbox on your page

# react-olark-plugin

React component to render an Olark chatbox on your page. This is based on the work completed by [jgnewman](https://github.com/jgnewman/react-olark). This component adds additional functionality that allows configuration for if the box is inline or not. This is set in the env.js file.

## How it works

1. Sign up for Olark at [olark.com](https://olark.com). After signing up, you'll have access to your unique site ID.
2. Import `Olark` from react-olark-plugin and pass it your site id.
3. That's it!

```jsx
import Olark from 'react-olark-plugin';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Olark siteId={YOUR_SITE_ID} />
, document.getElementById('root'));
```

**Note that you _should not_ use the Olark JavaScript snippet on your page if you are using react-olark because it will be automatically generated for you.**

## Options

Olark allows you to to [configure your chatbox](https://www.olark.com/api) in lots of cool ways. These mainly come in the form of "system" configurations and "locale" configurations. System values change how the chatbox does things and locale values allow you to customize text strings for use with different languages.

You can pass these configuration options to the `Olark` component as props:

```jsx
<Olark
  siteId={YOUR_SITE_ID}
  systemConfig={{ hb_dark_theme: true, ... }}
  localeConfig={{ chatting_title: 'Chat ki a tatou!', ... }}
/>
```

## Styling

React-olark-plugin will generate a div with the id `olark-box-container`. Once the chatbox has successfully loaded, that div will be given an extra class called `olark-loaded`. You can use these labels to do simple things like specify position and size. However, further customizations should mostly be handled through the Olark dashboard.