Setting up chat

Quick Setup Video

Using in HTML

Paste the code below between your <head> and </head> tags:

<script>
  window.Makassan = {
    config: {
      // Pass in your Makassan account token here after signing up
      accountId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',
      title: 'Welcome to Makassan!',
      subtitle: 'Ask us anything in the chat window below 😊',
      newMessagePlaceholder: 'Start typing...',
      primaryColor: '#13c2c2',
      // Optionally pass in a default greeting
      greeting: 'Hi there! How can I help you?',
      // Optionally pass in metadata to identify the customer
      customer: {
        name: 'Test User',
        email: 'test@test.com',
        external_id: '123',
        metadata: {version: 1, plan: 'premium'}, // Custom fields go here
      },
      // Optionally specify the base URL
      baseUrl: 'https://app.makassan.com',
      // Add this if you want to require the customer to enter
      // their email before being able to send you a message
      requireEmailUpfront: true,
      // Add this if you want to indicate when you/your agents
      // are online or offline to your customers
      showAgentAvailability: true,
    },
  };
</script>
<script
  type="text/javascript"
  async
  defer
  src="https://app.makassan.io/widget.js"
></script>

Using in React

Install the @papercups-io/chat-widget node module:

npm install --save @papercups-io/chat-widget

Place the code below in any pages on which you would like to render the widget. If you'd like to render it in all pages by default, place it in the root component of your app.

import React from 'react';

import {ChatWidget} from '@papercups-io/chat-widget';

// You can also import the following in v1.1.0 and above:
// import {ChatWidget, ChatWindow, Makassan} from '@papercups-io/chat-widget';
//
// The `ChatWindow` component allows you to embed the chat however you want,
// and the `papercups` object provides access to functions that can programmatically
// open/close the chat widget, e.g.:
//
// `papercups.open()` // => opens the chat widget
// `papercups.close()` // => closes the chat widget
// `papercups.toggle()` // => toggles (opens or closes) the chat widget

const ExamplePage = () => {
  return (
    <>
      {/*
        Put <ChatWidget /> at the bottom of whatever pages you would
        like to render the widget on, or in your root/router component
        if you would like it to render on every page
      */}
      <ChatWidget
        // Pass in your Makassan account token here after signing up
        accountId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
        title="Welcome to Makassan!"
        subtitle="Ask us anything in the chat window below 😊"
        newMessagePlaceholder="Start typing..."
        primaryColor="#13c2c2"
        // Optionally pass in a default greeting
        greeting="Hi there! How can I help you?"
        // Optionally pass in metadata to identify the customer
        customer={{
          name: 'Test User',
          email: 'test@test.com',
          external_id: '123',
          metadata: {version: 1, plan: 'premium'}, // Custom fields go here
        }}
        // Optionally specify the base URL
        baseUrl="https://app.Makassan.io"
        // Add this if you want to require the customer to enter
        // their email before being able to send you a message
        requireEmailUpfront
        // Add this if you want to indicate when you/your agents
        // are online or offline to your customers
        showAgentAvailability
      />
    </>
  );
};

Options

These are the props you can pass into your <ChatWidget /> React component, or the fields you can specify in your Makassan.config:

Prop	Type	Value	Default
`accountId`	`string`	Your Makassan account token	N/A
`title`	`string`	The title in the header of your chat widget	Welcome!
`subtitle`	`string`	The subtitle in the header of your chat widget	How can we help you?
`newMessagePlaceholder`	`string`	The placeholder text in the new message input	Start typing...
`emailInputPlaceholder`	`string`	The placeholder text in the optional email input	Enter your email
`newMessagesNotificationText`	`string`	The notification text when new messages arrive and the chat window is closed	View new messages
`primaryColor`	`string`	The theme color of your chat widget	`1890ff`
`greeting`	`string`	An optional initial message to greet your customers with	N/A
`showAgentAvailability`	`boolean`	If you want to show whether you (or your agents) are online or not	`false`
`agentAvailableText`	`string`	The text shown when you (or your agents) are online	We're online right now!
`agentUnavailableText`	`string`	The text shown when you (and your agents) are offline	We're away at the moment.
`customer`	`object`	Identifying information for the customer, including `name`, `email`, `external_id`, and `metadata` (for any custom fields)	N/A
`baseUrl`	`string`	The base URL of your API if you're self-hosting Makassan	https://app.Makassan.io
`iframeUrlOverride`	`string`	An override of the iframe URL we use to render the chat, if you chose to self-host that as well	https://chat-widget.Makassan.io
`requireEmailUpfront`	`boolean`	If you want to require unidentified customers to provide their email before they can message you	`false`
`defaultIsOpen`	`boolean`	If you want the chat widget to open as soon as it loads	`false`
`customIconUrl`	`string`	A link to a custom icon image URL	N/A
`onChatLoaded`	`() => void`	Callback fired when chat is loaded	N/A
`onChatOpened`	`() => void`	Callback fired when chat is opened	N/A
`onChatClosed`	`() => void`	Callback fired when chat is closed	N/A
`onMessageSent`	`(message: Message) => void`	Callback fired when message is sent	N/A
`onMessageReceived`	`(message: Message) => void`	Callback fired when message is received	N/A

Questions?

If you're having any trouble getting started or just want to say hi, just email hello@makassan.com 👋

Quick Setup Video​

Using in HTML​

Using in React​

Options​

Questions?​

Quick Setup Video

Using in HTML

Using in React

Options

Questions?