Support for logged-out users

Logged-out users, anonymous users, visitors...or whatever you call it — after you complete this section they will be able to chat to you from your website!

A key decision that needs to be made: do you use a script tag or the npm package to integrate? Let us help you decide:

Do you use React and want to customise the location, look and interactions of the chat? If the answer is yes, then the npm package is built just for this.
Otherwise, if you are fine with a classic "chat bubble" in the lower right hand corner of your website, then use the script tag.

Script tag

To integrate the chat script tag, click on your workspace name and go to Settings -> Chat. If you have not created an app key yet, you'll be prompted to do it now. For help on how to do so take a look at the previous getting an app key page.

Copy the full code fragment on that page and paste it in the page(s) you want the chat UI to show up.

Script tag

If you need an example, this is a very minimal web page with Plain chat integrated. To use this, replace the text REPLACE_ME with the key you obtained in the previous getting an app key section.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Your website</title>
</head>
<body>
<h1>Website</h1>
<script>
    window.$plain = window.$plain || [];
    typeof plain === 'undefined' && (plain = function () { $plain.push(arguments); });
    plain("init", {appKey: "REPLACE_ME"});
</script>
<script async src="https://customer-chat.cdn-plain.com/latest/customerChat.js"></script>
</body>
</html>

tip

The script tag has some customisation options. Check them out in the theming section.

Finally, go back to your workspace Settings -> Chat and click "Enable chat".

If you don't need to support logged-in users, this is all you need to do! Your users will now be able to chat to you, and they will show up in your workspace in the Support App 🎉

If your website has logged-in users, you can add support for logged-in users in the next section.

npm package

Let's start by installing the npm package. In your app directory, run:

npm install @team-plain/react-chat-ui

This package exports:

A Chat component which renders the Plain chat.
A custom usePlain hook which exposes a function to log out and the number of unread messages for the customer.
The PlainProvider which provides context for the Chat component and the usePlain hook.

To use the chat UI on your website, you need to wrap your app with PlainProvider and use the Chat component wherever you want to show the chat UI.

Unlike the script tag — which automatically adds a 'chat bubble' to your website — the Chat component will fill its parent. This means you have full flexibility in terms of where and how you want to show the chat.

A basic example would look like this:

import React from 'react';

import { PlainProvider, Chat } from '@team-plain/react-chat-ui';

function App() {
    return (
        <PlainProvider appKey="APP_KEY">
            <h1>My App</h1>
            <Chat/>
        </PlainProvider>
    );
}

ReactDOM.render(<App/>);

Replace APP_KEY with your app key that you created earlier, which should look something like appKey_uk_01GG7XEXD24GQ20GWV7SYBS83X.

Finally, go to your workspace Settings -> Chat and click on "Enable chat".

If you load your app now, you'll be able to chat using the Chat component and see customer messages show up under "Waiting for Help" in your workspace in the Support App 🎉

To support logged-in users on your website, continue to the support for logged-in users page.

tip

The React Chat UI can be customised with a custom theme. Check out how in the theming section.

If you have any problems, please get in touch with us by email on help@plain.com, and we will be happy to help.

Support for logged-out users

Script tag​

npm package​

Script tag

npm package