Live demo: https://nomadic-labs.github.io/safesupport-chatbox/

Built on:

• Embeddable React Widget
• Matrix JS SDK

<script src="https://unpkg.com/safesupport-chatbox" type="text/javascript"></script>
<script>
  var config = {
    matrixServerUrl: 'https://matrix-client.matrix.org',
    botId: '@your-help-bot:matrix.org',
    roomName: 'Support Chat',
    termsUrl: 'https://tosdr.org/',
    introMessage: 'This chat application does not collect any of your personal data or any data from your use of this service.',
    agreementMessage: 'Do you want to continue?',
    confirmationMessage: 'Waiting for a facilitator to join the chat...',
    exitMessage: 'The chat is closed. You may close this window.',
    chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
    anonymousDisplayName: 'Anonymous',
  }

  EmbeddableChatbox.mount(config);
</script>

Options:

• Can be embedded on any website with Javascript enabled
• WCAG AA compliant
• Light and dark theme
• Support seekers are anonymous
• Uses Matrix's end to end encryption
• If encryption fails, falls back to unencrypted chat
• Status notifications are customizeable
• Only initiates chat after user agrees to Terms of Service
• Upon exiting chat, user data is wiped - account deleted, local datastore cleared
• If enabled, the bot account can provide transcript of the conversation
• Automatically parses incoming text messages for URLs and adds the tags
• Easy to customize colour scheme
• Bookmarklet allows users to open the chat on any website

This chatbox is meant to be used with a bot account that handles a number of functions:

• Sends out invitations to facilitators to join the support chat
• Revokes unused invitations when the first facilitator join the chat
• Keeps a transcript of the conversation
• Notifies user if there are not facilitators available

The bot account is invited to the chatroom when a support request is initiated.

You can find the code for the bot at safesupport-bot.

The bookmarklet is a special link that runs a script on any website. The user saves the link by dragging it to their bookmarks bar. Then they can click on the bookmark on any page to run the script and load the chatbox.

You can try this out on the live demo.

Clone the project:

git clone https://github.com/nomadic-labs/safesupport-chatbox.git

Install the dependencies:

cd safesupport-chatbox
yarn

Start the development server:

yarn start

Open the demo page at http://localhost:9000/

Don't forget to also set up the bot account, otherwise you'll never get the chat invitations on Riot. Follow the instructions at safesupport-bot.

yarn build