Skip to main content

Javascript Usage

This document provides a comprehensive guide on how to use the <drop-feedback /> custom element to embed the feedback widget on any website.

Prerequisites​

  • Sign up for a free account.
  • Create a project for your website.
  • Copy the project ID from the project settings page.
  • Add the script tag to the HTML:
<script src="https://unpkg.com/@dropfeedback/core" type="module" defer></script>

Usage​

  1. Initialize the widget by adding the <drop-feedback /> custom element to your HTML.

    <drop-feedback project-id="your_project_id" />

  2. Add the trigger element to open the widget.

    <button data-feedback-button>Feedback</button>

<drop-feedback />​

It initializes the widget and renders it when the trigger is clicked.

You can add the <drop-feedback /> element anywhere in your <body />. We recommend adding it to the root of your HTML.

<drop-feedback
  project-id="your_project_id"
  report-identifier="..."
  theme-scheme="dark"
/>

project-id​

It determines which project the feedback is sent to. Find it in your project settings on the dashboard.

Within the <drop-feedback /> component:

<drop-feedback project-id="your_project_id" />

Via a trigger element:

<button data-feedback-button data-project-id="your_project_id">
  Feedback
</button>

The project-id is required to send feedback. You must provide it either via the <drop-feedback /> component or via the trigger element.

report-identifier​

It is used to identify the user who sent the feedback. It can be an email address, a username, or any other identifier that you use to identify your users.

Within the <drop-feedback /> component:

<drop-feedback report-identifier="[email protected]" />

Via a trigger element:

<button data-feedback-button data-report-identifier="[email protected]">
  Feedback>
</button>

If you don't provide the reportIdentifier, the feedback will be sent anonymously.

theme​

It is used to customize the theme of the widget.

Within the <drop-feedback /> component:

<drop-feedback
  theme-scheme="light"
  theme-primary-color="#ff0000"
  theme-text-color="#000000"
  theme-background-color="#ffffff"
/>

Via a trigger element:

<button
  data-feedback-button
  data-theme-scheme="light"
  data-theme-primary-color="#ff0000"
  data-theme-text-color="#000000"
  data-theme-background-color="#ffffff"
>
  Feedback
</button>

meta-*​

It is used to send additional information about the feedback. You can use it to send metadata like role, location, etc.

Within the <drop-feedback /> component:

<drop-feedback
  meta-role="admin"
  meta-location="dashboard"
  meta-organization="dropfeedback"
/>

Via a trigger element:

<button
  data-feedback-button
  data-meta-role="admin"
  data-meta-location="dashboard"
  data-meta-organization="dropfeedback"
>
  Feedback
</button>

Trigger Specific Attributes​

You can only use the following attributes with the trigger element to customize the widget.

data-feedback-button​

It is used to mark the trigger element. It is required to open the widget.

<button data-feedback-button>Feedback</button>

data-side​

Sets which side of the trigger the widget should open. The default value is auto. The widget will open on a suitable side if there is not enough space on the specified side.

<button data-feedback-button data-side="bottom">Feedback</button>

data-side-offset​

Sets the distance between the trigger and the widget. The default value is 12.

<button data-feedback-button data-side-offset="6">Feedback</button>

data-open​

You can use it to open the widget programmatically.

<button data-feedback-button data-open>Feedback</button>

data-permanent-open​

You can use it to keep the widget open permanently.

<div data-feedback-button data-permanent-open />

API​

<drop-feedback />​

NameTypeDefaultDescription
project-idstring-Determines the project the feedback is sent to
report-identifierstring-Identifies the user who sent the feedback
theme-scheme"dark" | "light"lightTheme scheme of the widget
theme-primary-colorstring#1677ffPrimary color of the widget
theme-text-colorstringlight: #171717, dark: #edededText color of the widget
theme-background-colorstringlight: #ffffff, dark: #0a0a0aBackground color of the widget

Trigger​

NameTypeDefaultDescription
data-sidePopoverSideautoSets which side of the trigger the widget should open
data-side-offsetnumber | string 12Sets the distance between the trigger and the widget
data-openboolean | stringfalseOpens the widget programmatically
data-permanentboolean | stringfalseKeeps the widget open permanently

PopoverSide​

type PopoverSide =
  | "auto"
  | "auto-start"
  | "auto-end"
  | "left"
  | "right"
  | "top"
  | "bottom"
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end"
  | "right-start"
  | "right-end"
  | "left-start"
  | "left-end";