react-olark [BETA]

A React component for generating an Olark chatbox on your web page.

How it works

1. Sign up for Olark at olark.com. After signing up, you'll have access to your unique site ID.
2. Import Olark from react-olark and pass it your site id.
3. That's it!

import Olark from 'react-olark';

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 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:

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

Styling

React-olark 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.

Contributing

• Before running the dev server, create a new file at the top level of this directory called env.js. This is where you will store your Olark site ID, which will be ignored by git. Add the following to that file: module.exports = { siteId: YOUR_SITE_ID }
• To start up the dev server, run gulp serve in a bash console.
• An extremely bare bones dev app exists in dev/client/app/index.js and dev/client/index.html. The app.js file is just the compiled ES6 output generated by the serve command.
• The react-olark source is located in src/index.js.