Embedded Analytics - FAQs

I cannot embed Holistics within my localhost site

Symptoms: You are trying to embed a Holistics dashboard in your localhost, but receive the following error

• Chrome: holistics.io refused to connect
• Firefox: website will not allow Firefox to display the page reference

Explanation: Holistics has a CSP (Content Security Policy) rule that only allows embedding Holistics dashboards in HTTPS websites. This is to ensure your data security.

Solution: Run your localhost site with HTTPS.
We at Holistics understand that this is a bit of a hassle, so we are working on a better solution to improve your developer experience.

InvalidAuthenticityToken error

Sometimes you'll receive this error: ActionController::InvalidAuthenticityToken

There are 2 reasons

• Make sure your site has https
• Enable 3rd-party cookies in your browsers

Access denied for localStorage

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document

If you have an issue showing the embed, please check the browser's console log for the error:

1. Please open Chrome settings, type "third" in the search box, click the Content Settings button, and view the fourth item under Cookies.
2. Make sure that the option Block third-party cookies and site data is unchecked.

If this setting is checked, third-party scripts cookies are disallowed and access to localStorage may result in thrown SecurityError exceptions.

I saw a blank page when trying to use the embedded frame on my local PC

Due to our security policy, using HTTPS is enforced to prevent token leakage that might lead to your data leakage. It could be the case that your local environment doesn't set up HTTPS.

To solve this problem, please embed the iframe inside a webpage that is served with HTTPS.

Would the embedded dashboards be mobile-friendly (responsive) when viewed outside of Holistics?

Yes, we offer a mobile-responsive view for embedded dashboards.

I received an error: “414 Request-URI Too-Large Error”

This error occurs when the URI exceeds the browser's length limit. In Embedded Analytics, it usually happens if the token settings are too large, such as when using permission rules with many values in the is condition.

To resolve this issue, Holistics provides you with an API to shorten your embed token as follows:

Step 1: Obtain a Shortened Token

Submit a POST request to the appropriate URL for your region's domain:

POST https://secure.holistics.io/api/v2/embed/<%= embed_code %>/shorten_token

Request Body:

{
    "token": "<%= token %>"
}

Expected Response:

{
    "shortened_token": "the_shorten_embed_token"
}

Step 2: Use the Shortened Token

Once you have received the shortened_token, use it as a regular token in your requests.

GET https://secure.holistics.io/embed/<%= embed_code %>?_token=<%= shortened_token %>

I received an error: "To protect your security, us.holistics.io will not allow Firefox Developer Edition to display the page if another site has embedded it. To see this page, you need to open it in a new window."

Currently, Holistics Embedded Analytics can only be embedded within HTTPS sites to ensure your data security. Therefore, please prepend your address with https:// or open the embedded dashboard in a new window.

Why can't I copy values from my embedded dashboard?

This is the default behavior of Holistics, but you can easily configure the embedding code to allow users to copy from your embedded dashboard.

Since Holistics needs to render the dashboards in your websites, there are some default rules applied to prevent Holistics from taking controls of your websites, and "copying" is one of the rules. These rules are implicitly specified by Web Standards to make the web safer.

To enable copying, you need to add allow="clipboard-read" to the embedded HTML code of the embedded iframe. Considering the example here, the HTML iframe with copying enabled should look like this:

<iframe
  src="https://secure.holistics.io/embed/<%= embed_code %>?_token=<%= token %>"
  style="width: 100%; height: 600px;"
  allow="clipboard-read"
  frameborder="0"
  allowfullscreen
>
</iframe>