Documentation
/
Get Started

Get Started

💡

Currently we are in early stage of development. This means that we are actively working on new features and improving the current ones.

Create a new project

You can make a new project by clicking on the "New Project" tile on the dashboard.



Creating new project

With a new project, you will get a token. This token tells the HappyReact widget to assign reactions to website.

Add reactions

In reactions tab you can specify what reactions do you want to display in the widget.



Adding reaction

Whitelist domains

You have to restrict on which website widget can be displayed. There is no limit on the number of domains you can add.



Adding domains in project settings

Place reactions widget on your website

Add widget where you want to place it on your website. Pass <token> from your project and meaningful resource name in <title> place. Resource should be unique for every page.

<div data-hr-token="<token>" data-hr-resource="<title>"></div>

Decorate your widget with heading and class that will be used to change the style of the widget.



Placing widget on your website
💡

Provide meaningful resource name to distinguish them in dashboard.

Add script

Inject script just before body closing tag.

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

Remember to add defer keyword to the script tag.

Add styles

Now you just need to add styling to your widget. You can be creative!

With sample code as below:

@media (prefers-color-scheme: light) {
  .post__reactions {
    --reaction-color: 214, 214, 214;
    --reaction-accent: 0, 116, 217;
  }
}

@media (prefers-color-scheme: dark) {
  .post__reactions {
    --reaction-color: 237, 237, 237;
    --reaction-accent: 102, 186, 255;
  }
}

.post__reactions {
  min-height: 200px;

  --reaction-shadow-color: rgba(66, 68, 90, 0.2);
}

.post__reactions .hr-reaction {
  font-size: 16px;
}

.post__reactions .hr-reaction-icon {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transition: all 275ms linear;
  text-shadow: 1px 1px 1px var(--reaction-shadow-color);
  background-color: rgb(var(--reaction-color));
  box-shadow: 0px 0px 0px 2px rgba(var(--reaction-color), 0.1), 0px 0px 0px 5px
      rgba(var(--reaction-color), 0.3),
    0px 0px 0px 7px rgba(var(--reaction-color), 0.1);
}

.post__reactions .hr-reaction:hover .hr-reaction-icon {
  border-radius: 50%;
  background-color: rgb(var(--reaction-color));
  box-shadow: 0 0 15px rgba(var(--reaction-color), 0.8), 0 0 15px rgba(var(--reaction-color), 0.6);
}

.post__reactions .hr-reaction-active .hr-reaction-icon {
  border-radius: 50%;
  background-color: rgb(var(--reaction-accent));
  box-shadow: 0px 0px 0px 2px rgba(var(--reaction-accent), 0.06), 0px 0px 0px
      5px rgba(var(--reaction-accent), 0.2),
    0px 0px 0px 7px rgba(var(--reaction-accent), 0.05);
}

.post__reactions .hr-reaction-active:hover .hr-reaction-icon {
  border-radius: 50%;
  background-color: rgb(var(--reaction-accent));
  box-shadow: 0 0 15px rgba(var(--reaction-accent), 0.6), 0 0 15px rgba(var(--reaction-accent), 0.5);
}

.post__reactions .hr-reaction .hr-reaction-text {
  margin-top: 15px;
}

.post__reactions .hr-reaction-active .hr-reaction-text {
  font-weight: bold;
}

You can get this result



Adding widget styling

Read more about styling to see what you can acheive.