Chat is currently in Beta. This will not effect the reliability of this feature but we are heavily iterating and improving on the featureset.

Our Chat widget lets you embed a live chat interface on your website or app, allowing your customers to reach out to you without leaving your site. You can then respond to these messages directly from Plain.

You and the customer can communicate in real-time and provide high fidelity support including syntax highlighting and rich-text formatting.

Here’s how to get started:

1

Create your Chat app

At the moment you can only create a single Chat app configuration per workspace. In future we will allow multiple configurations. - In Plain, navigate to Settings > Chat. - Press Create Chat App.

2

Add Chat to your webpage(s)

After creating your Chat app, you will be provided with a snippet of code that you can embed in your website or app. This will add the chat widget to your site. We recommend adding this to all pages of your site.

3

Customize your Chat experience

You can customize some aspects of the Chat widget by providing additional information to the Plain.init function. These are the available options:

Plain.init({
  appId: '<YOUR_CHAT_APP_ID>',

  // Optional. Hides the launcher, you can manually show it by calling `Plain.open()` (default: false)
  hideLauncher: false,

  // Optional. The title of the chat window shown on the Welcome screen
  title: 'Chat with us',

  // Optional. A collection of links shown on the Welcome screen
  links: [
    {
      icon: 'book', // Optional, we also support 'discord' and 'slack' as icons
      text: 'View our docs',
      url: 'https://www.plain.com/docs',
    },
  ],

  // Optional. The entry point of the Chat, is either 'default' or 'chat'
  // 'chat' will open the last conversation the user had (default: 'default')
  entryPoint: 'default',

  // Optional. The color scheme of the Chat, is either 'auto', 'light', or 'dark'
  // 'auto' uses the user's browser preference to decide between light and dark mode (default: 'auto')
  theme: 'light',

  // Optional. Various styling options
  // Colors can also be passed in this format { light: '#FFFFFF', dark: '#000000' }. Based on the theme chosen by you or browser preference
  style: {
    chatButtonColor: '#000000'; // These can also be passed in this foramt { light: '#FFFFFF', dark: '#000000' }
    chatButtonIconColor: '#FFFFFF';
  }
});
4

Add conditional auto-responses

You can add conditional auto-responses to chat by heading to the “auto-responses” section of your workplace settings. Set conditions based on tier or business hours, and let your customers know when they’ll receive a response.

5

Viewing Chats in Plain

Each new conversation in the Chat widget creates a new thread in Plain. You can view and respond to these threads in the Plain app.

Content Security Policy (CSP)

If you are using a Content Security Policy on your website, you will need to add the following to your CSP:

script-src https://chat.cdn-plain.com;
connect-src https://chat.uk.plain.com;
style-src https://fonts.googleapis.com;