Install

Pop-up

The Smiley Digital Pop-up is inserted on a web page by adding the JavaScript code to the end of the <body> section of the HTML page. If this is not possible, the snippet can be added to the <head> section. This process is very similar to that of other tools, such as Google Analytics.

The snippet should look something like this:

<script
  type="text/javascript"
  src="https://feedback.happy-or-not.com/v1/bootloader/[survey token]/bootloaderjs/?lang=en-GB&init=true"
></script>

Enter your Smiley Digital token and the standard locale code appropriate for your website. If you have pages in different languages, you can use snippets with different languages or replace the locale abbreviation with a reference to a JavaScript variable. Your designated HappyOrNot admin user needs to configure the Survey questions accordingly to translate all necessary languages.

The locale name is in the format [language]-[country] and the language and country codes are two-letter codes from the ISO 639 standard. Language is lowercase, country is uppercase. Learn more on the format in RFC 3066.

Embed

The Smiley Digital Embed is inserted on a web page by adding the shorter JavaScript code to the exact place in the HTML code (<body>) where desired placement is preferred and the longer JavaScript code to the end of the <body> section of the HTML page.

The copyable snippet is provided in the Admin and may look like this:

<script type="text/javascript" src="https://feedback.happy-or-not.com/v1/bootloader/[token]/bootloaderjs/?lang=fi-FI&init=false"></script>
<script type="text/javascript">
  window.HappyOrNot.init({
    token: "token",
    embedTo: document.getElementById('dom-target')
  });
</script>

Content Security Policy (Advanced)

Smiley Digital makes use of two endpoints to communicate with HappyOrNot backend services. In case of strict Content Security Policies, these need to be allowlisted. This can be achieved either on the web server side through setting response headers or through adding meta tags in the HTML of the page that will contain the Smiley Digital script.

meta tags are flexible and easy to configure, while the web server requires more specialized knowledge, though, it is more secure as they cannot be potential overwritten by malicious scripts.

We require two subdomains of the base happy-or-not.com domain to be allowlisted:

https://feedback.happy-or-not.com - serves the Smiley Digital script
https://feedback-api.happy-or-not.com - feedback injest endpoint for recording responses
fonts.googleapis.com - if not already in use on the host page, we utilize Google hosted fonts to provide brand specifics assets

Place the following snippet in the <head> portion of the HTML file:

<meta
  http-equiv="Content-Security-Policy"
  content="
  default-src 'self';
  script-src 'self' https://feedback.happy-or-not.com;
  connect-src 'self' https://feedback-api.happy-or-not.com;
  style-src 'self' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  "
/>

Alternatively, these can be sent alongside other HTTP response headers. However, the configuration differs from web server to web server but the principle is similar.