🚩 This package is intended for developers. If you just want to add Chatra to your website, check our Installation guides for popular e-commerce platforms and content management systems or just add a small code snippet to your website.

Official Chatra module

This module loads the Chatra widget and passes method calls to the Javascript API.

Key Features:

• Easy integration with your website or web app
• Works perfectly with React, Angular, Vue, and other frameworks
• Uses ES5 for maximum compatibility, doesn’t require transpiling.

Installation

To add the chat widget to your website or web app, sign up with Chatra.

If you already have an account, install the package using your favorite package manager:

$ npm install @chatra/chatra

$ yarn add @chatra/chatra

Configuration

Step 1. Go to the Preferences section of your Chatra dashboard and copy the Public key.

Step 2. Initialize the widget in your index.js or root controller

index.js

let Chatra = require('chatra')

let config = {
    ID: 'Paste your Public key here'
}

Chatra('init', config)

🚩 You can customize the chat and button appearance, localization, and lots of other settings by passing setup to the initialization config. Please check the Javascript API documentation for details.

index.js

let config = {
    setup: {
        buttonSize: 75
    },
    ID: 'Paste your ChatraID here'
}

Moreover, you can pass arbitrary visitor info using the integration key:

index.js

let config = {
    integration: {
        name: 'Cowardly Lion',
        email: 'cowardly_lion@gmail.com',

        /* any number of custom properties */
        'What does he do': 'Goes to Oz with his friends'
    },
    ID: 'Paste your ChatraID here'
}

Step 3 (optional). Call PageView to enable Targeted chats & triggers.

If your website or web app loads pages dynamically and updates the document’s URL without requiring a full page load, call the following method whenever the page changes to track these views and see them in the Chatra dashboard:

Chatra('pageView')

We recommend calling this method in your router or page controllers.

Advanced Usage

Updating the settings

You can update the settings after initialization by calling Chatra('init', config) again, which will restart Chatra with the new settings applied.

Methods

Methods are used to dynamically change the behavior of the chat widget. Methods can be called anywhere after the widget initialization, for example:

Chatra('expandWidget')

All method calls made before Chatra finished loading are put into a queue and executed when Chatra is ready.

Contact us

If you have any questions, feel free to contact us.