1. Home
  2. Reporting & alerts
  3. Customizing results widgets

Customizing results widgets

Widget customization options

Each widget can be styled and customized.

Recent responses

Choose the number of recent results you’d like to display by changing the parameter, x – shown in green below.

You have the ability to resize it – by changing both width and height parameters within the code as shown below in red. Make sure both the widths are the same, as well both the heights.

iframe src=”https://app.customerthermometer.com/?template=embed_chart&c=last_x&w=336&h=280&u=52&m=d3719961&x=100&ia=1″ frameborder=”0″ scrolling=”no” width=”336” height=”280“>

Customer Happiness factor

Choose the number of recent results you’d like to display by changing the parameter, x – shown in green below.

You have the ability to resize it – by changing both width and height parameters within the code as shown below. Make sure both the widths are the same, as well both the heights.

iframe src=”https://app.customerthermometer.com/?template=embed_chart&c=happy_x&w=336&h=280&u=52&m=d3719961&x=100&ia=1″ frameborder=”0″ scrolling=”no” width=”336” height=”280

Happiness as a %age

You have the ability to resize it – by changing both of the width and height parameters within the code as shown below in red.

iframe src=”https://app.customerthermometer.com/?template=embed_chart&c=happy_num_b&w=336&h=280&u=39&m=6dd0de10&i=17997&cl=FF0066&bg=00FF99&mb=1″ height=”280“width=”336” frameborder=”0″ scrolling=”no”

In addition, you have complete control over the color of the background and the colour of the text:

iframe src=”https://app.customerthermometer.com/?template=embed_chart&c=happy_num_b&w=336&h=280&u=39&m=6dd0de10&i=17997&cl=FF0066&bg=00FF99&mb=1″ height=”280“width=”336” frameborder=”0″ scrolling=”no”

These numbers are called hex. To work out which color you need and therefore which number you need to add – visit this w3schools.com page.

Advanced users

Although we offer some customization options (as described above), it won’t be possible to fully customize the iFrame to fit a specific look and feel of a webpage.

However, for more advanced users, we can offer the Happiness Percentage as a number which you can pull via the API, using a server-side script. The URL required for this method is provided on your ‘Widgets’ tab, alongside the standard iFrame.

Essentially, you need to run a couple of lines of PHP on your site on page load which will return a number. You can then wrap it in a div and output to screen.

Below is an example URL like the one you’ll find on you ‘Widgets’ tab (note: this is not a functioning URL, it is an example only).

https://app.customerthermometer.com/api.php?apiKey=e207d26fc91e8278e2047378d6d5da75&getMethod=getHappinessValue&blastID=17997

The URL alone would simply return a number in your browser.

Method 1 (fopen)

If your server supports it then you can output this number on a webpage using a single line of code.

echo file_get_contents(https://app.customerthermometer.com/api.php?apiKey=e207d26fc91e8278e2047378d6d5da75&getMethod=getHappinessValue&blastID=17997’);

Method 2 (curl)

Many servers have remote fopen turned off. So as an alternative – you could use the following:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://dev.customerthermometer.com/api.php?apiKey=21eafc1fbfa753e5a234412bdc00ebb9&getMethod=getSendQuota");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);

That’s curl, where $output is populated with the number which they can then use echo $output;

Net Promoter® Score real time reporting

You have the ability to resize it – by changing both of the width and height parameters within the code as shown below in red.

iframe src=”https://app.customerthermometer.com/?template=embed_chart&c=happy_num_b&w=336&h=280&u=39&m=6dd0de10&i=17997&cl=FF0066&bg=00FF99&mb=1″ height=”280“width=”336” frameborder=”0″ scrolling=”no”

In addition, you have complete control over the colour of the background and the colour of the text:

iframe src=”https://app.customerthermometer.com/?template=embed_chart&c=happy_num_b&w=336&h=280&u=39&m=6dd0de10&i=17997&cl=FF0066&bg=00FF99&mb=1″ height=”280“width=”336” frameborder=”0″ scrolling=”no”

These numbers are called hex. To work out which colour you need and therefore which number you need to add – visit this w3schools.com page.

Real time comments

Comments can be moderated – only publish what you wish. Find out more here.

Choose the number of recent comments you’d like to display by changing the parameter, x – shown in green below.

You can change the title displayed by changing the words in blue. Note %20 is the equivalent to a space.

You can change the size – by changing both width and height parameters within the code as shown below in red. Make sure both the widths are the same, as well both the heights.

You can also change the text color. This is an HTML color code. You can look them up here.

iframe src=”https://app.customerthermometer.com/?template=embed_chart&c=last_x_comments&w=600&h=280&u=52&m=d3719961&i=&x=5&lb=Latest%20CT%20Comments&cl=333” frameborder=”0″ scrolling=”no” width=”600” height=”280

 

Updated on June 13, 2018

Related Articles