Documentation

1. Collect Feedback

1.1 Widget Integration

1.1.1 Add the following snippet at the position where the widget should be displayed on your page:

HTML
<div id="heyscore-widget"></div>

1.1.2 Apply the minimal configuration on each page where you want the widget to appear.

Note: Replace <<TOUCHPOINT_TOKEN>> with your real touchpoint token. You will find the token for each touchpoint at the integration page of your account.

HTML
<script src="https://www.heyscore.net/widget.js"></script>
<script>
  window.HeyScoreConfig = {
    touchpoint: "<<TOUCHPOINT_TOKEN>>",
    target: "#heyscore-widget",
    lang: "de",
  };
</script>

1.1.3 Load the script on each page.

HTML
<script src="https://www.heyscore.net/widget.js"></script>

1.1.4 Optional: Extend the configuration to include custom meta data that will be attached to the submitted feedback. You can define your own key:value pairs.

HTML
<script>
  window.HeyScoreConfig = {
    touchpoint: "<<TOUCHPOINT_TOKEN>>",
    target: "#heyscore-widget",
    lang: "de",
    meta: {
      orderId: "2025-000123",
      customerId: "cust_789",
      productId: "prod_123"
    }
  };
</script>

Alternatively, you can update or add meta data dynamically at any time using the widget API:

HTML
<script>
  window.HeyScoreWidget?.updateMeta({
    orderId: "2025-000123",
    customerId: "cust_789",
    productId: "prod_123"
  });
</script>

1.1.1 A standard HeyScore link looks like this. It will direct users to a HeyScore feedback form.

Note: Replace <<TOUCHPOINT_TOKEN>> with your real touchpoint token. You will find the token for each touchpoint at the integration page of your account.

HTML
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>

1.1.2 If you prefer to show the score options at your application, you can attach the score values 0 to 10 to the link:

HTML
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/0
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/1
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/2
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/3
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/4
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/5
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/6
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/7
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/8
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/9
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/10

With this option, you are able to create your own UX, for example:

HTML
<div class="hsc_wrapper">
  <div class="hsc_question">How likely is it that you would recommend us to a friend or colleague?</div> 
  <div class="hsc_row_1">
    <a class="hsc_score hsc_score_0" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/0"><span>0</span></a>
    <a class="hsc_score hsc_score_1" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/1"><span>1</span></a>
    <a class="hsc_score hsc_score_2" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/2"><span>2</span></a>
    <a class="hsc_score hsc_score_3" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/3"><span>3</span></a>
    <a class="hsc_score hsc_score_4" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/4"><span>4</span></a>
    <a class="hsc_score hsc_score_5" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/5"><span>5</span></a>
  </div>
  <div class="hsc_row_2">
    <a class="hsc_score hsc_score_6" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/6"><span>6</span></a>
    <a class="hsc_score hsc_score_7" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/7"><span>7</span></a>
    <a class="hsc_score hsc_score_8" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/8"><span>8</span></a>
    <a class="hsc_score hsc_score_9" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/9"><span>9</span></a>
    <a class="hsc_score hsc_score_10" href="https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>/10"><span>10</span></a>
  </div>    
  <div class="hsc_legend">
    <div class="hsc_legend_left">0 - Not at all likely</div>
    <div class="hsc_legend_right">10 - Extremely likely</div>
  </div>
</div>

<style>
.hsc_wrapper {
  text-align:center; 
  margin: 1em auto; 
  max-width: 600px; 
  width: 100%; 
  font: 18px/1.5 sans-serif; 
}
.hsc_wrapper .hsc_score {
  display: inline-block;
  position: relative;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 100%;
  border: 2px solid;
  padding:0;
  margin-right: 0px;
  background-color: black;
  color:white;
  font: 18px/1.5 sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.hsc_wrapper .hsc_score span {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hsc_wrapper .hsc_row_1, .hsc_wrapper .hsc_row_2 {
  display: inline-block;
  text-align:center;
  width: 100%;
}
.hsc_wrapper .hsc_legend {
  overflow: auto;
  font-size: 85%;
}
.hsc_wrapper .hsc_legend_left, .hsc_wrapper .hsc_legend_right {
  float:left;
  width:50%;
}
.hsc_wrapper .hsc_legend_left {
  text-align:left;
}
.hsc_wrapper .hsc_legend_right {
  text-align:right;
}
.hsc_wrapper .hsc_text {
  width:100%;
  height: 100px;
  font: 18px/1.5 sans-serif;
}
.hsc_submit {
  width:100%;
  height: 48px;
  color: white;
  background-color: black;
  border: 0px solid;
  font: 18px/1.5 sans-serif;
  cursor: pointer;
}  
@media(min-width:630px) {
  .hsc_wrapper .hsc_row_1, .hsc_wrapper .hsc_row_2 {
    width: auto;
  }
}
@media(min-width:630px) {
  .hsc_wrapper .hsc_legend {
    max-width: none;
  }
}
</style>

1.2.3 Optional: To add meta data, attach query parameters:

HTML
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>?key=value

You can add multiple fields by separating them with & (encoded as &amp;). Example:

HTML
https://www.heyscore.net/fb/cl/<<TOUCHPOINT_TOKEN>>?customerId=12345&amp;orderId=98765