This repository has been archived by the owner. It is now read-only.
A simple, embeddable form that helps you quickly gather user feedback from your own website or web app. When people fill out the form, their entries are saved as notes in Dovetail.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.storybook
img
src
.editorconfig
.gitignore
.npmignore
.prettierrc
LICENSE
README.md
package-lock.json
package.json
tsconfig.json
tsconfig.lib.commonjs.json
tsconfig.lib.es2015.json
tsconfig.lib.json
tsconfig.lib.umd.json
tslint.json

README.md

collector-react

The feedback collector is a simple form that helps you quickly gather user feedback from your own website or web app. When people fill out the form, their entries are saved as notes in Dovetail. You’ll need a project on Dovetail, along with its collector ID (found in collector settings).

Screenshot of collector-react

Installation

npm i @heydovetail/collector-react

Example implementation

import { Collector } from "@heydovetail/collector-react"
import * as React from "react";

interface State {
  feedback: boolean;
}

class Example extends React.Component<{}, State> {
  public state: State = { feedback: false };

  public render() {
    return (
      <div>
        <button onClick={() => { this.setState({ feedback: true }); }}>Send feedback</button>

        {this.state.feedback ? (
          <Collector
            collectorId="yourCollectorId"
            defaultEntries={{ email: "foo@example.com" }}
            onDismiss={(sent: boolean) => {
              sent ? console.log("Feedback sent!") : this.setState({ feedback: false });
            }}
            metadata={{ browser: navigator.userAgent }}
          />
        ) : null}
      </div>
    );
  }
}

Props

export interface Props {
  // Collector ID from Dovetail.
  // Find this in your project’s collector settings.
  collectorId: string;

  // Optional key:value pairs for setting default data.
  // e.g. prefill user’s name and email if they’re logged in.
  defaultEntries?: { [key: string]: string };

  // Optional domain for where to fetch the dialog.
  // Defaults to dovetailapp.com.
  domain?: string;

  // Optional key:value pairs for passing extra information.
  // e.g. store browser version, local time, etc.
  metadata?: { [key: string]: string };

  // Called when the user clicks the ‘X’ icon to close the dialog
  // or the ‘Done’ button after successfully sending the form.
  //
  // Returns true or false depending on whether feedback was sucessfully sent
  // or false if the user just closed the dialog without sending feedback.
  onDismiss: (sent: boolean) => void;
}

Configuration

Configure the look & feel in your Dovetail project. You can customize the color, text, where entries are saved, and more. Read the customization documentation for more information.

Build status

CircleCI