JavaScript feedback widget

Installation

Add following element before closing </body> tag

<script src="https://app.happyreact.com/widget/reactions.js" defer></script>

Usage

First, you need to create a Happy React project. You will get a token to connect the widget with Happy React. There you can change project settings, add domains to the whitelist, or see statistics.

Displaying widget with basic styling

This code lets you add the widget to your website with the basic styling that comes with the package.

<div data-hr-token="[token]" data-hr-resource="users-happiness"></div>

[token] - project token, find it in project settings
users-happiness - unique identifier of a resource

Custom styles using Global CSS

Use this if your application allows importing global styles. You can use default classes to style widget elements. Please see Happy React styling guide for more about styling.

<!-- page.html  -->
<!-- place this in <head> -->
<link href="global.css" rel="stylesheet" />
 
<!-- place this where we want to display feedback widget -->
<div data-hr-token="[token]" data-hr-resource="users-happiness"></div>

And here is our global.css file:

/* global.css */
 
.hr-container {
}
 
.hr-reaction {
}

💡

Remember to replace token and resource with your project's token and proper resource

Custom styles using classes

Use this with Module CSS. Import styles as a variable and assign them using classes property. This can let you add class to different elements of the widget. Please see Happy React styling guide for more about styling.

<!-- page.html  -->
<!-- place this in <head> -->
<link href="module.css" rel="stylesheet" />
 
<!-- place this where we want to display feedback widget -->
<div
  data-hr-token="[token]"
  data-hr-resource="users-happiness"
  classes='{"root":"root","container":"container"}'
></div>

And here is our module.css file:

/* module.css */
 
.root {
}
 
.container {
}

💡

Remember to replace token and resource with your project's token and proper resource

Reacting to user events

❌

For now reacting on user is not supported in JavaSript SDK.

API

The Widget component lets you display a feedback widget with reactions and settings. Control these settings on Happy React dashboard (opens in a new tab).

Required props

Prop	Type	Description
`token`	`string`	Token of your project
`resource`	`string`	Unique identifier of resource

Optional props

Prop	Default	Type	Description
`classes`		`string \|` `{ root?: string; container?: string; grid?: string; cell?: string; reaction?: string; reactionActive?: string; reactionIcon?: string; reactionText?: string; }`	Classes applied to widget elements. You can find them on Happy React styling guide

Was this page helpful?

Svelte Guides