npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

safesupport-chatbox

v1.1.5

Published

A secure and private embeddable chatbox that connects to Riot

Downloads

16

Readme

Embeddable Matrix Chatbox

Demo video of chatbox

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

Built on:

Usage

<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: | Name | Description | Default | ----------- | ----------- | --------- | | matrixServerUrl (required) | URL for the Matrix homeserver you want to connect to | https://matrix-client.matrix.org | | botId (required) | User ID for the bot account that handles invites | null | | introMessage (optional) | First message the user sees before agreeing to the Terms of Use | This chat application does not collect any of your personal data or any data from your use of this service. | | termsUrl (optional) | URL for the Terms of Use for the chat service | https://tosdr.org/ | | roomName (optional) | Name of the chatroom generated in Riot | 'Support Chat' | | agreementMessage (optional) | Text to show to request agreement to the Terms of Use | Do you want to continue? | | confirmationMessage (optional) | Text to show to ask for agreement to continue | Waiting for a facilitator to join the chat... | | exitMessage (optional) | Text to show if the user rejects the Terms of Use. | The chat is closed. You may close this window. | | anonymousDisplayName (optional) | The display name for the chat user. | Anonymous | | chatUnavailableMessage (optional) | Text to show if no-one is available to respond | The chat service is not available right now. Please try again later. |

Feature list

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

Bot account

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.

Bookmarklet

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.

Local development

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.

Production build

yarn build