Quick start: 3 minutes tutorial

Before you start, make sure you follow Get Started. At this point, you need the project with all setups you would like to make.

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.

💡

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

Read more about styling to see what you can acheive.

Was this page helpful?

Get Started