Nature's Particle Manager

    simple-screenshot-feedback

    1.0.9 • Public • Published

    simple-screenshot-feedback

    Full demo

    A simple plug and play feedback component for your website. Enable users to take screenshots of specific parts of your application and send feedback to a slack channel.

    Documentation

    Installation

    yarn install simple-screenshot-feedback
    

    or

    npm install --save simple-screenshot-feedback
    

    Usage

    import Feedback from "simple-screenshot-feedback"
    
    export default function SomePage() {
      return (
        <>
          ...
          <Feedback slackToken={...} slackChannel={...} handleSubmitError={...} />
        </>
      )
    }
    

    Getting your Slack token

    1. Log in to your Slack workspace at api.slack.com/apps
    2. Click Create New App
    3. Navigate to the OAuth & Permissions page by clicking on the left menu
    4. Scroll down to Bot Token Scopes and add at minimum:
      • chat:write - allows the bot to write in private channels it is added to
      • chat:write.public - allows the bot to write in public channels
    5. Go back to the top of the page and click Install App to Workplace, click Allow
    6. You'll then be returned to the OAuth & Permissions page where you'll now see a Bot User OAuth Access Token

    This is the token that you need to pass in to this component (slackToken) to start sending feedback to Slack.

    Choosing a Slack channel

    With the permissions you gave your new Slack app in Getting your Slack token you can now send feedback to any public channel by passing the channel name (e.g. #feedback) into the component (slackChannel).

    If you want to post to a private channel you first need to invite the new Slack app to it by typing /invite @[APP NAME].

    Options

    Prop optional default type
    slackToken false string
    slackChannel false string
    handleSubmitError false (err: Error) => void
    location true "bottom-right" "top-left" | "top-middle" | "top-right" |
    "bottom-left" | "bottom-middle" | "bottom-right"

    SSR

    This component uses the html2canvas library which depends on the window object being available. If you're using server-side rendering you'll want to make sure this component is only imported on client render using dynamic imports.

    Here's an example with next/dynamic:

    import dynamic from "next/dynamic";
    import React from "react";
    
    const FeedbackImport = dynamic(() => import("simple-screenshot-feedback"), { ssr: false });
    
    export default function Feedback({ slackToken, slackChannel, handleSubmitError }) {
      return (
        <FeedbackImport
          slackToken={slackToken}
          slackChannel={slackChannel}
          handleSubmitError={handleSubmitError}
        />
      );
    }
    

    Install

    npm i simple-screenshot-feedback

    DownloadsWeekly Downloads

    54

    Version

    1.0.9

    License

    ISC

    Unpacked Size

    408 kB

    Total Files

    5

    Last publish

    Collaborators

    • cathychen